/* ==========================================================================
   EGYVACATIONS — HOME TEMPLATE  ·  assets/css/templates/home.css
   The short video hero, the dynamic search panel with its per-category tabs,
   the autocomplete and the search-results view. Nothing else: every section
   below the hero is in sections.css, because every one of them repeats.
   ========================================================================== */
.evh{
  /* local aliases only — every value comes from tokens.css */
  --navy:var(--ev-navy);
  --orange:var(--ev-orange);
  --charcoal:var(--ev-charcoal);
  --ocean:var(--ev-ocean);
  --sky:var(--ev-sky);
  --wa:var(--ev-whatsapp);
  --ink-70:var(--text-secondary);
  --ink-55:var(--text-muted);
  --ink-45:var(--text-muted);   /* was .45 alpha (2.7:1) and it carries text */
  --line:var(--border);
  --line-soft:var(--border-soft);
  --tint:var(--surface-sunken);
  --r:var(--r-md); --pill:var(--r-pill);
}


/* ---- 2. HERO ---- */
.evh-hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:55vh;display:flex;align-items:center;
  padding:30px 0 100px}
.evh-hero__media{position:absolute;inset:0;z-index:-2;background:var(--navy)}
.evh-hero__media img,
.evh-hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.evh-hero__veil{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(17,72,115,.90) 0%,rgba(17,72,115,.74) 44%,rgba(4,120,179,.36) 78%,rgba(32,158,218,.18) 100%),
    linear-gradient(to top,rgba(17,72,115,.58),transparent 46%)}
.evh-hero__copy{max-width:820px}

.evh-eyebrow{display:flex;align-items:center;gap:13px;margin-bottom:16px;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:0;
  color:rgba(255,255,255,.9)}
.evh-eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--sky);flex:none}

.evh-hero h1{margin:0;text-wrap:balance;max-width:14.652em;color:var(--ev-white);font-size:clamp(2.15rem,4.9vw,3.55rem);line-height:1.06;font-weight:300;letter-spacing:-.02em}
.evh-hero h1>span:where(:not([class])){font-weight:800;letter-spacing:var(--ls-display)}
.evh-hero h1 em{font-style:normal;color:inherit}

.evh-lede{margin:18px 0 0;max-width:600px;font-size:clamp(1rem,1.4vw,1.12rem);
  font-weight:300;line-height:var(--lh-body);color:rgba(255,255,255,.9)}

.evh-vidctl{position:absolute;right:22px;bottom:140px;z-index:3;width:42px;height:42px;
  border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  display:grid;place-items:center;cursor:pointer}
.evh-vidctl svg{width:15px;height:15px;fill:var(--ev-white)}
@media(max-width:700px){.evh-vidctl{display:none}}

.evh-cta{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.evh-cta svg{width:18px;height:18px;flex:none}
@media(max-width:480px){.evh-cta{flex-direction:column;align-items:stretch}}

/* ---- 3. SEARCH PANEL — straddles the hero edge ---- */
.evh-searchwrap{position:relative;z-index:20;margin-top:-100px}
.evh-search{background:var(--ev-white);border:1px solid var(--line-soft);border-radius:var(--r-xl);
  box-shadow:0 20px 54px rgba(17,72,115,.17),0 4px 14px rgba(17,72,115,.08);padding:22px}
.evh-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px}
.evh-tab{min-height:44px;padding:8px 17px;border:0;background:none;border-radius:var(--pill);cursor:pointer;
  font:inherit;font-size:.88rem;font-weight:600;color:var(--ink-55);transition:.2s var(--ease)}
.evh-tab:hover{background:var(--tint);color:var(--navy)}
.evh-tab[aria-selected="true"]{background:var(--navy);color:var(--ev-white)}

.evh-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.evh-dyn{display:contents}
.evh-field{flex:1 1 158px}
.evh-field--q{flex:2.2 1 280px}
.evh-field{position:relative;display:flex;flex-direction:column;gap:7px;min-width:0}
.evh-field > label{font-size:.75rem;font-weight:700;letter-spacing:0;
  color:var(--ink-45);padding-left:2px}
.evh-ctrl{display:flex;align-items:center;gap:11px;height:56px;padding:0 16px;background:var(--ev-white);
  border:1.5px solid var(--line);border-radius:var(--r);transition:.2s var(--ease)}
.evh-ctrl:focus-within{border-color:var(--ocean);box-shadow:var(--control-focus-shadow)}
.evh-ctrl > svg{width:19px;height:19px;color:var(--ocean);flex:none}
.evh-ctrl input,.evh-ctrl select{align-self:stretch;border:0;outline:0;background:none;width:100%;min-width:0;
  font:inherit;font-size:1rem;font-weight:500;color:var(--charcoal)}
.evh-ctrl input::placeholder{color:var(--ink-45);font-weight:400}
.evh-ctrl select{appearance:none;cursor:pointer}
.evh-ctrl .evh-chev{width:14px;height:14px;color:var(--ink-45);flex:none}

.evh-go{height:56px;padding:0 30px;flex:none}
.evh-go svg{width:18px;height:18px;flex:none}

.evh-chip{padding:6px 14px;border:1px solid var(--line);border-radius:var(--pill);background:var(--ev-white);
  cursor:pointer;font:inherit;font-size:.83rem;font-weight:500;color:var(--ink-70);transition:.18s var(--ease)}
.evh-chip:hover{border-color:var(--ev-ocean);color:var(--navy);background:rgba(4,120,179,.1)}

@media(max-width:980px){
  .evh-field--q{flex:1 1 100%}
  .evh-go{flex:1 1 100%;justify-content:center}
}
@media(max-width:620px){
  .evh-field{flex:1 1 100%}
  .evh-searchwrap{margin-top:-64px}
  .evh-search{padding:16px;border-radius:var(--r-lg)}
  /* Phone: the search is the hero's job. One CTA, a two-line lede, and the
     type tabs on one swipeable row, so the field and Search sit on the
     first screen and the first tour card follows straight after. */
  .evh-hero{min-height:0;padding:28px 0 84px}
  .evh-hero h1{font-size:clamp(1.9rem,8.4vw,2.3rem)}
  .evh-lede{margin-top:12px;font-size:.98rem;line-height:1.55;
}
  .evh-cta{margin-top:20px}
    .evh-tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    margin:-4px -16px 12px;padding:4px 16px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .evh-tabs::-webkit-scrollbar{display:none}
  .evh-tab{flex:none;scroll-snap-align:start}
  .evh-dyn .evh-field{flex:1 1 calc(50% - 5px)}   /* the two filters share a row */
  .evh-dyn .evh-ctrl{padding:0 12px;gap:8px}
}

/* ---- 4. AUTOCOMPLETE ---- */
.evh-ac{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:80;display:none;padding:8px;
  background:var(--ev-white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 20px 54px rgba(17,72,115,.18);max-height:390px;overflow-y:auto}
.evh-ac.is-open{display:block}
/* Where the Search button sits on its own row under the field (<= 980px), an absolute list would be painted over that button and
   take its taps. The list then opens IN the flow, directly below the field, and pushes the button down while it is open. */
@media(max-width:980px){
  .evh-ac{position:static;top:auto;margin-top:6px;max-height:min(340px,46vh);box-shadow:0 10px 28px rgba(17,72,115,.14)}
}
.evh-ac__h{padding:10px 12px 6px;font-size:var(--fs-micro);font-weight:700;letter-spacing:0;color:var(--ink-45)}
.evh-ac__i{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r);
  cursor:pointer;transition:background .15s var(--ease)}
.evh-ac__i:hover,.evh-ac__i.is-hl{background:var(--tint)}
.evh-ac__i img{width:54px;height:41px;border-radius:8px;object-fit:cover;flex:none;background:var(--tint)}
.evh-ac__ico{width:40px;height:40px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:rgba(4,120,179,.12);color:var(--ev-ocean)}
.evh-ac__ico svg{width:18px;height:18px}
.evh-ac__t{display:block;font-size:.94rem;font-weight:600;color:var(--navy);line-height:1.3}
.evh-ac__t mark{background:rgba(4,120,179,.18);color:var(--navy);border-radius:3px;padding:0 2px}
.evh-ac__m{display:block;font-size:.78rem;color:var(--ink-45);margin-top:2px}
.evh-ac__empty{padding:26px 16px;text-align:center}
.evh-ac__empty strong{display:block;color:var(--navy);font-size:.98rem}
.evh-ac__empty span{font-size:.86rem;color:var(--ink-55)}

/* ---- 6. SEARCH RESULTS VIEW ---- */
.evh-results[hidden]{display:none}
.evh-rhead{background:var(--navy);color:var(--ev-white);padding:44px 0 58px}
.evh-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;border:0;background:none;
  cursor:pointer;font:inherit;font-size:.9rem;font-weight:600;color:rgba(255,255,255,.75)}
.evh-back:hover{color:var(--ev-ocean)}
.evh-back svg{width:15px;height:15px}
.evh-rhead h1,.evh-rhead h2{margin:0;font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700;letter-spacing:var(--ls-display);color:var(--ev-white)}
.evh-rhead h1 em,.evh-rhead h2 em{font-style:normal;color:inherit}
.evh-rbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.evh-rbar .evh-ctrl{flex:1;min-width:250px}

.evh-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px;align-items:start;padding-block:40px 80px} /* padding-block: the container keeps its side gutter */
.evh-filters{position:sticky;top:110px;background:var(--ev-white);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:22px}
.evh-filters h2{display:flex;align-items:center;justify-content:space-between;margin:0;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:0;color:var(--ink-45)}
.evh-filters h2 button{border:0;background:none;cursor:pointer;font:inherit;font-size:.78rem;
  font-weight:600;letter-spacing:0;text-transform:none;color:var(--ocean)}
.evh-fgrp{padding:20px 0;border-bottom:1px solid var(--line-soft)}
.evh-fgrp:last-child{border-bottom:0;padding-bottom:0}
.evh-fgrp h3{margin:0 0 12px;font-size:.89rem;font-weight:700;color:var(--navy)}
.evh-opt{display:flex;align-items:center;gap:11px;padding:6px 0;cursor:pointer;
  font-size:.9rem;color:var(--ink-70)}
.evh-opt:hover{color:var(--navy)}
.evh-opt input{appearance:none;width:19px;height:19px;flex:none;position:relative;cursor:pointer;
  border:1.6px solid var(--line);border-radius:5px;transition:.16s var(--ease)}
.evh-opt input[type=radio]{border-radius:50%}
.evh-opt input:checked{background:var(--navy);border-color:var(--navy)}
.evh-opt input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:2px solid var(--ev-white);border-top:0;border-left:0;transform:rotate(42deg)}
.evh-opt input[type=radio]:checked::after{left:5px;top:5px;width:7px;height:7px;border:0;
  border-radius:50%;background:var(--ev-white);transform:none}
.evh-opt .n{margin-left:auto;font-size:.78rem;color:var(--ink-45)}
.evh-range input{width:100%;accent-color:var(--ev-ocean)}
.evh-range__val{display:flex;justify-content:space-between;margin-top:6px;font-size:.84rem;
  font-weight:600;color:var(--navy)}

.evh-rtop{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.evh-count{margin:0;font-size:.95rem;color:var(--ink-55)}
.evh-count b{color:var(--navy)}
.evh-sort{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:var(--pill);
  padding:8px 16px;font-size:.88rem;font-weight:600;color:var(--navy)}
.evh-sort select{border:0;background:none;outline:0;font:inherit;font-weight:600;cursor:pointer}
.evh-achips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.evh-achip{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 14px;border-radius:var(--pill);
  background:var(--tint);color:var(--navy);font-size:.83rem;font-weight:600}
.evh-achip button{width:18px;height:18px;border:0;background:none;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:inherit}
.evh-achip button:hover{background:rgba(17,72,115,.14)}
.evh-achip svg{width:11px;height:11px}
.evh-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.evh-none{grid-column:1/-1;text-align:center;padding:70px 24px;border:1.5px dashed var(--line);border-radius:var(--r-lg)}
.evh-none h3{margin:0 0 8px;font-size:1.25rem;color:var(--navy)}
.evh-none p{margin:0 0 18px;color:var(--ink-55)}
.evh-fmob{display:none}
@media(max-width:1040px){
  .evh-layout{grid-template-columns:minmax(0,1fr)}
  .evh-filters{position:static;display:none}
  .evh-filters.is-open{display:block}
  .evh-fmob{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1.5px solid var(--line);
    border-radius:var(--pill);background:var(--ev-white);cursor:pointer;font:inherit;font-size:.88rem;font-weight:600;color:var(--navy)}
  .evh-fmob svg{width:15px;height:15px}
}
@media(max-width:660px){.evh-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- 7. RESULT CARD (matches the tour card language) ---- */
.evh-card{display:flex;flex-direction:column;background:var(--ev-white);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);overflow:hidden;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.evh-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(17,72,115,.10)}
.evh-card__media{position:relative;aspect-ratio:5/3;overflow:hidden;background:var(--tint)}
.evh-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.evh-card:hover .evh-card__media img{transform:scale(1.05)}
.evh-card__badge{position:absolute;top:14px;left:14px;padding:6px 13px;border-radius:8px;
  background:var(--navy);color:var(--ev-white);font-size:var(--fs-micro);font-weight:700;letter-spacing:0}
.evh-card__body{display:flex;flex-direction:column;flex:1;gap:14px;padding:20px}
.evh-card__body h3{margin:0;font-size:1.14rem;line-height:1.32;font-weight:700;color:var(--navy)}
.evh-card__body h3 a:hover{color:var(--ocean)}
.evh-route{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;
  font-size:var(--fs-micro);font-weight:600;letter-spacing:0;color:var(--ink-55)}
.evh-route i{width:14px;height:1.5px;background:var(--line);flex:none}
.evh-tags{display:flex;flex-wrap:wrap;gap:7px}
.evh-tags span{padding:5px 11px;border-radius:8px;background:var(--tint);color:var(--ink-70);
  font-size:var(--fs-micro);font-weight:600;letter-spacing:0}
.evh-cardfoot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft)}
.evh-lab{display:block;margin-bottom:2px;font-size:var(--fs-micro);font-weight:700;letter-spacing:0;color:var(--ink-45)}
.evh-price b{font-size:1.5rem;font-weight:800;color:var(--navy);letter-spacing:var(--ls-display);line-height:1}
.evh-price b span{font-size:.78rem;font-weight:400;color:var(--ink-45);letter-spacing:0}
.evh-dur{text-align:right}
.evh-dur b{font-size:1rem;font-weight:700;color:var(--navy)}
.evh-actions{display:flex;gap:10px;padding:0 20px 20px}
.evh-view{flex:1;height:50px;border-radius:var(--r);background:var(--navy);color:var(--ev-white);
  display:inline-flex;align-items:center;justify-content:center;font-weight:600;transition:.2s var(--ease)}
.evh-view:hover{background:var(--ocean);color:var(--ev-white)}
.evh-wa{width:50px;height:50px;flex:none;border-radius:50%;background:var(--wa);display:grid;place-items:center;
  box-shadow:0 5px 16px rgba(37,211,102,.38);transition:.2s var(--ease)}
.evh-wa:hover{transform:scale(1.07);box-shadow:0 9px 24px rgba(37,211,102,.5)}
.evh-wa svg{width:26px;height:26px;color:var(--ev-white)}

/* ==========================================================================
   ROUND 4 — section redesign (home first, then promoted to the other pages)
   ========================================================================== */

/* ---- hero: a photograph first, the words anchored low-left ---- */
.evh-hero{min-height:650px;align-items:flex-end;padding:120px 0 150px}
.evh-hero__veil{background:
  var(--scrim),
  linear-gradient(90deg,rgba(12,51,82,.55) 0%,rgba(12,51,82,0) 60%)}
.evh-hero__copy{max-width:900px}
.evh-hero h1{max-width:none;font-size:clamp(2.5rem,5.4vw,3.75rem);line-height:1.02}
.evh-lede{font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:640px}
.evh-cta{align-items:center;gap:22px}
.evh-cta__wa{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-weight:600;color:var(--ev-white);
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:5px;
  transition:text-decoration-color var(--dur-fast) var(--ease)}
.evh-cta__wa:hover{color:var(--ev-white);text-decoration-color:var(--ev-white)}
.evh-cta__wa svg{width:20px;height:20px;flex:none;fill:currentColor}
.evh-proof{display:flex;flex-wrap:wrap;gap:10px 0;margin:34px 0 0;padding:0;list-style:none;
  font-size:var(--fs-sm);color:rgba(255,255,255,.78)}
.evh-proof li{padding:0 18px;border-left:1px solid rgba(255,255,255,.26)}
.evh-proof li:first-child{padding-left:0;border-left:0}
.evh-proof b{color:var(--ev-white);font-weight:var(--fw-bold);margin-right:3px}
.evh-vidctl{bottom:170px}
@media(max-width:620px){
  .evh-hero{min-height:0;padding:150px 0 92px}
  .evh-hero h1{font-size:clamp(2.1rem,9vw,2.6rem)}
  .evh-cta{gap:8px}
  .evh-proof{margin-top:22px;font-size:var(--fs-micro);display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
  .evh-proof li{padding:0;border:0}
}
/* the search panel no longer has a trust strip under it */
.evh-searchwrap{margin-bottom:clamp(8px,2vw,24px)}
/* Megz, 2026-10-20 */
.evh-hero__copy{max-width:1090px}
.evh-hero{min-height:650px;align-items:flex-end;padding:120px 0 150px}
@media(max-width:620px){.evh-hero{min-height:0;padding:150px 0 92px}}

/* ---- Phone hero (mobile-hero pass): compact, left-aligned, search on the first screen ---- */
@media(max-width:620px){
  .evh-hero{padding:22px 0 84px}
  .evh-hero h1{font-size:clamp(1.75rem,7.6vw,2rem);line-height:1.12}
  .evh-lede{margin-top:10px;font-size:.95rem;line-height:1.5}
  .evh-cta{flex-direction:column;align-items:flex-start;gap:2px;margin-top:16px}
  .evh-cta .ev-btn{min-height:48px}
  .evh-cta .ev-textlink{min-height:44px;display:inline-flex;align-items:center}
  .evh-proof{margin-top:12px;gap:6px 14px;font-size:.78rem;line-height:1.35}
  .evh-dyn .evh-field{flex:1 1 100%}
  .evh-ctrl,.evh-go{height:50px}
  .evh-row{gap:8px}
}

/* ---- Home: tour-grid foot carries "View all tours" + the offers text link ---- */
.ev-home .ev-grid-foot:has(> .ev-textlink){flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-6)}

/* ---- Home: destinations mosaic with six countries (Egypt leads) ----
   sections.css lays out lead + four. With six tiles the lead spans three rows
   and the last tile spans the two right-hand columns. */
@media(min-width:901px){
  .ev-home .ev-dests--mosaic:has(> .ev-dest:nth-child(6)){grid-template-rows:repeat(3,minmax(240px,auto))}
  .ev-home .ev-dests--mosaic:has(> .ev-dest:nth-child(6)) .ev-dest:nth-child(2){grid-row:1 / span 3}
  .ev-home .ev-dests--mosaic:has(> .ev-dest:nth-child(6)) .ev-dest:nth-child(6){grid-column:2 / span 2}
}
@media(min-width:521px) and (max-width:900px){
  .ev-home .ev-dests--mosaic:has(> .ev-dest:nth-child(6)) .ev-dest:nth-child(6){grid-column:1 / -1}
}

/* ---- Phone search card (mobile-search pass, <= 700px) ----
   Tabs: one snapping chip row, the active tab scrolled into view by home.js,
   an edge fade only on the side that still has tabs (.has-more-l / .has-more-r).
   Fields: the query is full width, the dropdowns sit two to a row (an odd last
   one spans the row), Search is a full-width 48px button. Inputs keep 16px so
   iOS does not zoom on focus. Desktop (>= 701px) is untouched. */
@media(max-width:700px){
  .evh-search{padding:16px;border-radius:var(--r-lg)}
  .evh-tabs{flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none;
    margin:-6px -16px 6px;padding:6px 16px;
    -webkit-mask-image:none;mask-image:none}
  .evh-tabs::-webkit-scrollbar{display:none}
  .evh-tabs.has-more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .evh-tabs.has-more-l{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(270deg,#000 calc(100% - 28px),transparent)}
  .evh-tabs.has-more-l.has-more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
  .evh-tab{flex:none;min-height:44px;padding:8px 14px;border:1px solid var(--line);background:var(--ev-white);
    font-size:.875rem;line-height:1.2;white-space:nowrap;scroll-snap-align:center}
  .evh-tab:hover{background:var(--tint)}
  .evh-tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--ev-white)}

  .evh-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end}
  .evh-field--q,.evh-go{grid-column:1 / -1}
  .evh-dyn .evh-field{flex:none;grid-column:auto}
  .evh-dyn .evh-field:last-child:nth-child(odd),
  .evh-dyn.is-stack .evh-field{grid-column:1 / -1}
  .evh-field{gap:4px}
  .evh-field > label{font-size:.75rem;line-height:1.2;padding-left:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .evh-ctrl,.evh-go{height:48px}
  .evh-ctrl{padding:0 12px;gap:8px}
  .evh-ctrl > svg{width:18px;height:18px}
  .evh-ctrl input,.evh-ctrl select{font-size:1rem;text-overflow:ellipsis}
  .evh-ctrl select{white-space:nowrap}
  .evh-ctrl input::placeholder{text-overflow:ellipsis;font-size:.9rem}
  .evh-dyn .evh-ctrl{padding:0 10px;gap:6px}
  .evh-dyn .evh-ctrl > svg:not(.evh-chev){display:none}
  .evh-ctrl .evh-chev{width:12px;height:12px}
  .evh-ac{max-height:min(390px,52vh)}
}

/* hero background from YouTube (home.js): covers the hero, under the veil, revealed once playing */
.evh-hero__yt{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .8s ease;pointer-events:none}
.evh-hero__yt.is-on{opacity:1}
.evh-hero__yt[hidden]{display:none}
.evh-hero__yt iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0;pointer-events:none}