/* PORTED 1:1 from sketches/4-1/combo.css by wp/generator/port_assets.py - do not edit here, edit the sketch and re-port (or override in sd-wp.css) */
/* ==========================================================================
   ShimonDesign — sketch 3.4 "השילוב": what joins the light 3.1 home/post
   with the navy 3.3 pages (loaded last).
   ========================================================================== */

/* ---------- header logo: navy over light; over dark white text + white arrow + mint square ---------- */
.hdr.on-dark .hdr-logo .sd-logo { --logo-text: #fff; --logo-arrow: #fff; --logo-square: var(--mint); }

/* ==========================================================================
   CURSOR LIGHT — very diffused, slightly navy-tinted, no visible edge
   ========================================================================== */
/* navy blocks on the light pages: the light is a layer of the block's own background (always behind the content) */
[data-glow] {
  --glow: radial-gradient(var(--gr, 760px) circle at var(--gx, -2000px) var(--gy, -2000px),
    rgba(52, 200, 190, calc(var(--ga, 0) * .13)) 0%,
    rgba(44, 170, 180, calc(var(--ga, 0) * .09)) 18%,
    rgba(34, 130, 160, calc(var(--ga, 0) * .05)) 38%,
    rgba(20, 90, 140, calc(var(--ga, 0) * .02)) 60%,
    rgba(0, 18, 43, 0) 80%);
}
.panel-navy[data-glow] { background: var(--glow), var(--navy); }
.panel-navy.intro-navy[data-glow] { background: var(--glow), radial-gradient(70% 60% at 100% 0%, rgba(57, 244, 204, .1), rgba(57, 244, 204, 0) 70%), linear-gradient(170deg, #03193A 0%, var(--navy) 60%, #000D20 100%); }
/* the global light on the navy pages: bigger, softer, centred on the pointer */
.cglow { left: -560px; top: -560px; width: 1120px; height: 1120px;
  background: radial-gradient(closest-side, rgba(52, 200, 190, .11) 0%, rgba(44, 170, 180, .075) 22%, rgba(34, 130, 160, .04) 44%, rgba(20, 90, 140, .015) 68%, rgba(0, 18, 43, 0) 100%); }
html:not(.dk) .cglow { display: none; }

/* ==========================================================================
   HOME (3.1) — navy rounded panels alternating with the light page
   ========================================================================== */
.navy-sec { color: #fff; }

/* "עבודות נבחרות" — pinned, so it carries no margins (GSAP copies them onto the pin spacer): the inset panel is a clip-path */
.fx.navy-sec { --inset: clamp(8px, 1.3vw, 20px); margin: 0; padding-top: calc(clamp(40px, 5vw, 80px) + var(--inset)); isolation: isolate;
  clip-path: inset(var(--inset) var(--inset) 0 var(--inset) round var(--r-panel));
  background: var(--glow), radial-gradient(60% 60% at 88% 0%, rgba(57, 244, 204, .12), rgba(57, 244, 204, 0) 70%), linear-gradient(170deg, #03193A 0%, var(--navy) 55%, #000D20 100%); }
.fx.navy-sec .fx-rail { padding-inline: clamp(24px, 4vw, 64px); scroll-padding-inline: clamp(24px, 4vw, 64px); }
.fx.navy-sec.is-pin { padding-top: 0; clip-path: inset(var(--inset) var(--inset) var(--inset) var(--inset) round var(--r-panel)); }
.fx.navy-sec.is-pin .fx-rail { padding-inline: 0; }
.fx.navy-sec.is-pin .fx-track { padding-inline: clamp(28px, 5vw, 90px); }
.fx.navy-sec.is-pin .fx-pin { height: 100vh; }
.fx.navy-sec .fx-prog { width: auto; margin: 0; inset-inline: clamp(28px, 5vw, 90px); }
.fx.navy-sec .fx-intro .lead { color: rgba(255, 255, 255, .72); }
@media (max-width: 820px) {
  .fx.navy-sec { --inset: 8px; padding: 48px 0 34px; clip-path: inset(8px 8px 0 8px round 28px); }
  .fx.navy-sec .fx-pin > .wrap { width: auto; margin-inline: 34px; }
  .fx.navy-sec .fx-rail { padding: 6px 34px 22px 26px; scroll-padding-inline: 34px 26px; }
}

/* "נעים מאוד" as a navy panel: the word-fill lights up in white, the byline in white */
.intro-sec { padding-top: 0; }
.intro-navy { padding-block: clamp(72px, 8vw, 128px); text-align: center; overflow: hidden; isolation: isolate; }
.intro-navy .eyebrow { color: rgba(255, 255, 255, .72); }
.intro-navy .intro-txt { color: #fff; font-size: clamp(24px, 2.7vw, 39px); font-weight: 400; line-height: 1.42; letter-spacing: -.018em; max-width: 24em; }
.intro-navy .intro-txt .mkw .w { font-weight: 500; }
/* every word fills to the same white; the last phrase fills white too, then the mint marker sweeps behind it and its text turns navy */
.intro-navy .intro-txt.fill .soft .w { color: #fff; }
.intro-navy .intro-txt .mkw .w, html.dk .ab-studio-dark .big .mkw .w { color: #fff; transition: opacity .18s linear, color .45s var(--ease) .5s; }
.intro-navy .intro-txt .mkw.on .w, html.dk .ab-studio-dark .big .mkw.on .w { color: var(--navy); }
.intro-navy .intro-sig { background: rgba(255, 255, 255, .07); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 20px 40px -24px rgba(0, 0, 0, .6); }
.intro-navy .intro-sig b { color: #fff; }
.intro-navy .intro-sig small { color: rgba(255, 255, 255, .72); }
@media (max-width: 820px) { .intro-navy { padding-block: 60px; } .intro-navy .intro-txt { font-size: 21.5px; line-height: 1.5; } }

/* "אתרים שבניתי" right after the navy intro: breathing room */
.intro-sec + .show { padding-top: clamp(56px, 6vw, 96px); }

/* contact (light): the big line, a glass form on the off-white page, a soft mint light behind */
.cx-light { position: relative; isolation: isolate; overflow: hidden; }
.cxl-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cxl-glow i { position: absolute; border-radius: 50%; filter: blur(60px); }
.cxl-glow i:nth-child(1) { width: 52vw; aspect-ratio: 1; left: -10vw; top: 22%; background: radial-gradient(closest-side, rgba(57, 244, 204, .32), rgba(57, 244, 204, 0)); }
.cxl-glow i:nth-child(2) { width: 40vw; aspect-ratio: 1; right: -8vw; top: -6%; background: radial-gradient(closest-side, rgba(57, 244, 204, .2), rgba(57, 244, 204, 0)); }
.cx-light .cx-big { font-size: clamp(40px, 6vw, 96px); line-height: 1.02; letter-spacing: -.045em; font-weight: 700; color: var(--navy); max-width: 14em; margin-bottom: clamp(30px, 4vw, 56px); }
.cx-light .cx-big .hl, .cx-light .cx-big .ww:last-child .wi { padding: 0 .1em; color: var(--navy); }
.cx-light .cx-big .hl::before { animation: none; }
.cx-light .cform > .tex { display: none; }
@media (max-width: 820px) { .cx-light .cx-big { font-size: 40px; } .cxl-glow i:nth-child(1) { width: 110vw; left: -40vw; top: 30%; } }

/* ==========================================================================
   FOOTER (all pages) — the 3.1 inset island, deep navy, the light inside it
   ========================================================================== */
html.dk .ftr { position: relative; z-index: 1; }
.ftr-in[data-glow] { position: relative; overflow: hidden; isolation: isolate;
  background: var(--glow), radial-gradient(70% 60% at 50% 0%, rgba(57, 244, 204, .05), rgba(57, 244, 204, 0) 70%), linear-gradient(180deg, #000F25 0%, #000A1A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .06); }

/* ==========================================================================
   BOTTOM CTA ("רוצים גם?")
   ========================================================================== */
/* the logo in the background: smaller and higher on desktop, none on phones */
.cta-mark { height: 70%; right: -3%; bottom: -12%; top: auto; left: auto; }
@media (max-width: 820px) { .cta-mark { display: none; } }
/* services: a framed navy box lit by a slow mint/blue aurora (no lines) */
html.dk .panel-aurora { position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: linear-gradient(165deg, #03193A 0%, var(--navy) 55%, #000D20 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .08); }
html.dk .cta > .aur { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.aur i { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.aur i:nth-child(1) { width: 55%; aspect-ratio: 1; right: -8%; top: -40%; background: radial-gradient(closest-side, rgba(57, 244, 204, .34), rgba(57, 244, 204, 0)); animation: aur1 22s ease-in-out infinite alternate; }
.aur i:nth-child(2) { width: 50%; aspect-ratio: 1; left: -6%; bottom: -45%; background: radial-gradient(closest-side, rgba(70, 120, 230, .34), rgba(70, 120, 230, 0)); animation: aur2 28s ease-in-out infinite alternate; }
.aur i:nth-child(3) { width: 34%; aspect-ratio: 1; left: 34%; top: 10%; background: radial-gradient(closest-side, rgba(57, 244, 204, .16), rgba(57, 244, 204, 0)); animation: aur3 34s ease-in-out infinite alternate; }
@keyframes aur1 { to { transform: translate3d(-22%, 26%, 0) scale(1.15); } }
@keyframes aur2 { to { transform: translate3d(26%, -18%, 0) scale(1.2); } }
@keyframes aur3 { to { transform: translate3d(-30%, 20%, 0) scale(.85); } }
html.dk .panel-aurora .cta-mark { display: none; }
@media (prefers-reduced-motion: reduce) { .aur i { animation: none; } }

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
/* page head: one decorative mark — desktop half cut by the right edge, phones a little lower */
.ph-marks .sd-mark:nth-child(n + 2) { display: none; }
html.dk .ph .ph-marks .sd-mark:nth-child(1) { height: 240px; right: -108px; top: 26%; }
@media (max-width: 820px) { html.dk .ph .ph-marks .sd-mark:nth-child(1) { height: 120px; right: -20px; top: 30%; } }

/* about: the studio statement straight on the navy page, filling in white */
html.dk .ab-studio.ab-studio-dark { padding: clamp(8px, 2vw, 24px) 0 clamp(24px, 3vw, 40px); background: none; box-shadow: none; }
html.dk .ab-studio-dark .eyebrow { color: rgba(255, 255, 255, .72); }
html.dk .ab-studio-dark .big { color: #fff; font-size: clamp(26px, 2.9vw, 42px); line-height: 1.45; max-width: 32em; }
@media (min-width: 821px) {
  html.dk .ab-studio.ab-studio-dark { text-align: center; }
  html.dk .ab-studio-dark .eyebrow { justify-content: center; }
  html.dk .ab-studio-dark .big { margin-inline: auto; }
}

/* contact page: no hard edge of light, a calmer glow under the form */
html.dk .cx-page { overflow: visible; }
html.dk .cx-page .cform > .tex .g1 { background: radial-gradient(closest-side, rgba(57, 244, 204, .08), rgba(57, 244, 204, 0)); }
html.dk .cx-page .cform > .tex .g2, html.dk .cx-page .cform > .tex .g3 { display: none; }

/* contact cards: no change on hover */
@media (hover: hover) and (pointer: fine) {
  html.dk .c-card.navy:hover { background: var(--card); color: #fff; box-shadow: var(--card-sh); transform: none; }
  html.dk .c-card.navy:hover .ic-sq { background: rgba(57, 244, 204, .14); color: var(--mint); }
  html.dk .c-card.navy:hover .k { color: var(--ink-2); }
  html.dk .c-card.navy:hover .go i { background: rgba(255, 255, 255, .12); color: var(--mint); transform: none; }
}

/* "שלבי הפעולה" without the line: the dots stand on their own */
html.dk .prx-dot { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .12); }
html.dk .prx-s.on .prx-dot { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 40px 2px rgba(57, 244, 204, .45); }

/* ---------- menu button: Shimon's hamburger, no pill, no word (navy on light, white over dark; the mint pill stays mint) ---------- */
.hdr-btn.menu, .hdr.on-dark .hdr-btn.menu { width: 44px; height: 44px; padding: 0; gap: 0; border-radius: 12px; background: transparent; color: var(--navy); box-shadow: none; }
.hdr.on-dark .hdr-btn.menu { color: #fff; }
.hdr-btn.menu .hb { width: 29px; height: 29px; display: block; transform: none; }
.hdr-btn.menu:focus-visible { outline-offset: 0; }
@media (max-width: 1120px) { .hdr-bar { padding-inline: 4px 18px; } }

/* home "מה אני עושה": phones keep the cards still (no colour change on hover / tap — the stack moves on its own) */
@media (max-width: 820px) {
  .svc-sec a.svc-card:hover, .svc-sec a.svc-card:active { background: #fff; color: var(--navy); transform: none;
    box-shadow: 0 1px 2px rgba(0, 18, 43, .05), 0 14px 30px -18px rgba(0, 18, 43, .3); }
  .svc-sec a.svc-card:hover p, .svc-sec a.svc-card:hover .en { color: var(--ink-2); }
  .svc-sec a.svc-card:hover .chip { background: #fff; color: var(--navy); }
  .svc-sec a.svc-card:hover .link-go { color: var(--navy); }
  .svc-sec a.svc-card:hover .link-go .sd-i { transform: none; }
}

/* home "אתרים שבניתי": each slide softly tinted with its project colour (like the portfolio cards) */
.show-card.tinted { background: color-mix(in srgb, var(--tint) 5%, #fff); }
.show-card.tinted .stage { background: radial-gradient(70% 60% at 50% 36%, color-mix(in srgb, var(--tint) 4%, #fff) 0%, rgba(255, 255, 255, 0) 72%),
  linear-gradient(180deg, color-mix(in srgb, var(--tint) 9%, #FAFAFA) 0%, color-mix(in srgb, var(--tint) 15%, #F4F4F4) 100%); }
.show-card.tinted .stage::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0), color-mix(in srgb, var(--tint) 10%, transparent)); }
.show-card.tinted .show-cap { border-top-color: color-mix(in srgb, var(--tint) 14%, transparent); }

/* ---------- portfolio: less green — the active filter and "טען עוד" are white with navy text ---------- */
html.dk body.sd-page-portfolio .seg button[aria-pressed="true"],
html.dk body.sd-page-portfolio .filters .seg button[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .55); }
html.dk body.sd-page-portfolio .seg button[aria-pressed="true"] .n { background: var(--navy); color: #fff; }
html.dk body.sd-page-portfolio .more .btn-white { background: #fff; color: var(--navy); box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .6); }
@media (hover: hover) and (pointer: fine) { html.dk body.sd-page-portfolio .more .btn-white:hover { background: color-mix(in srgb, #fff 90%, var(--mint)); } }

/* ---------- home: the hero frame and the bento as wide as the navy panels below ---------- */
.opening .hero > .wrap, .opening .bento-sec > .wrap { width: auto; margin-inline: clamp(8px, 1.3vw, 20px); }

/* ---------- header bar: as wide as the panels at the top of the page, back to the floating width once scrolled ---------- */
@media (min-width: 821px) {
  .hdr { padding-inline: clamp(8px, 1.3vw, 20px); }
  .hdr-bar { width: 100%; max-width: 1240px; transition: max-width .3s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease); }
  .hdr.at-top .hdr-bar { max-width: 100%; }
}
@media (min-width: 821px) and (prefers-reduced-motion: reduce) { .hdr-bar { transition: none; } }

/* ---------- header bar: the same rounded-rectangle language as the panels and cards (not a pill) ---------- */
.hdr-bar { border-radius: 22px; }
@media (max-width: 820px) { .hdr-bar { border-radius: 18px; } }

/* ---------- posters: on hover a phone rises fully into view, above the caption (not clipped by its window) ---------- */
@media (hover: hover) and (pointer: fine) {
  .pst-web .pm { transition: transform .8s var(--ease); }
  .pst-web:hover .pm { overflow: visible; -webkit-mask-image: none; mask-image: none; z-index: 4; }
  .pst:hover .pm-ph .mk-phone { transform: translateY(-17%) rotate(-1deg); filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .55)); }
  .pst:hover .pm-dv .mk-phone { transform: translateY(-9%) rotate(1deg) scale(1.03); filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55)); }
}

/* ---------- portfolio grid: 3 posters a row on desktop, one full-width card a row on phones ---------- */
html.dk .pg-posters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 820px) {
  html.dk .pg-posters, html.dk .pg-posters.pg-3 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  html.dk .pg-posters .pst { border-radius: 26px; }
}

/* ---------- reviews on phones: a sticky stack, one card after another ---------- */
@media (max-width: 820px) {
  .mgrid.rv-stack > .mcol { gap: 22px; }
  .mgrid.rv-stack > .mcol > li { position: sticky; }
  .mgrid.rv-stack > .mcol > li > figure { position: relative; transform-origin: 50% 0; will-change: transform; }
  .mgrid.rv-stack > .mcol > li > figure::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(0, 8, 22, var(--dim, 0)); }
  .mgrid.rv-stack .r-card { background: linear-gradient(165deg, #0b2b55 0%, #04193a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 -18px 40px -20px rgba(0, 0, 0, .7); }
}


/* ==========================================================================
   ROUND 4 (26/10)
   ========================================================================== */
/* 1 · home service chips: navy square, mint icon (bento + "מה אני עושה") */
body.sd-page-home .svc-mini .ic-sq, body.sd-page-home .svc-sec .ic-sq { background: var(--navy); color: var(--mint); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
@media (hover: hover) and (pointer: fine) and (min-width: 821px) { body.sd-page-home .svc-sec a.svc-card:hover .ic-sq { background: var(--mint); color: var(--navy); } }

/* 2 · "100% לקוחות מרוצים": a navy card, mint number, white label and heart */
body.sd-page-home .bento .t-stat.mint { background: var(--navy); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 22px 44px -22px rgba(0, 18, 43, .55); }
body.sd-page-home .bento .t-stat.mint .v { color: var(--mint); }
body.sd-page-home .bento .t-stat.mint .k, body.sd-page-home .bento .t-stat.mint .k .sd-i { color: #fff; }

/* 3 · the pinned gallery: arrows by the counter, a clear hint, grab cursor */
.fx-arrows { display: flex; gap: 8px; flex: none; }
.fx .fx-arrows .rbtn { width: 42px; height: 42px; color: #fff; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background-color .2s var(--ease), transform .16s var(--ease); }
.fx .fx-arrows .rbtn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .fx .fx-arrows .rbtn:hover { background: var(--mint); color: var(--navy); } }
.fx-say { flex: none; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .62); }
.fx-hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 8px 14px 8px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.fx-hint-i { display: inline-flex; gap: 2px; color: var(--mint); }
.fx-hint-i .sd-i { width: 17px; height: 17px; }
.fx-hint-i .sd-i:first-child { animation: fxh-y 1.6s var(--ease) infinite; }
.fx-hint-i .sd-i:last-child { animation: fxh-x 1.6s var(--ease) .2s infinite; }
@keyframes fxh-y { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }
@keyframes fxh-x { 0%, 100% { transform: none; } 50% { transform: translateX(-3px); } }
.fx.is-pin .fx-track { cursor: grab; }
.fx.is-drag .fx-track { cursor: grabbing; user-select: none; }
.fx.is-drag .pst { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .fx-hint-i .sd-i { animation: none !important; } }

/* 4 · home contact: the two boxes in navy glass (headline + light section unchanged) */
.cx-light .cwide.cx-navy .tile { color: #fff;
  background: linear-gradient(160deg, rgba(5, 34, 72, .9) 0%, rgba(0, 18, 43, .88) 55%, rgba(0, 12, 30, .92) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 34px 70px -34px rgba(0, 18, 43, .6); }
.cx-light .cwide.cx-navy .cform-head h2 { color: #fff; }
.cx-light .cwide.cx-navy .fld input::placeholder, .cx-light .cwide.cx-navy .fld textarea::placeholder { color: rgba(255, 255, 255, .55); }
.cx-light .cwide.cx-navy .consent { color: rgba(255, 255, 255, .78); }
.cx-light .cwide.cx-navy .topics span { color: #fff; }
.cx-light .cwide.cx-navy .topics input:checked + span { color: var(--navy); }
.cx-light .cwide.cx-navy .csoc-logo .sd-logo { --logo-text: #fff; --logo-arrow: #fff; --logo-square: var(--mint); }
/* the social box: logo centred on top, links + phone in the middle, the WhatsApp card at the bottom */
.cx-light .cwide.cx-navy .csoc { gap: 12px; }
.cx-light .cwide.cx-navy .csoc-logo { align-self: center; padding: 6px 0 4px; }
.cx-light .cwide.cx-navy .csoc ul { margin-top: auto; }
.cx-light .cwide.cx-navy .csoc-tel { margin-bottom: auto; }
.cx-light .cwide.cx-navy .csoc-wa { margin-top: 0; }

/* 5 · website project: the hero devices sit straight on the page (no glass panel behind them) */
html.dk .wh-stage { background: none; box-shadow: none; border-radius: 0; }
html.dk .wh-stage::after { display: none; }
/* 6 · the desktop view: just the browser window (no frame around it) */
html.dk .desk-sec .stage.shot-wrap { background: none; box-shadow: none; border-radius: 0; padding: 0; }
html.dk .desk-sec .stage.shot-wrap::after { display: none; }
/* 7 · phones: a comfortable gap under the text */
@media (max-width: 820px) { html.dk .mob-sec .mob-rail { margin-top: 30px; } html.dk .mob-sec .sh { margin-bottom: 18px; } }

/* 8 · services on phones: the device fully visible and smaller, more padding, more space between the cards */
@media (max-width: 820px) {
  html.dk .svc-rows { gap: 22px; }
  html.dk .svc-row .svc-vis { min-height: 0; padding: 30px 30px 6px; overflow: visible; }
  html.dk .svc-row .svc-vis-in { transform: none !important; }
  html.dk .svc-vis-in > .mk-duo { width: 100%; max-width: 300px; }
  html.dk .svc-vis-in > .mk-trio { width: 100%; max-width: 250px; }
  html.dk .svc-vis-in .sys-combo { max-width: 290px; padding-bottom: 8%; }
  html.dk .svc-vis-in .pair { max-width: 260px; }
  html.dk .svc-txt { padding: 26px 26px 30px; }
  html.dk .svc-subs { gap: 22px; }
  html.dk .svc-sub-vis { height: auto; padding: 30px 30px 8px; }
  html.dk .svc-sub-vis > div { transform: none !important; }
  html.dk .svc-sub-vis .pair { max-width: 260px; margin-inline: auto; }
  html.dk .svc-sub-vis .pair img:nth-child(2) { transform: none; }
  html.dk .svc-sub-txt { padding: 24px 26px 30px; }
}
/* 9 · desktop: the two branding services as cubes like the others */
html.dk .svc-row-sub .svc-vis .pair { max-width: 460px; }

/* 11 · about on phones: proper padding in "מי אני", values away from the edges */
@media (max-width: 820px) {
  html.dk .ab-row .tile.ab-me-txt { padding: 30px 26px; }
  html.dk .vals { padding-inline: 6px; gap: 12px; }
  html.dk .vals li { padding: 22px 18px; }
}

/* 12 · reviews on phones: the stack starts right under the page head */
@media (max-width: 820px) { body.sd-page-reviews .ph { padding-bottom: 26px; } }