/* ==========================================================================
   EGYVACATIONS — SHARED COMPONENTS  ·  assets/css/components.css

   One definition per component, used by every template. Nothing here knows
   which page it is on. If a rule only ever applies to one page it belongs in
   assets/css/templates/<page>.css instead.

   Prefix note: .ev- is site chrome (header/footer/app bar, in chrome.css).
   .evt- is the shared template layer — it started life on the tour page,
   which is why the name stuck, but these components are now site-wide.

     1. Layout + prose         .evt-layout .evt-block .evt-prose
     2. Button                 .ev-btn   (the only button in the system)
     3. Badges + chips         .evt-badge .evt-stops .evt-share
     4. Form controls          .evt-field .evt-input .evt-fgrid
     5. Tabs                   .evt-notetabs .evt-notepanel
     6. Accordion / FAQ        .evt-qa
     7. Tour card              .evt-card .evt-wa
     8. Sticky price bar       .evt-bar
     9. Sale pricing           .evt-was .evt-sale
    10. Traveller stepper      .evt-step
   ========================================================================== */

.evt-badges{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}  /* below the H1: a tag, not a kicker */
.evt-badge{padding:6px 13px;border-radius:var(--r-sm);background:var(--tourcard-badge-bg);color:var(--ev-white);
  font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:0}
.evt-badge--accent{background:var(--accent);color:var(--on-accent)}

.evt-share{display:inline-flex;align-items:center;gap:9px;height:var(--btn-h-sm);padding:0 18px;flex:none;
  border:1.5px solid var(--border);border-radius:var(--r-pill);color:var(--text-heading);
  font-size:var(--fs-xs);font-weight:var(--fw-semi);transition:border-color var(--dur-fast) var(--ease)}
.evt-share:hover{border-color:var(--action)}
.evt-share svg{width:15px;height:15px}
@media (max-width:700px){.evt-share{display:none}} /* no share button on phones: the title row stays clean */

/* ---------- 4. LAYOUT ---------- */
/* min-width:0 on the children, or a grid item's automatic minimum is
   min-content: one horizontal track in the left column (the route strip,
   a day's photo slider) blows the whole grid past the viewport. */
.evt-layout > *{min-width:0}
.evt-layout{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:var(--sp-9);align-items:start;
  padding-bottom:var(--sp-10)}
@media(max-width:1080px){.evt-layout{grid-template-columns:1fr;gap:var(--sp-8)}}

.evt-block{padding-top:var(--sp-8)}
.evt-block + .evt-block{border-top:1px solid var(--border-soft);margin-top:var(--sp-8)}
.evt-prose{margin-top:var(--sp-5);color:var(--text-secondary);font-weight:var(--fw-light);max-width:70ch}
.evt-prose p + p{margin-top:14px}
.evt-prose strong{font-weight:var(--fw-semi);color:var(--text)}
.evt-prose a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   BUTTON — one component.
   There used to be two: .ev-btn in chrome.css at 46px and .evt-btn here at
   --btn-h, with the same fills under different modifier names. They have been
   merged. Size is contextual, set by --btn-h-local rather than by a second
   class, so the header can run a shorter button without being a second
   component.

   Modifiers, and nothing else:
     --cta       the orange CTA: brand orange fill, navy-deep label (5.41:1).
                 Never white on it — 2.41:1.
     --ghost     white with a hairline border.
     --offers    --ghost with the icon in brand orange.
     --solid     navy fill.
     --on-navy   the ghost, for use on a navy section.
     --wa        WhatsApp green, reserved for WhatsApp. var(--on-whatsapp) on it = 9.1.
     --sm --lg --block
   ========================================================================== */
.ev-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:var(--btn-h-local,var(--btn-h));padding:0 24px;border-radius:var(--btn-radius);
  font-size:var(--fs-body);font-weight:var(--fw-bold);white-space:nowrap;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-base) var(--ease),
             background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease)}
.ev-btn svg{width:18px;height:18px;flex:none}
/* long translated labels wrap on phones instead of widening the page (links in <main> only: not the
   drawer, the app bar, form buttons or the small card buttons) */
@media(max-width:620px){
  main a.ev-btn:not(.ev-btn--sm){white-space:normal;height:auto;min-height:var(--btn-h-local,var(--btn-h));
    padding-block:10px;text-align:center}
}

.ev-btn--cta{background:var(--btn-cta-bg);color:var(--btn-cta-fg);box-shadow:var(--shadow-accent)}
.ev-btn--cta:hover{background:var(--btn-cta-bg-hover);transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(240,144,31,.42);color:var(--btn-cta-fg)}

.ev-btn--ghost{background:var(--surface);color:var(--text-heading);border:1.5px solid var(--border)}
.ev-btn--ghost:hover{border-color:var(--btn-cta-bg);background:var(--surface-sunken);color:var(--text-heading)}

.ev-btn--offers{background:var(--surface);color:var(--ev-navy);border:1.5px solid var(--border)}
.ev-btn--offers:hover{border-color:var(--accent);background:rgba(240,144,31,.07);color:var(--ev-navy)}
.ev-btn--offers svg{color:var(--accent)}

.ev-btn--solid{background:var(--btn-cta-bg);color:var(--btn-cta-fg)}
.ev-btn--solid:hover{background:var(--btn-cta-bg-hover);transform:translateY(-2px);color:var(--btn-cta-fg)}

/* the ghost, restated for a navy field */
.ev-btn--on-navy{background:rgba(255,255,255,.12);color:var(--ev-white);border:1.5px solid rgba(255,255,255,.34)}
.ev-btn--on-navy:hover{background:rgba(255,255,255,.2);border-color:var(--ev-white);transform:translateY(-2px);color:var(--ev-white)}

.ev-btn--wa{background:var(--whatsapp);color:var(--on-whatsapp);box-shadow:var(--shadow-whatsapp)}
.ev-btn--wa:hover{transform:translateY(-2px);color:var(--on-whatsapp)}

.ev-btn--sm{--btn-h-local:var(--btn-h-sm);padding:0 16px;font-size:.84rem}
.ev-btn--sm svg{width:16px;height:16px}
.ev-btn--lg{--btn-h-local:58px;padding:0 28px;font-size:1.02rem}
.ev-btn--block{width:100%}

.evt-stops{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.evt-stops span{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-sm);
  background:var(--surface-sunken);font-size:.75rem;font-weight:var(--fw-semi);letter-spacing:0;color:var(--text-secondary)}
.evt-stops svg{width:13px;height:13px;color:var(--ev-ocean)}

/* ---------- 10. NOTE TABS ---------- */
.evt-notetabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-6)}
.evt-notetabs button{padding:9px 17px;border-radius:var(--r-pill);border:1.5px solid var(--border);
  font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--text-secondary);
  transition:all var(--dur-fast) var(--ease)}
.evt-notetabs button:hover{border-color:var(--ev-sky);color:var(--text-heading)}
.evt-notetabs button[aria-selected="true"]{background:var(--action);border-color:var(--action);color:var(--ev-white)}
.evt-notepanel{margin-top:var(--sp-5);padding:var(--sp-6);border-radius:var(--r-lg);
  background:var(--surface-sunken);font-size:var(--fs-sm);color:var(--text-secondary);font-weight:var(--fw-light)}
.evt-notepanel[hidden]{display:none}
.evt-notepanel ul{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.evt-notepanel li{position:relative;padding-left:15px;overflow-wrap:anywhere}
.evt-notepanel li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.evt-notepanel b{color:var(--text-heading);font-weight:var(--fw-semi)}

/* ---------- 11. QUESTION DISCLOSURE ----------
   ONE question component, two mechanisms:
     <details class="evt-qa">   a page that owns its questions — works with
                                no script at all, each one opens on its own.
     .ev-accordion__item        the shared/scripted block, where opening one
                                closes the rest (sections.css §19).
   They must look identical, down to the sign, or the site has two FAQs.
   Everything below mirrors .ev-accordion__item exactly. */
.evt-qa{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  margin-bottom:10px;overflow:hidden;position:relative}
.evt-qa::before{content:none;position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);
  opacity:0;transition:opacity var(--dur-base) var(--ease)}
.evt-qa[open]{box-shadow:var(--shadow-2)}
.evt-qa[open]::before{opacity:1}
.evt-qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 20px 19px 24px;cursor:pointer;font-weight:var(--fw-semi);color:var(--text-heading);
  font-size:var(--fs-sm)}
.evt-qa summary::-webkit-details-marker{display:none}
/* the sign is drawn here, same as the accordion's — the chevron the markup
   carries is hidden rather than removed, so no template had to change */
.evt-qa .chev{position:relative;width:34px;height:34px;flex:none;border-radius:var(--r-md);
  background:var(--surface-sunken);color:var(--text-heading);
  transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.evt-qa .chev svg{display:none}
.evt-qa .chev::before,
.evt-qa .chev::after{content:"";position:absolute;top:50%;left:50%;width:13px;height:2px;
  border-radius:2px;background:currentColor;transform:translate(-50%,-50%);
  transition:transform var(--dur-base) var(--ease),opacity var(--dur-base) var(--ease)}
.evt-qa .chev::after{transform:translate(-50%,-50%) rotate(90deg)}
.evt-qa[open] .chev{background:var(--action);color:var(--ev-white)}
.evt-qa[open] .chev::after{transform:translate(-50%,-50%) rotate(180deg);opacity:0}
.evt-qa p{padding:0 24px 22px;font-size:var(--fs-sm);color:var(--text-secondary);font-weight:var(--fw-light)}

.evt-fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);margin-top:var(--sp-6)}
.evt-fgrid .full{grid-column:1/-1}
.evt-field{display:flex;flex-direction:column;gap:6px}
.evt-field label{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:0;color:var(--text-muted)}
.evt-field label i{font-style:normal;color:var(--danger)}
.evt-input{height:50px;padding:0 15px;border:1.5px solid var(--control-border);border-radius:var(--r-md);
  background:var(--surface);font-weight:var(--fw-medium);width:100%;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
textarea.evt-input{height:auto;padding:13px 15px;resize:vertical;min-height:92px;line-height:1.6}
.evt-input:focus{outline:0;border-color:var(--control-border-focus);box-shadow:var(--control-focus-shadow)}
.evt-input::placeholder{color:var(--control-placeholder);font-weight:var(--fw-regular)}
select.evt-input{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323272A' stroke-opacity='.45' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;padding-right:38px}
.evt-formfoot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin-top:var(--sp-6)}
.evt-formfoot p{font-size:var(--fs-xs);color:var(--text-muted);flex:1;min-width:200px}

@media(max-width:560px){.evt-fgrid{grid-template-columns:1fr}}

.evt-card{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--card-radius);overflow:hidden;
  transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.evt-card:hover{transform:translateY(var(--card-lift));box-shadow:var(--card-shadow-hover)}
.evt-card__media{position:relative;aspect-ratio:var(--card-media-ratio);overflow:hidden;background:var(--surface-sunken)}
.evt-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.evt-card:hover .evt-card__media img{transform:scale(1.05)}
.evt-card__media .evt-badge{position:absolute;top:12px;left:12px}
.evt-card__body{display:flex;flex-direction:column;flex:1;gap:12px;padding:18px}
.evt-card__body h3{font-size:1.02rem;line-height:var(--lh-tight);font-weight:var(--fw-bold)}
.evt-route{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:var(--fs-micro);font-weight:var(--fw-semi);
  letter-spacing:0;color:var(--text-muted)}
.evt-route i{width:12px;height:1.5px;background:var(--border);flex:none}
.evt-card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;
  padding-top:14px;border-top:1px solid var(--border-soft)}
.evt-lab{display:block;margin-bottom:2px;font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:0;color:var(--text-muted)}
.evt-card__foot b{font-size:1.3rem;font-weight:var(--fw-black);color:var(--text-heading);letter-spacing:var(--ls-heading)}
.evt-card__foot b span{font-size:var(--fs-micro);font-weight:var(--fw-regular);color:var(--text-muted);letter-spacing:0}
.evt-card__actions{display:flex;gap:9px;padding:0 18px 18px}
.evt-card__actions .ev-btn{flex:1;height:46px;border-radius:var(--r-md);font-size:var(--fs-sm)}
.evt-wa{width:46px;height:46px;flex:none;border-radius:50%;background:var(--whatsapp);display:grid;
  place-items:center;box-shadow:var(--shadow-whatsapp);transition:transform var(--dur-fast) var(--ease)}
.evt-wa:hover{transform:scale(1.07)}
.evt-wa svg{width:24px;height:24px;fill:var(--ev-white)}

/* ---------- 14. MOBILE BOOKING BAR ---------- */
.evt-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--surface);
  border-top:1px solid var(--border);box-shadow:0 -6px 24px rgba(17,72,115,.12)}
.evt-bar .p{flex:1;min-width:0}
.evt-bar .p small{display:block;font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:0;color:var(--text-muted)}
.evt-bar .p b{font-size:1.25rem;font-weight:var(--fw-black);color:var(--text-heading);letter-spacing:var(--ls-heading)}
.evt-bar .ev-btn{height:46px;padding:0 18px;font-size:var(--fs-sm)}
.evt-bar .evt-wa{width:46px;height:46px}
.evt-bar{transition:transform .25s ease}.evt-bar.is-off{transform:translateY(120%);pointer-events:none}
/* .is-early (sections.js §14): the bar waits until the visitor has scrolled past the first screen, so it never sits on the hero, the
   title row or the sticky section nav that a phone shows first. Out of sight it is also out of the tab order. */
.evt-bar.is-early{transform:translateY(120%);pointer-events:none}
.evt-bar.is-off,.evt-bar.is-early{visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
/* The sticky price bar needs clear space below the page too, and like the app
   bar it reserves that space on the FOOTER BAR rather than on <body> — padding
   on the body paints white, and white under a navy footer is the seam this
   used to show. */
@media(max-width:1080px){
  .evt-bar{display:flex}
  .ev-footer__bar{padding-bottom:82px}
}
/* Below 900px the app bar owns the bottom edge, so the price bar stacks on
   top of it and the reserve covers both. This lives here, next to .evt-bar,
   because chrome.css loads earlier in the cascade and would lose. */
@media(max-width:900px){
  .evt-bar{bottom:calc(var(--appbar-h) + env(safe-area-inset-bottom))}
  .ev-footer__bar{padding-bottom:calc(var(--appbar-h) + 82px + env(safe-area-inset-bottom))}
}

/* ---------- 9. SALE PRICING ----------
   A struck-through old price only ever appears beside a real, dated offer.
   The old figure is decorative-weight on purpose: the live price must win
   the eye, and a struck price in full contrast reads as the price. */
.evt-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.evt-was{font-size:1rem;font-weight:var(--fw-medium);color:var(--text-muted);
  text-decoration:line-through;text-decoration-thickness:1.5px}
.evt-save{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-sm);
  background:var(--accent-wash);color:var(--ev-navy);font-size:var(--fs-micro);font-weight:var(--fw-black);
  letter-spacing:0}
.evt-sale{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);
  font-size:var(--fs-micro);font-weight:var(--fw-black);letter-spacing:0;
  box-shadow:var(--shadow-accent)}
.evt-sale svg{width:13px;height:13px}

/* ---------- 10. TRAVELLER STEPPER ----------
   Used in the hero search and in every enquiry form. Buttons are 40px so a
   thumb can hit them, and the value is an input so it posts with the form. */
.evt-step{display:flex;align-items:center;gap:4px;height:var(--control-h);padding:0 6px;
  border:1.5px solid var(--control-border);border-radius:var(--control-radius);background:var(--surface)}
.evt-step button{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--surface-sunken);color:var(--ev-navy);
  transition:background var(--dur-fast) var(--ease)}
.evt-step button:hover:not(:disabled){background:var(--ev-navy-14)}
.evt-step button:disabled{opacity:.4;cursor:not-allowed}
.evt-step button svg{width:15px;height:15px}
.evt-step input{width:100%;min-width:0;border:0;background:none;text-align:center;
  font-weight:var(--fw-bold);color:var(--text-heading);-moz-appearance:textfield}
.evt-step input::-webkit-outer-spin-button,
.evt-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.evt-step input:focus{outline:0}

/* finish-review: badges and chips are navy/ocean, never orange */
.evt-badge--accent{background:var(--ev-navy);color:var(--ev-white)}
.evt-notepanel{background:none;border:1px solid var(--border-soft)}
.evt-notepanel li::before{background:var(--ev-ocean)}

/* Share menu (sections.js §13) */
.evt-sharemenu{position:absolute;z-index:40;right:0;top:calc(100% + 8px);min-width:200px;padding:6px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-3,0 18px 40px -12px rgba(12,51,82,.3));
  display:flex;flex-direction:column}
.evt-sharemenu[hidden]{display:none}
.evt-sharemenu a,.evt-sharemenu button{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-md);
  font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--text-heading);background:none;border:0;text-align:left;cursor:pointer}
.evt-sharemenu a:hover,.evt-sharemenu button:hover,.evt-sharemenu a:focus-visible,.evt-sharemenu button:focus-visible{background:var(--surface-sunken)}
/* "Link copied" confirmation (sections.js §13): a small pill at the bottom of the screen, announced through role="status" */
.evt-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));z-index:95;max-width:calc(100vw - 32px);
  padding:12px 22px;border-radius:var(--r-pill);background:var(--ev-navy);color:var(--ev-white);font-size:var(--fs-sm);
  font-weight:var(--fw-semi);line-height:1.3;text-align:center;box-shadow:0 12px 30px rgba(12,51,82,.28);
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,10px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.evt-toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
@media(max-width:900px){.evt-toast{bottom:calc(var(--appbar-h,64px) + 96px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.evt-toast{transition:none}}

/* Prices and figures use tabular numerals (standard): columns of prices line up. */
.ev-price__value,.ev-card__price,.ev-mega__promo-price,.ev-ship__price,.evt-pricecard,.evt-rates,.evt-tier,.evx-price,.evt-meta dd,.evt-bar,.ev-band__facts b,.evc-stats b,.evx-was,s.evx-was{font-variant-numeric:tabular-nums}

/* Enquiry form enhancement (sections.js §15): dialling code + number, steppers, one age field per child. */
.ev-telrow{display:grid;grid-template-columns:minmax(118px,38%) 1fr;gap:8px}
/* the dialling code and the nationality / country fields pick from a country list: a fixed arrow says so (the browser shows its own only on hover, or not at all) */
input.ev-dial,input[name="nationality"],input[name="country"]{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%235b6b7c%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px}
input.ev-dial::-webkit-calendar-picker-indicator,input[name="nationality"]::-webkit-calendar-picker-indicator,input[name="country"]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}
.ev-stepper{display:grid;grid-template-columns:44px 1fr 44px;gap:6px;align-items:stretch}
.ev-stepper input{min-width:0;padding-left:0;padding-right:0;text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.ev-stepper input::-webkit-outer-spin-button,.ev-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ev-stepper__btn{display:grid;place-items:center;min-height:44px;border:1.5px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);color:var(--text-heading);font-size:1.2rem;font-weight:var(--fw-bold);cursor:pointer}
.ev-stepper__btn:hover{border-color:var(--btn-cta-bg)}
.ev-kidages{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:10px}
.ev-kidages[hidden]{display:none}   /* display:grid above would otherwise paint the empty age box while no child is chosen */
.ev-kidages__item{display:grid;gap:6px;font-size:var(--fs-xs);font-weight:var(--fw-semi);color:var(--text-secondary)}
.ev-kidages__item select{min-height:44px;padding:0 12px;border:1.5px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);font:inherit;color:var(--text-heading)}

/* Icon badge on the main heading of a repeated section (design standard; added by the page build / theme render). */
.ev-headic{display:inline-grid;place-items:center;width:44px;height:44px;margin-bottom:14px;border-radius:var(--r-md);
  background:var(--accent-wash);color:var(--accent-ink)}
.ev-headic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ev-head--center .ev-headic{margin-inline:auto;display:grid}
:is(.ev-section--navy,.ev-band,.evs-band) .ev-headic{background:rgba(255,255,255,.12);color:var(--accent-on-navy)}

/* One stroke weight for line icons (standard): CSS wins over the icons' own stroke-width attributes. */
svg[fill="none"][stroke="currentColor"],svg[fill="none"][stroke="currentColor"] [stroke-width]{stroke-width:2}