/* V8.2 — Homepage, new design (owner's two reference images, adapted to Keerki):
   clean header (no search icon here — the hero has the one main search),
   a large visual hero with one search bar and three light quick links,
   the four key pages as photo cards (2×2 on phones, 4 in a row on computers),
   four simple services (2×2 on phones), one strong "specific product?" banner,
   and the numbers as a light strip next to the final "Ready to start?" call.
   Designed for the phone first; the computer layout is not a stretched phone. */

.kk-home #siteSearchBtn{display:none}

/* ---------- Hero ---------- */
.h8-hero{position:relative;overflow:hidden;color:#fff;text-align:center;padding:34px 16px 30px;
  background:radial-gradient(700px 360px at 85% -10%,rgba(91,180,255,.35),transparent 60%),linear-gradient(160deg,#041A33 0%,#063B70 55%,#0B4F93 100%)}
.h8-hero.has-photo{background:linear-gradient(180deg,rgba(4,26,51,.62) 0%,rgba(6,59,112,.55) 55%,rgba(4,26,51,.78) 100%),var(--h8-photo) center/cover no-repeat}
.h8-hero-art{position:absolute;inset:auto 0 0 0;width:100%;height:62%;pointer-events:none}
.h8-hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.h8-title{margin:0 0 12px;font-size:1.85rem;font-weight:800;line-height:1.3;letter-spacing:-.3px;text-shadow:0 2px 18px rgba(3,17,34,.35)}
.h8-title>span{display:block}
.h8-accent{background:linear-gradient(90deg,#7DD3FC,#BAE6FD);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.h8-sub{margin:0 auto 20px;max-width:560px;font-size:.95rem;line-height:1.75;color:rgba(255,255,255,.88)}

.h8-search{position:relative;display:flex;align-items:center;gap:6px;background:#fff;border-radius:18px;padding:6px;max-width:640px;margin:0 auto;box-shadow:0 18px 44px rgba(3,17,34,.38)}
.h8-search-ico{width:20px;height:20px;color:#94A3B8;flex-shrink:0;margin-inline-start:10px}
.h8-search input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:inherit;font-size:16px;color:var(--text);padding:12px 6px;-webkit-appearance:none;appearance:none}
.h8-search input::-webkit-search-cancel-button{display:none}
.h8-search button{flex-shrink:0;border:0;border-radius:13px;min-height:48px;padding:0 22px;font:inherit;font-weight:800;font-size:.95rem;color:#fff;background:linear-gradient(135deg,#0B4F93,#063B70);cursor:pointer}
.h8-search button:hover{filter:brightness(1.1)}
.h8-search:focus-within{box-shadow:0 18px 44px rgba(3,17,34,.38),0 0 0 4px rgba(125,211,252,.45)}
.h8-search-results{position:absolute;top:calc(100% + 8px);inset-inline:0;z-index:40;background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(3,17,34,.3);max-height:min(60vh,440px);overflow-y:auto;text-align:start;color:var(--text);padding:6px}
.h8-search-results[hidden]{display:none}

.h8-quick{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.h8-quick a{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;font-size:.82rem;font-weight:600;color:#fff;text-decoration:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s}
.h8-quick a:hover{background:rgba(255,255,255,.2)}
.h8-quick svg{width:15px;height:15px;color:#7DD3FC;flex-shrink:0}

@media (min-width:860px){
  .h8-hero{padding:96px 24px 104px;min-height:520px;display:flex;align-items:center;justify-content:center}
  .h8-hero-inner{width:100%}
  .h8-title{font-size:3rem}
  .h8-sub{font-size:1.08rem;margin-bottom:28px}
  .h8-search{padding:8px}
  .h8-search input{font-size:1.05rem;padding:14px 8px}
  .h8-search button{min-height:54px;padding:0 30px;font-size:1rem}
  .h8-quick{gap:10px;margin-top:20px}
  .h8-quick a{font-size:.88rem;padding:8px 16px}
}

/* ---------- Shared section frame ---------- */
.h8-section{padding:30px 16px}
.h8-inner{max-width:1200px;margin:0 auto}
.h8-head{text-align:center;margin:0 auto 18px;max-width:640px}
.h8-head h2{margin:0 0 6px;font-size:1.35rem;font-weight:800;color:var(--text);line-height:1.35}
.h8-head p{margin:0;font-size:.86rem;color:var(--muted);line-height:1.7}
@media (min-width:860px){
  .h8-section{padding:56px 24px}
  .h8-head{margin-bottom:30px}
  .h8-head h2{font-size:2rem}
  .h8-head p{font-size:1rem}
}
.h8-res-section{background:var(--white,#fff);padding-top:26px}

/* ---------- The four key pages (photo cards) ---------- */
.h8-res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.h8-res-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #E6ECF3;border-radius:18px;overflow:hidden;text-decoration:none;color:var(--text);box-shadow:0 1px 2px rgba(15,30,51,.04),0 6px 18px rgba(15,30,51,.06);transition:transform .2s,box-shadow .2s;animation:none}
.h8-res-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(15,30,51,.12)}
.h8-res-photo{position:relative;display:block;aspect-ratio:4/3;background:#DCEAFB;overflow:hidden}
.h8-res-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.h8-res-card:hover .h8-res-photo img{transform:scale(1.05)}
.h8-res-photo::after{content:'';position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(0deg,rgba(4,26,51,.28),transparent);pointer-events:none}
/* Drawn illustration when a page has no photo yet */
.h8-res-photo.is-art{background:radial-gradient(120px 90px at 80% 20%,rgba(255,255,255,.35),transparent 70%),linear-gradient(135deg,#1268A8,#063B70)}
.h8-res-photo.is-art::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:14px 14px}
.h8-res-photo.art-factories{background:radial-gradient(120px 90px at 20% 20%,rgba(255,255,255,.3),transparent 70%),linear-gradient(135deg,#0E7490,#0B4F93)}
.h8-res-photo.art-guide{background:radial-gradient(120px 90px at 80% 80%,rgba(255,255,255,.3),transparent 70%),linear-gradient(135deg,#B45309,#7C2D12)}
.h8-res-photo.art-groupbuying{background:radial-gradient(120px 90px at 70% 30%,rgba(255,255,255,.3),transparent 70%),linear-gradient(135deg,#0E7490,#164E63)} /* V11.8 */
.h8-res-photo.art-exhibitions{background:radial-gradient(120px 90px at 20% 80%,rgba(255,255,255,.3),transparent 70%),linear-gradient(135deg,#4338CA,#1E3A8A)}
.h8-res-ico{position:relative;margin:-22px 12px 0;width:44px;height:44px;border-radius:13px;background:#fff;color:var(--primary,#063B70);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(6,32,64,.18);align-self:flex-start}
.h8-res-ico svg{width:22px;height:22px}
.h8-res-body{display:flex;flex-direction:column;gap:4px;padding:8px 12px 44px;min-width:0}
.h8-res-body strong{font-size:.95rem;font-weight:800;line-height:1.35}
.h8-res-body small{font-size:.76rem;color:var(--muted);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.h8-res-go{position:absolute;bottom:10px;inset-inline-start:12px;width:30px;height:30px;border-radius:50%;background:var(--primary,#063B70);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s}
.h8-res-go svg{width:15px;height:15px}
html[dir="ltr"] .h8-res-go svg{transform:scaleX(-1)}
.h8-res-card:hover .h8-res-go{transform:translateX(-3px)}
html[dir="ltr"] .h8-res-card:hover .h8-res-go{transform:translateX(3px)}
@media (min-width:860px){
  .h8-res-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .h8-res-photo{aspect-ratio:16/11}
  .h8-res-ico{width:50px;height:50px;margin:-25px 16px 0}
  .h8-res-body{padding:10px 16px 54px;gap:6px}
  .h8-res-body strong{font-size:1.08rem}
  .h8-res-body small{font-size:.86rem}
  .h8-res-go{width:36px;height:36px;bottom:14px;inset-inline-start:16px}
}

/* ---------- Services (2×2 on phones) ---------- */
.h8-svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.h8-svc-card{display:flex;align-items:center;gap:10px;padding:12px;background:#fff;border:1px solid #E6ECF3;border-radius:16px;text-decoration:none;color:var(--text);transition:transform .2s,box-shadow .2s,border-color .2s;min-width:0}
.h8-svc-card:hover{transform:translateY(-2px);border-color:#C7DCF3;box-shadow:0 12px 28px rgba(15,30,51,.08)}
.h8-svc-ico{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:#EAF2FC;color:var(--primary,#063B70)}
.h8-svc-ico svg{width:21px;height:21px}
.h8-svc-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.h8-svc-text strong{font-size:.86rem;font-weight:800;line-height:1.35}
.h8-svc-text small{font-size:.72rem;color:var(--muted);line-height:1.5}
@media (min-width:860px){
  .h8-svc-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .h8-svc-card{flex-direction:column;text-align:center;padding:26px 18px;gap:12px}
  .h8-svc-ico{width:62px;height:62px}
  .h8-svc-ico svg{width:28px;height:28px}
  .h8-svc-text strong{font-size:1.05rem}
  .h8-svc-text small{font-size:.86rem}
}

/* ---------- "Have a specific product?" banner ---------- */
.h8-offer-section{padding-top:6px}
.h8-offer{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:22px 18px;border-radius:20px;text-decoration:none;color:#fff;
  background:radial-gradient(400px 200px at 0% 100%,rgba(125,211,252,.25),transparent 70%),linear-gradient(135deg,#041A33,#063B70 55%,#0B4F93);box-shadow:0 18px 40px rgba(6,32,64,.22)}
.h8-offer.has-photo{background:linear-gradient(90deg,rgba(4,26,51,.92) 0%,rgba(6,59,112,.78) 55%,rgba(6,59,112,.35) 100%),var(--h8-offer-photo) center/cover no-repeat}
html[dir="ltr"] .h8-offer.has-photo{background:linear-gradient(270deg,rgba(4,26,51,.92) 0%,rgba(6,59,112,.78) 55%,rgba(6,59,112,.35) 100%),var(--h8-offer-photo) center/cover no-repeat}
.h8-offer-art{position:absolute;inset-inline-end:-30px;bottom:-14px;width:230px;height:auto;opacity:.32;pointer-events:none}
.h8-offer-text{position:relative;display:flex;flex-direction:column;gap:6px}
.h8-offer-text strong{font-size:1.25rem;font-weight:800;line-height:1.35}
.h8-offer-text small{font-size:.86rem;line-height:1.7;color:rgba(255,255,255,.85);max-width:460px}
.h8-offer-btn{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--primary,#063B70);font-weight:800;font-size:.92rem;padding:12px 20px;border-radius:13px;box-shadow:0 10px 24px rgba(3,17,34,.25);transition:transform .2s}
.h8-offer-btn svg{width:16px;height:16px}
html[dir="ltr"] .h8-offer-btn svg{transform:scaleX(-1)}
.h8-offer:hover .h8-offer-btn{transform:translateY(-2px)}
@media (min-width:860px){
  .h8-offer{flex-direction:row;align-items:center;justify-content:space-between;padding:34px 44px;border-radius:26px;min-height:150px}
  .h8-offer-text strong{font-size:1.75rem}
  .h8-offer-text small{font-size:1rem}
  .h8-offer-btn{align-self:center;font-size:1rem;padding:15px 28px;flex-shrink:0}
  .h8-offer-art{width:360px;inset-inline-end:auto;inset-inline-start:34%;bottom:-20px;opacity:.3}
}

/* ---------- Numbers: a light strip next to the final call ---------- */
.h8-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:0 0 18px;border-radius:18px;overflow:hidden;background:#E6ECF3;border:1px solid #E6ECF3}
.h8-stat{display:flex;align-items:center;gap:10px;padding:14px 12px;background:#fff;min-width:0}
.h8-stat-ico{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:#EAF2FC;color:var(--primary,#063B70)}
.h8-stat-ico svg{width:18px;height:18px}
.h8-stat>span:last-child{display:flex;flex-direction:column;min-width:0}
.h8-stat b{font-size:1.15rem;font-weight:800;color:var(--primary,#063B70);line-height:1.2;text-align:start}
.h8-stat small{font-size:.74rem;color:var(--muted);line-height:1.4}
@media (min-width:860px){
  .h8-stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:26px}
  .h8-stat{padding:20px;justify-content:center}
  .h8-stat b{font-size:1.5rem}
  .h8-stat small{font-size:.84rem}
}

@media (prefers-reduced-motion:reduce){
  .h8-res-card,.h8-res-photo img,.h8-svc-card,.h8-offer-btn{transition:none}
}

/* Big faint drawing of the page's icon when it has no photo yet */
.h8-res-art{display:none}
.h8-res-photo.is-art .h8-res-art{display:block;position:absolute;width:58%;height:auto;inset-inline-end:-6%;bottom:-10%;color:#fff;opacity:.22;transform:rotate(-8deg)}
@media (max-width:420px){
  .h8-quick{gap:6px}
  .h8-quick a{font-size:.76rem;padding:6px 10px;gap:5px}
  .h8-quick svg{width:13px;height:13px}
}
/* The live results under the main search must float over the next section. */
.h8-hero{overflow:visible;z-index:5}
.h8-hero-art{overflow:hidden}
.h8-search.open{border-radius:18px}

/* V8.2b — the live results float over EVERYTHING while open (header, bottom bar, WhatsApp button). */
.h8-hero.h8-open{z-index:1300}
.h8-search-results{z-index:1301;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* First line: ask Keerki to find it (opens the request form with the words) */
.h8-ask{display:flex;align-items:center;gap:12px;margin:2px 2px 6px;padding:12px;border-radius:12px;background:linear-gradient(135deg,#EAF2FC,#F4F8FD);border:1px solid #D3E4F8;text-decoration:none;color:var(--text)}
.h8-ask:hover{border-color:#9CC3EC;background:#E3EEFB}
.h8-ask-ico{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0B4F93,#063B70);color:#fff}
.h8-ask-ico svg{width:18px;height:18px}
.h8-ask>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.h8-ask strong{font-size:.92rem;font-weight:800;color:var(--primary,#063B70);overflow-wrap:anywhere}
.h8-ask small{font-size:.76rem;color:var(--muted);line-height:1.5}

/* V8.2b — the owner's favourite hero look is back (V7): deep blue with light glows, a dot grid,
   a slowly drifting glow and the floating ship beside the text on computers. */
.h8-hero{background:radial-gradient(900px 420px at 88% -10%,rgba(91,180,255,.38),transparent 60%),radial-gradient(800px 380px at -5% 115%,rgba(18,104,168,.65),transparent 60%),linear-gradient(135deg,#041A33 0%,#063B70 52%,#0B4F93 100%)}
.h8-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);pointer-events:none}
.h8-hero:not(.has-photo)::after{content:'';position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(125,211,252,.18),transparent 65%);top:-180px;inset-inline-start:-160px;pointer-events:none;animation:h8Float 14s ease-in-out infinite}
@keyframes h8Float{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes h8Bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.h8-ship{display:none}
@media (min-width:860px){
  .h8-hero-inner{max-width:1200px;display:flex;align-items:center;gap:48px;text-align:start}
  .h8-hero-text{flex:1.15;min-width:0}
  .h8-hero.has-photo .h8-hero-inner{max-width:760px;display:block;text-align:center}
  .h8-hero:not(.has-photo) .h8-sub{margin-inline:0}
  .h8-hero:not(.has-photo) .h8-search{margin:0}
  .h8-hero:not(.has-photo) .h8-quick{justify-content:flex-start}
  .h8-ship{display:flex;flex:.85;justify-content:center}
  .h8-ship svg{width:100%;max-width:400px;height:auto;filter:drop-shadow(0 30px 40px rgba(3,17,34,.35))}
}
@media (prefers-reduced-motion:reduce){ .h8-hero::after,.h8-ship svg{animation:none!important} }

/* ===== V13.6 — hero motion «version 3» (owner approved from Docs/mockups-V13/home-motion-b3.html):
   the ship assembles once (hull → 4 containers → bridge → crane → hook, 2.3 s), then floats; the three waves drift
   slowly in opposite directions; the bridge lamp blinks once every 6 s. The headline's two lines and the sentence
   rise in softly one after another. Nothing bounces, nothing flashes; «reduce motion» shows everything at once. ===== */
.h8-ship svg{overflow:hidden}
.h8m-boat{animation:h8Bob 6s ease-in-out 2.2s infinite;transform-origin:200px 220px}
.h8m-hull{opacity:0;transform:translateY(30px);animation:h8mIn 1s cubic-bezier(.2,.7,.2,1) .25s forwards}
.h8m-c{opacity:0;transform:translateY(-40px);animation:h8mIn .8s cubic-bezier(.2,.7,.2,1) forwards}
.h8m-c1{animation-delay:.9s}.h8m-c2{animation-delay:1.05s}.h8m-c3{animation-delay:1.2s}.h8m-c4{animation-delay:1.35s}
.h8m-bridge{opacity:0;transform:translateY(-20px);animation:h8mIn .7s cubic-bezier(.2,.7,.2,1) 1.5s forwards}
.h8m-crane{stroke-dasharray:130;stroke-dashoffset:130;animation:h8mDraw 1s cubic-bezier(.65,0,.2,1) 1.6s forwards}
.h8m-hook{opacity:0;animation:h8mIn .4s ease 2.3s forwards}
.h8m-lamp{animation:h8mLamp 6s ease-in-out 2.6s infinite}
.h8m-wv{opacity:0;animation:h8mFade 1.2s ease .2s forwards}
.h8m-wv1 path{animation:h8mDrift 7s linear infinite}
.h8m-wv2 path{animation:h8mDrift 9s linear infinite reverse}
.h8m-wv3 path{animation:h8mDrift 12s linear infinite}
@keyframes h8mIn{to{opacity:1;transform:none}}
@keyframes h8mDraw{to{stroke-dashoffset:0}}
@keyframes h8mFade{to{opacity:1}}
@keyframes h8mLamp{0%,92%,100%{opacity:.95}94%{opacity:.25}96%{opacity:.95}}
@keyframes h8mDrift{from{transform:translateX(0)}to{transform:translateX(-80px)}}
.h8-hero .h8-title>span,.h8-hero .h8-sub{opacity:0;transform:translateY(16px);animation:h8mIn .7s cubic-bezier(.2,.7,.2,1) forwards}
.h8-hero .h8-title>span:first-child{animation-delay:.35s}.h8-hero .h8-title>span.h8-accent{animation-delay:.6s}.h8-hero .h8-sub{animation-delay:.9s}
/* phones: the ship is small, centred, above the headline (it used to be hidden on phones) */
@media (max-width:859px){
  .h8-hero:not(.has-photo) .h8-hero-inner{display:flex;flex-direction:column}
  .h8-hero:not(.has-photo) .h8-ship{display:flex;order:-1;justify-content:center;margin:-6px auto 6px;width:220px;max-width:60vw}
  .h8-hero:not(.has-photo) .h8-ship svg{width:100%;height:auto;filter:drop-shadow(0 18px 24px rgba(3,17,34,.35))}
}
@media (prefers-reduced-motion:reduce){
  .h8m-boat,.h8m-hull,.h8m-c,.h8m-bridge,.h8m-crane,.h8m-hook,.h8m-lamp,.h8m-wv,.h8m-wv path,.h8-hero .h8-title>span,.h8-hero .h8-sub{animation:none!important;opacity:1!important;transform:none!important}
  .h8m-crane{stroke-dashoffset:0!important}.h8m-wv1 path{opacity:.25}.h8m-wv2 path{opacity:.15}.h8m-wv3 path{opacity:.08}
}
/* Same overlay as before (V7) when the owner uploads a hero photo. */
.h8-hero.has-photo{background:linear-gradient(160deg,rgba(6,59,112,.90),rgba(18,104,168,.72)),var(--h8-photo) center/cover no-repeat}

/* V8.2c — numbers under the banner, each one a centred column: icon, big number, label. */
.h8-stats-section{padding-top:4px}
.h8-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;background:#fff;border:1px solid #E6ECF3;border-radius:20px;box-shadow:0 1px 2px rgba(15,30,51,.04),0 8px 22px rgba(15,30,51,.06);margin:0}
.h8-stat{flex-direction:column;justify-content:center;text-align:center;gap:6px;padding:18px 10px;background:transparent}
.h8-stat:nth-child(odd){border-inline-end:1px solid #EEF2F7}
.h8-stat:nth-child(-n+2){border-bottom:1px solid #EEF2F7}
.h8-stat-ico{width:42px;height:42px;background:linear-gradient(135deg,#EAF2FC,#DCEAFB)}
.h8-stat-ico svg{width:20px;height:20px}
.h8-stat>span:last-child{align-items:center;gap:2px}
.h8-stat b{font-size:1.45rem;text-align:center;background:linear-gradient(135deg,#063B70,#1268A8);-webkit-background-clip:text;background-clip:text;color:transparent}
.h8-stat small{font-size:.78rem}
@media (min-width:860px){
  .h8-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .h8-stat{padding:26px 16px}
  .h8-stat:nth-child(-n+2){border-bottom:0}
  .h8-stat:nth-child(odd){border-inline-end:0}
  .h8-stat:not(:last-child){border-inline-end:1px solid #EEF2F7}
  .h8-stat-ico{width:50px;height:50px}
  .h8-stat b{font-size:1.9rem}
  .h8-stat small{font-size:.88rem}
}
/* Computers keep the row look the owner liked (icon beside the number); the stacked columns are for phones only. */
@media (min-width:860px){
  .h8-stats{gap:2px;background:#E6ECF3;box-shadow:none}
  .h8-stat{flex-direction:row;text-align:start;gap:10px;padding:20px;background:#fff;justify-content:center;border:0!important}
  .h8-stat>span:last-child{align-items:flex-start}
  .h8-stat b{font-size:1.5rem;text-align:start}
  .h8-stat-ico{width:36px;height:36px}
  .h8-stat-ico svg{width:18px;height:18px}
  .h8-stat small{font-size:.84rem}
}

/* ===== V12.1: the page cards follow the OWNER's choice (Website Content → Homepage → «بطاقات الصفحات»,
   admin/includes/layout-prefs.php). The grid carries h8-n<count> h8-d-<computer layout> h8-p-<phone layout>;
   «auto» is resolved in PHP (3 cards → first bigger; 4 → one equal row on computers / 2×2 on phones).
   Replaces the V9.0 .h8-res-hero rules (whose 2fr 1fr 1fr pushed a 4th card onto its own huge row). ===== */
.h8-res-trust{align-self:flex-start;font-style:normal;font-size:.74rem;font-weight:800;color:#065F46;background:#ECFDF5;border:1px solid #A7F3D0;border-radius:999px;padding:3px 10px;margin-top:2px}
.h8-res-grid>.h8-res-card{min-width:0}

/* ---- phones & small tablets ---- */
@media (max-width:859px){
  .h8-res-card .h8-res-body strong{font-size:.92rem}
  .h8-p-one{grid-template-columns:minmax(0,1fr)}
  /* big first card (big1) */
  .h8-p-big1>.h8-res-card:first-child{grid-column:1 / -1}
  .h8-p-big1>.h8-res-card:first-child .h8-res-photo{aspect-ratio:16/9}
  .h8-p-big1>.h8-res-card:first-child .h8-res-ico{width:52px;height:52px;margin:-26px 14px 0;border-radius:15px}
  .h8-p-big1>.h8-res-card:first-child .h8-res-ico svg{width:26px;height:26px}
  .h8-p-big1>.h8-res-card:first-child .h8-res-body{padding:10px 14px 52px;gap:6px}
  .h8-p-big1>.h8-res-card:first-child .h8-res-body strong{font-size:1.15rem}
  .h8-p-big1>.h8-res-card:first-child .h8-res-body small{font-size:.84rem;-webkit-line-clamp:3}
  .h8-p-big1>.h8-res-card:first-child .h8-res-go{width:38px;height:38px;bottom:12px;inset-inline-start:14px}
  /* a lonely last card takes the whole row (as a slim card) instead of leaving a hole */
  .h8-p-two>.h8-res-card:last-child:nth-child(odd),
  .h8-p-big1>.h8-res-card:last-child:nth-child(even):not(:first-child){grid-column:1 / -1}
}

/* ---- the slim (horizontal) card: picture beside the text ---- */
@media (max-width:859px){
  .h8-p-one>.h8-res-card,
  .h8-p-two>.h8-res-card:last-child:nth-child(odd),
  .h8-p-big1>.h8-res-card:last-child:nth-child(even):not(:first-child){flex-direction:row;align-items:stretch;min-height:118px}
  .h8-p-one>.h8-res-card .h8-res-photo,
  .h8-p-two>.h8-res-card:last-child:nth-child(odd) .h8-res-photo,
  .h8-p-big1>.h8-res-card:last-child:nth-child(even):not(:first-child) .h8-res-photo{flex:0 0 36%;aspect-ratio:auto}
  .h8-p-one>.h8-res-card .h8-res-photo img,
  .h8-p-two>.h8-res-card:last-child:nth-child(odd) .h8-res-photo img,
  .h8-p-big1>.h8-res-card:last-child:nth-child(even):not(:first-child) .h8-res-photo img{position:absolute;inset:0}
  .h8-p-one>.h8-res-card .h8-res-ico,
  .h8-p-two>.h8-res-card:last-child:nth-child(odd) .h8-res-ico,
  .h8-p-big1>.h8-res-card:last-child:nth-child(even):not(:first-child) .h8-res-ico{display:none}
  .h8-p-one>.h8-res-card .h8-res-body,
  .h8-p-two>.h8-res-card:last-child:nth-child(odd) .h8-res-body,
  .h8-p-big1>.h8-res-card:last-child:nth-child(even):not(:first-child) .h8-res-body{flex:1 1 auto;justify-content:center;padding:12px 14px 46px}
  .h8-p-one>.h8-res-card .h8-res-go,
  .h8-p-two>.h8-res-card:last-child:nth-child(odd) .h8-res-go,
  .h8-p-big1>.h8-res-card:last-child:nth-child(even):not(:first-child) .h8-res-go{inset-inline-start:auto;inset-inline-end:12px}
}

/* ---- computers ---- */
@media (min-width:860px){
  .h8-res-grid{align-items:stretch}
  /* one equal row */
  .h8-d-row.h8-n1{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}
  .h8-d-row.h8-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h8-d-row.h8-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .h8-d-row.h8-n4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .h8-d-row.h8-n4 .h8-res-photo{aspect-ratio:4/3}
  .h8-d-row .h8-res-body small,.h8-d-big .h8-res-body small{-webkit-line-clamp:3}
  /* the first card wider, the rest beside it in the same row */
  .h8-d-big.h8-n3{grid-template-columns:2fr 1fr 1fr}
  .h8-d-big.h8-n4{grid-template-columns:1.7fr repeat(3,minmax(0,1fr))}
  /* big first + the rest as a column of slim cards beside it */
  .h8-d-mosaic{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .h8-d-mosaic.h8-n3>.h8-res-card:first-child{grid-row:span 2}
  .h8-d-mosaic.h8-n4>.h8-res-card:first-child{grid-row:span 3}
  /* two per row (2×2) — slim cards so the square stays compact */
  .h8-d-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h8-d-grid2>.h8-res-card:last-child:nth-child(odd){grid-column:1 / -1}

  /* the big card (big / mosaic): the picture fills the height, bigger title */
  .h8-d-big>.h8-res-card:first-child .h8-res-photo,
  .h8-d-mosaic>.h8-res-card:first-child .h8-res-photo{aspect-ratio:auto;flex:1 1 0;min-height:220px}
  .h8-d-big>.h8-res-card:first-child .h8-res-photo img,
  .h8-d-mosaic>.h8-res-card:first-child .h8-res-photo img{position:absolute;inset:0} /* fills the space; never makes the row taller */
  .h8-d-big>.h8-res-card:first-child .h8-res-ico,
  .h8-d-mosaic>.h8-res-card:first-child .h8-res-ico{width:56px;height:56px;margin:-28px 18px 0;border-radius:16px}
  .h8-d-big>.h8-res-card:first-child .h8-res-ico svg,
  .h8-d-mosaic>.h8-res-card:first-child .h8-res-ico svg{width:27px;height:27px}
  .h8-d-big>.h8-res-card:first-child .h8-res-body,
  .h8-d-mosaic>.h8-res-card:first-child .h8-res-body{padding:12px 18px 60px}
  .h8-d-big>.h8-res-card:first-child .h8-res-body strong,
  .h8-d-mosaic>.h8-res-card:first-child .h8-res-body strong{font-size:1.3rem}
  .h8-d-big>.h8-res-card:first-child .h8-res-body small,
  .h8-d-mosaic>.h8-res-card:first-child .h8-res-body small{font-size:.92rem;-webkit-line-clamp:3}
  .h8-d-big>.h8-res-card:first-child .h8-res-go,
  .h8-d-mosaic>.h8-res-card:first-child .h8-res-go{width:40px;height:40px;bottom:16px;inset-inline-start:18px}

  /* slim (horizontal) cards on computers: the mosaic column and the 2×2 grid */
  .h8-d-mosaic>.h8-res-card:not(:first-child),
  .h8-d-grid2>.h8-res-card{flex-direction:row;align-items:stretch;min-height:150px}
  .h8-d-mosaic>.h8-res-card:not(:first-child) .h8-res-photo,
  .h8-d-grid2>.h8-res-card .h8-res-photo{flex:0 0 40%;aspect-ratio:auto}
  .h8-d-mosaic>.h8-res-card:not(:first-child) .h8-res-photo img,
  .h8-d-grid2>.h8-res-card .h8-res-photo img{position:absolute;inset:0}
  .h8-d-mosaic>.h8-res-card:not(:first-child) .h8-res-ico,
  .h8-d-grid2>.h8-res-card .h8-res-ico{display:none}
  .h8-d-mosaic>.h8-res-card:not(:first-child) .h8-res-body,
  .h8-d-grid2>.h8-res-card .h8-res-body{flex:1 1 auto;justify-content:center;padding:16px 18px 56px}
  .h8-d-mosaic>.h8-res-card:not(:first-child) .h8-res-go,
  .h8-d-grid2>.h8-res-card .h8-res-go{inset-inline-start:auto;inset-inline-end:16px}
  .h8-d-grid2>.h8-res-card{min-height:190px}
}

/* ===== V10.3: logistics section — weekly shipping rates + car with driver ===== */
.h8-logi{background:linear-gradient(180deg,#f7f9fc 0%,#eef3f9 100%)}
.h8-logi-head{text-align:center;margin-bottom:22px}
.h8-logi-kicker{display:inline-block;font-size:.8rem;font-weight:800;color:#03609F;background:#e7f1fb;border-radius:999px;padding:5px 12px}
.h8-logi-head h2{margin:10px 0 0;font-size:clamp(1.35rem,4.6vw,2rem);color:#0f2440;line-height:1.35}
.h8-logi-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:900px){.h8-logi-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.h8-logi-card{position:relative;display:flex;flex-direction:column;gap:8px;border-radius:24px;overflow:hidden;text-decoration:none;color:#0f2440;background:#fff;border:1px solid #e1e8f1;box-shadow:0 14px 34px rgba(7,45,82,.08);transition:transform .2s,box-shadow .2s}
.h8-logi-card:hover{transform:translateY(-3px);box-shadow:0 22px 44px rgba(7,45,82,.14)}
.h8-logi-ship{padding:22px 20px}
.h8-logi-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.h8-logi-ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#03609F,#00356D);color:#fff;flex:none}
.h8-logi-ico-light{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25)}
.h8-logi-live{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:800;color:#15803d}
.h8-logi-live i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.h8-logi-card strong{font-size:1.25rem;line-height:1.4;margin-top:6px}
.h8-logi-text{font-size:.92rem;line-height:1.75;color:#5b6b80}
.h8-logi-rates{display:grid;gap:8px;margin:8px 0 4px}
.h8-logi-rate{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:14px;background:#f4f7fb}
.h8-logi-route{display:flex;flex-direction:column;font-weight:700;font-size:.9rem;min-width:0}
.h8-logi-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h8-logi-route em{font-style:normal;color:#03609F;margin:0 2px}
html[dir="rtl"] .h8-logi-route em{display:inline-block;transform:scaleX(-1)}
.h8-logi-route small{font-weight:500;font-size:.74rem;color:#6b7b90}
.h8-logi-rate b{font-size:1.15rem;color:#00356D;white-space:nowrap}
.h8-blur{filter:blur(5px);user-select:none}
.h8-logi-btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:auto;padding:11px 18px;border-radius:999px;background:linear-gradient(135deg,#03609F,#00356D);color:#fff;font-weight:800;font-size:.9rem}
.h8-logi-car{background:#00356D;color:#fff;min-height:360px;isolation:isolate}
.h8-logi-photo{position:absolute;inset:0;z-index:-2}
.h8-logi-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 80%}
.h8-logi-car::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,38,79,.1) 0%,rgba(0,38,79,.55) 45%,rgba(0,38,79,.95) 100%)}
.h8-logi-carbody{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding:22px 20px}
.h8-logi-car .h8-logi-text{color:rgba(255,255,255,.85)}
.h8-logi-from{font-size:.86rem;font-weight:700;color:#ffe2a8}
.h8-logi-btn-light{background:#fff;color:#00356D;margin-top:6px}

/* the bottom section is now shipping only */
.h8-logi-grid{grid-template-columns:minmax(0,1fr)!important}
@media(min-width:900px){.h8-logi-ship .h8-logi-rates{grid-template-columns:repeat(3,minmax(0,1fr))}.h8-logi-ship{padding:28px}}

/* ===== V10.3.1 (owner's reference): services as one open row + one CTA; car as a full-width feature ===== */
.h8-svc-section{background:#F7F9FC}
.h8-svc-grid{gap:0;border-top:1px solid #E6ECF3}
.h8-svc-card{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:20px 10px 18px;background:none;border:0;border-bottom:1px solid #E6ECF3;border-radius:0;box-shadow:none}
.h8-svc-card:nth-child(odd){border-inline-end:1px solid #E6ECF3}
.h8-svc-card:hover{transform:none;box-shadow:none;background:rgba(3,96,159,.035)}
.h8-svc-card:hover strong{color:#03609F}
.h8-svc-ico{width:52px;height:52px}
.h8-svc-go{display:inline-flex;color:#03609F;transition:transform .2s}
.h8-svc-go svg{width:18px;height:18px}
html[dir="ltr"] .h8-svc-go svg{transform:scaleX(-1)}
.h8-svc-card:hover .h8-svc-go{transform:translateX(-4px)}
html[dir="ltr"] .h8-svc-card:hover .h8-svc-go{transform:translateX(4px)}
@media(min-width:768px){
  .h8-svc-grid{border-top:0}
  .h8-svc-card{border-bottom:0;padding:10px 22px 6px;border-inline-end:1px solid #E6ECF3}
  .h8-svc-card:nth-child(odd){border-inline-end:1px solid #E6ECF3}
  .h8-svc-card:last-child{border-inline-end:0}
  .h8-svc-ico{width:66px;height:66px}
}
.h8-svc-cta-wrap{display:flex;justify-content:center;margin-top:26px}
.h8-svc-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;padding:14px 26px;border-radius:999px;background:linear-gradient(135deg,#03609F,#00356D);color:#fff;font-weight:800;font-size:.95rem;text-decoration:none;text-align:center;line-height:1.5;box-shadow:0 12px 26px rgba(0,53,109,.22);transition:transform .2s,box-shadow .2s}
.h8-svc-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(0,53,109,.3)}
.h8-svc-cta svg{width:19px;height:19px;flex-shrink:0}
html[dir="ltr"] .h8-svc-cta-arrow{transform:scaleX(-1)}
@media(min-width:768px){.h8-svc-cta-wrap{margin-top:34px}.h8-svc-cta{font-size:1.02rem;padding:16px 34px}}

/* car with driver — full-width feature band */
.h8-cbx{position:relative;overflow:hidden;background:linear-gradient(180deg,#EEF5FC 0%,#E3EEF9 100%);border-top:1px solid #E1EAF4;border-bottom:1px solid #E1EAF4}
.h8-cbx-photo{position:relative;aspect-ratio:16/9;overflow:hidden}
.h8-cbx-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 60%}
.h8-cbx-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(180deg,rgba(227,238,249,0) 0%,#E7F0FA 100%)}
.h8-cbx-inner{position:relative;max-width:1200px;margin:0 auto;padding:6px 16px 34px}
.h8-cbx-text{display:flex;flex-direction:column;gap:12px}
.h8-cbx-kicker{font-size:.84rem;font-weight:800;color:#03609F}
.h8-cbx-kicker em{font-style:normal;color:#b45309}
.h8-cbx h2{margin:0;font-size:clamp(1.6rem,6vw,2.6rem);line-height:1.25;font-weight:800;color:#00356D}
.h8-cbx p{margin:0;font-size:1rem;line-height:1.85;color:#2c4a6b;max-width:560px}
.h8-cbx-uses{list-style:none;margin:6px 0 4px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.h8-cbx-uses li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:.76rem;font-weight:700;color:#0f2440;padding:2px 4px}
.h8-cbx-uses li+li{border-inline-start:1px solid #C9D9EA}
.h8-cbx-uses svg{color:#00356D}
.h8-cbx-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:6px}
.h8-cbx-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:12px;background:#00356D;color:#fff;font-weight:800;font-size:1rem;text-decoration:none;box-shadow:0 12px 26px rgba(0,53,109,.25);transition:transform .2s,background .2s}
.h8-cbx-btn:hover{transform:translateY(-2px);background:#03609F}
.h8-cbx-from{font-size:.95rem;color:#4a6584}
.h8-cbx-from b{font-size:1.5rem;color:#00356D}
@media(min-width:900px){
  .h8-cbx{min-height:470px;display:flex;align-items:center}
  .h8-cbx-photo{position:absolute;top:0;bottom:0;inset-inline-end:0;width:54%;aspect-ratio:auto}
  .h8-cbx-photo img{object-position:center 62%}
  .h8-cbx-photo::after{inset:0 auto 0 auto;inset-inline-start:0;width:20%;height:auto;background:linear-gradient(90deg,rgba(231,240,250,0) 0%,#E9F1FA 100%)}
  html[dir="ltr"] .h8-cbx-photo::after{background:linear-gradient(270deg,rgba(231,240,250,0) 0%,#E9F1FA 100%)}
  .h8-cbx-inner{width:100%;padding:56px 24px}
  .h8-cbx-text{width:48%;gap:14px}
  .h8-cbx-uses{max-width:520px}
  .h8-cbx-uses li{font-size:.84rem}
}
/* balanced rhythm: the band carries its own padding; the section after it starts like every other one */
.h8-cbx + .h8-section{padding-top:56px}
@media(max-width:767px){.h8-cbx + .h8-section{padding-top:30px}}
@media(max-width:767px){
  .h8-svc-cta{font-size:.84rem;padding:13px 18px;gap:8px}
  .h8-cbx-uses{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  .h8-cbx-uses li{flex-direction:row;justify-content:center;font-size:.82rem}
  .h8-cbx-uses li+li{border-inline-start:0}
  .h8-cbx-uses li:nth-child(even){border-inline-start:1px solid #C9D9EA}
}

/* ===== V10.4 — hero «one promise, one button» (round 2 — owner: organized and steady) =====
   One column of ONE width (--h8-col): headline, line, two buttons of equal height, the search.
   The three numbers sit in a quiet strip along the bottom of the hero. */
.h8-hero{--h8-col:560px;padding-bottom:0!important}
.h8-hero .h8-hero-text{max-width:var(--h8-col);margin-inline:auto}
.h8-offer-sub{margin:0 auto 22px;font-weight:600;color:rgba(255,255,255,.9)}
.h8-offer-sub b{color:#8AC2FF;font-weight:800}
.h8-cta-row{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
.h8-cta,.h8-cta-wa{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;border-radius:14px;padding:0 18px;text-decoration:none;font-weight:800;font-size:1rem;transition:transform .15s,box-shadow .15s,background .15s}
.h8-cta{background:#fff;color:#00356D;box-shadow:0 12px 30px rgba(3,17,34,.32)}
.h8-cta:hover{transform:translateY(-1px);box-shadow:0 16px 36px rgba(3,17,34,.4)}
.h8-cta svg{width:22px;height:22px;color:#03609F;flex-shrink:0}
.h8-cta-wa{color:#fff;border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.06);font-weight:700}
.h8-cta-wa:hover{background:rgba(37,211,102,.16);border-color:#25D366}
.h8-cta-wa svg{width:20px;height:20px;color:#4ADE80;flex-shrink:0}
.h8-search.h8-search-2nd{width:100%;max-width:none;margin:12px 0 0;border-radius:14px;padding:5px;box-shadow:0 10px 26px rgba(3,17,34,.25)}
.h8-search.h8-search-2nd input{padding:9px 6px;font-size:15px}
.h8-search.h8-search-2nd button{min-height:44px;border-radius:10px;padding:0 18px;font-size:.9rem}
.h8-trust-strip{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:30px -16px 0;border-top:1px solid rgba(255,255,255,.12);background:rgba(3,17,34,.22)}
.h8-trust-strip div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 6px;text-align:center}
.h8-trust-strip div+div{border-inline-start:1px solid rgba(255,255,255,.12)}
.h8-trust-strip b{font-size:1.2rem;font-weight:800;color:#fff;line-height:1.2}
.h8-trust-strip span{font-size:.74rem;color:rgba(255,255,255,.75);line-height:1.4}
@media (min-width:900px){
  .h8-hero{padding-top:84px!important;min-height:0!important;display:block!important}
  .h8-hero .h8-hero-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,var(--h8-col)) minmax(0,1fr);gap:56px;align-items:center;text-align:start}
  .h8-hero .h8-hero-text{margin:0;max-width:none}
  .h8-hero .h8-title{font-size:2.6rem}
  .h8-offer-sub{margin-inline:0}
  .h8-hero .h8-ship{justify-content:center}
  .h8-hero .h8-ship svg{max-width:380px}
  .h8-trust-strip{margin:64px 0 0;padding:0 max(24px,calc((100% - 1120px)/2))}
  .h8-trust-strip div{flex-direction:row;justify-content:center;gap:10px;padding:18px 10px}
  .h8-trust-strip b{font-size:1.45rem}
  .h8-trust-strip span{font-size:.86rem}
}
.h8-hero .h8-search.h8-search-2nd{margin-top:14px!important}
.h8-hero .h8-cta{font-size:1.06rem}
@media (min-width:900px){ .h8-hero .h8-trust-strip{margin:64px -24px 0} }
/* the reply promise sits under the button */
.h8-hero .h8-offer-sub{margin:10px 0 0;font-size:.84rem;font-weight:600;color:rgba(255,255,255,.82);text-align:center}
.h8-hero .h8-hero-text>.h8-sub{margin-bottom:22px}
@media (min-width:900px){ .h8-hero .h8-hero-text>.h8-sub{margin-inline:0} }
.h8-hero{padding-bottom:84px!important}@media (max-width:899px){.h8-hero{padding-bottom:34px!important}}

/* ===== V10.4 round 3 — owner's reference: blue that fades SOFTLY to white at the bottom (no hard edge),
   and one white card sitting on the fade with the request button, the promise and the search,
   leading into «الدليل الشامل في الصين». ===== */
.h8-hero.h8-hero-v3{padding:34px 16px 0!important;
  background:
    radial-gradient(700px 360px at 85% -10%,rgba(91,180,255,.35),transparent 60%),
    linear-gradient(180deg,#041A33 0%,#063B70 34%,#0B4F93 56%,#3F86C6 72%,#B9D7F0 86%,#FFFFFF 100%)}
.h8-hero.h8-hero-v3.has-photo{background:linear-gradient(180deg,rgba(4,26,51,.62) 0%,rgba(6,59,112,.55) 50%,rgba(255,255,255,.4) 82%,#FFFFFF 100%),var(--h8-photo) center top/cover no-repeat}
.h8-hero-v3::after{display:none}
.h8-hero-v3 .h8-hero-text{max-width:620px}
.h8-hero-v3 .h8-sub{margin-bottom:0}
/* the card */
.h8-action{position:relative;z-index:3;max-width:620px;margin:26px auto 0;background:#fff;border-radius:22px;padding:16px;
  box-shadow:0 18px 50px rgba(6,40,80,.18),0 2px 6px rgba(6,40,80,.06);text-align:center}
.h8-action .h8-cta-row{display:block}
.h8-action .h8-cta{display:flex;align-items:center;justify-content:center;gap:12px;min-height:60px;width:100%;border-radius:16px;
  background:linear-gradient(135deg,#0B5FB0 0%,#063B70 100%);color:#fff;font-size:1.12rem;font-weight:800;text-decoration:none;
  box-shadow:0 10px 24px rgba(6,59,112,.32);position:relative;transition:transform .15s,box-shadow .15s}
.h8-action .h8-cta:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(6,59,112,.4)}
.h8-action .h8-cta svg{width:24px;height:24px;color:#fff}
.h8-action .h8-cta .h8-cta-go{position:absolute;inset-inline-end:18px;width:20px;height:20px;opacity:.85}
html[dir=ltr] .h8-action .h8-cta .h8-cta-go{transform:scaleX(-1)}
.h8-action .h8-offer-sub{margin:10px 0 14px;font-size:.86rem;font-weight:600;color:#475569}
.h8-action .h8-offer-sub b{color:#0B5FB0}
.h8-hero .h8-action .h8-search.h8-search-2nd{margin:0!important;max-width:none;border:1.5px solid #DCE6F2;box-shadow:none;border-radius:14px;padding:5px}
.h8-action .h8-search:focus-within{border-color:#0B5FB0;box-shadow:0 0 0 4px rgba(11,95,176,.12)!important}
.h8-action .h8-search button{background:linear-gradient(135deg,#0B5FB0,#063B70)}
/* the guide section starts right under the card, without a jump */
.h8-hero-v3 + .h8-res-section,.h8-hero-v3 ~ #resources{padding-top:34px}
@media (min-width:900px){
  .h8-hero.h8-hero-v3{padding:76px 24px 0!important}
  .h8-hero-v3 .h8-hero-inner{max-width:1120px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;text-align:start}
  .h8-hero-v3 .h8-hero-text{max-width:none;margin:0}
  .h8-hero-v3 .h8-title{font-size:2.9rem}
  .h8-hero-v3 .h8-sub{font-size:1.05rem;margin-inline:0}
  .h8-hero-v3 .h8-ship{display:flex;justify-content:center}
  .h8-hero-v3 .h8-ship svg{max-width:400px}
  .h8-action{max-width:900px;margin-top:8px;padding:18px 20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:6px 16px;align-items:center;text-align:start}
  .h8-action .h8-cta-row{grid-column:1;grid-row:1}
  .h8-action .h8-offer-sub{grid-column:1;grid-row:2;margin:0;text-align:center}
  .h8-hero .h8-action .h8-search.h8-search-2nd{grid-column:2;grid-row:1 / span 2;align-self:start}
  .h8-hero .h8-action .h8-search.h8-search-2nd input{padding:13px 6px}
  .h8-hero .h8-action .h8-search.h8-search-2nd button{min-height:50px}
}

/* ===== V13.6 — phone: the search placeholder glides in a loop so the whole sentence can be read ===== */
.h8-inwrap{flex:1;min-width:0;position:relative;display:flex}
.h8-inwrap input{width:100%}
.h8-ph{display:none}
@media (max-width:859px){
  .h8-inwrap input::placeholder{color:transparent}
  .h8-ph{display:flex;align-items:center;position:absolute;inset:0;overflow:hidden;pointer-events:none;color:#64748B;font-size:1.05rem;padding:0 8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .h8-ph i{display:inline-flex;white-space:nowrap;font-style:normal;will-change:transform;animation:h8phR 16s linear 1.2s infinite}
  .h8-ph i span{padding-inline-end:56px}
  [dir="ltr"] .h8-ph i{animation-name:h8phL}
  .h8-inwrap input:focus ~ .h8-ph,.h8-inwrap input:not(:placeholder-shown) ~ .h8-ph{display:none}
}
@keyframes h8phR{from{transform:translateX(0)}to{transform:translateX(50%)}}
@keyframes h8phL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.h8-ph i{animation:none!important}}