/* Homepage: product-launch typography and controls for the sections below the product lineup.
   Loaded after site.css on index.html only, so the product pages keep their own styling.
   Hover feedback is kept quiet: colour and underline on links, a slow, slight zoom on photos, nothing lifts. */

/* Section titles */
main .sec-head { max-width: 900px; margin: 0 auto clamp(40px, 5.5vw, 72px); text-align: center; }
main .sec-head .lead { max-width: 52ch; margin: 16px auto 0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.45; }
main .sec-head h2,
.why-grid h2,
.quote-aside h2 { font-size: clamp(2.2rem, 4.4vw, 3.75rem); font-weight: 700; line-height: 1.03; letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
main h2 em { font-style: normal; color: var(--orange); }
/* Headlines that share a row with other content run a size smaller */
.why-grid h2, .quote-aside h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.why-grid .lead, .quote-aside .lead { margin-top: 18px !important; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.5; }

.lineup-item h3 a { color: inherit; }
.lineup-item h3 a:hover { color: var(--navy); }

/* Buttons become pills */
main .btn { border-radius: 999px; padding: 14px 26px; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; text-transform: none; }
main .btn-ghost { border-width: 1.5px; }

/* Shared text link with a chevron */
main .link-more { display: inline-flex; align-items: center; gap: 4px; padding: 0; font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; text-transform: none; color: var(--navy); }
main .link-more > span { font-size: 1.3em; line-height: 1; transition: transform .3s ease; }
a:hover .link-more { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
a:hover .link-more > span { transform: translateX(2px); }

/* Event services: borderless tiles with rounded photos and an accent per service */
.svc.card { --accent: var(--orange); display: flex; flex-direction: column; border: 0; background: none; }
.svc.card:nth-child(2) { --accent: var(--navy); }
.svc.card:nth-child(3) { --accent: var(--cyan); }
.svc.card:hover { transform: none; box-shadow: none; border-color: transparent; }
.svc .media { border-radius: 22px; aspect-ratio: 4 / 3; }
.svc .media img { transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.svc.card:hover .media img { transform: scale(1.025); }
.svc-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 22px 2px 0; }
.svc-body h3 { position: relative; padding-top: 14px; font-size: clamp(1.25rem, 1.7vw, 1.55rem); font-weight: 700; line-height: 1.15; letter-spacing: -.035em; color: var(--ink); }
.svc-body h3::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 3px; border-radius: 3px; background: var(--accent); }
.svc-body p { max-width: 38ch; margin: 10px 0 16px; font-size: .98rem; line-height: 1.55; }
main .svc .link-more { margin-top: auto; font-size: .98rem; color: var(--accent); }
a.svc:hover .link-more { color: var(--accent); }

/* Why: rounded portrait photo, frosted badge, glyph list */
/* The photo stretches to the text column's height, so their tops and bottoms line up */
.why-grid { align-items: stretch; }
.why-photo { width: 100%; max-width: none; min-height: 460px; border-radius: 28px; }
.why-photo img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 30%; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.why-photo:hover img { transform: scale(1.02); }
.why-photo .badge { left: 20px; bottom: 20px; gap: 12px; padding: 12px 22px 12px 16px; border-radius: 999px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); }
.why-photo .badge strong { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; color: var(--orange); }
.why-photo .badge span { font-size: .82rem; font-weight: 500; }
.why-list { gap: 28px; margin-top: 36px; }
.why-item { --accent: var(--orange); grid-template-columns: 52px 1fr; gap: 18px; }
.why-item:nth-child(even) { --accent: var(--navy); }
.why-item > .i { width: 40px; height: 40px; margin-top: 2px; color: var(--ink); transition: color .3s ease; }
.why-item:hover > .i { color: var(--accent); }
.why-item h3 { font-size: 1.12rem; font-weight: 700; line-height: 1.25; letter-spacing: -.025em; color: var(--ink); }
.why-item p { margin-top: 4px; font-size: .95rem; line-height: 1.55; }

/* How it works: big orange step numbers on a hairline */
.step-grid { gap: 44px clamp(24px, 3vw, 40px); }
.step { padding: 26px 0 0; border-left: 0; border-top: 1px solid #d6d9e2; background: none; }
.step:hover { transform: none; box-shadow: none; }
.step .num, .step:hover .num { font-size: clamp(2.4rem, 3.4vw, 3.2rem); font-weight: 700; letter-spacing: -.04em; color: var(--orange); }
.step h3 { margin-top: 14px; font-size: 1.35rem; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.step p { margin-top: 10px; font-size: 1.02rem; line-height: 1.55; }

/* Delivery: full-bleed photo, centred copy over the sky */
/* The photo sits in the lower part and its sky fades into the blue band, so the copy always reads on clear sky */
/* Orange highlights. A slightly lighter orange keeps contrast on the blue sky. */

/* Form fields */
main .field label { font-size: .88rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
main .field input:not([type="checkbox"]), main .field select, main .field textarea { min-height: 50px; padding: 12px 16px; border-color: #d6d9e2; border-radius: 12px; }
main .field textarea { min-height: 110px; }
main .field-grid[hidden] { display: none; }
main .field input:not([type="checkbox"]):focus, main .field select:focus, main .field textarea:focus { outline: 2px solid var(--navy); outline-offset: -1px; border-color: var(--navy); }

/* Trust: centred headline, big figures, then two rounded tiles */
.trust { background: #fff; }
.trust-head { max-width: 820px; margin: 0 auto; text-align: center; }
.trust-head h2 { font-size: clamp(2.3rem, 4.6vw, 4rem); font-weight: 700; line-height: 1.03; letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.trust-head .lead { max-width: 56ch; margin: 20px auto 0; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.55; }
.trust-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; list-style: none; }
.trust-stats li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 12px; text-align: center; }
.trust-stats li + li { border-left: 1px solid var(--line); }
.trust-stats strong { font-size: clamp(2.6rem, 5vw, 4.25rem); font-weight: 700; line-height: 1; letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.trust-stats li:nth-child(odd) strong { color: var(--orange); }
.trust-stats strong small { font-size: .42em; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.trust-stats span { font-size: .95rem; font-weight: 500; color: var(--grey); }
.trust-bento { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; margin-top: clamp(48px, 6vw, 80px); }
.trust-certs, .trust-group { padding: clamp(28px, 3.6vw, 52px); border-radius: 28px; background: var(--bg-soft); }
.trust-bento h3 em { font-style: normal; color: var(--orange); }
.trust-certs li { border: 1px solid transparent; transition: border-color .3s ease; }
.trust-certs li:hover { border-color: color-mix(in srgb, var(--navy) 30%, transparent); }
.trust-certs li strong { transition: color .3s ease; }
.trust-certs li:hover strong { color: var(--navy); }
.trust-group p strong { color: var(--ink); }
.trust-bento h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.trust-certs ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.trust-certs li { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 18px; background: #fff; }
.trust-certs .glyph { flex: none; width: 34px; height: 34px; color: var(--navy); }
.trust-certs strong { display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.trust-certs span { display: block; font-size: .85rem; line-height: 1.35; color: var(--grey); }
.trust-group { display: flex; flex-direction: column; }
.trust-group p { max-width: 42ch; margin-top: 14px; font-size: 1.02rem; line-height: 1.55; }
.trust-group img { width: 100%; max-width: 420px; margin: auto auto 0; padding-top: 32px; }

/* Quote: rounded contact card and form */
.quote-aside .contact-card { border: 0; border-radius: 22px; padding: 28px; }
.contact-card div { font-size: 1rem; }
.contact-card strong { font-weight: 700; }
form.quote-form { padding: clamp(24px, 3vw, 40px); border: 0; border-radius: 28px; box-shadow: 0 30px 80px rgba(21, 26, 46, .1); }

/* Quieter hovers on the sections styled in site.css and showcase.css */
.lineup-item:hover .lineup-img:not(.photo) img { transform: none; }
.range-list a:hover .range-img img { transform: scale(1.03); }

/* ===== Colour system for the homepage =====
   Navy: primary buttons and links. Orange: highlights in headlines and small accents.
   Bright orange and cyan are too pale for small text on light grounds, so small text uses darker shades. */
/* Small text in the accent colour, dark enough to read. The brand orange (#F05A28) is only 3.4:1 on white,
   which is fine for a headline but not for a 13px label like "Most requested". #C4450F cleared 4.5:1 on
   white but not on the light grey panels (4.46:1), so it goes a shade darker again: 5.4:1 on white,
   4.8:1 on the grey. Headlines and large type keep the brand orange. */
:root { --orange-text: #BC400C; --cyan-text: #0079A8; }

/* Header: match the pill buttons and quiet links used on the rest of the page */
.nav a { padding: 10px 9px; font-size: .88rem; font-weight: 600; letter-spacing: -.005em; text-transform: none; white-space: nowrap; color: var(--ink); transition: color .25s; }
.header .wrap { gap: 18px; }
.nav { margin-left: 0; }
/* The phone number lives in the top bar; the header keeps just the language switch and the quote button. */
.header-phone { display: none; }
/* The menu becomes the burger before the links start crowding the quote button. Measured in the browser,
   the header row needs 936px in English and 1092px in Greek, because the Greek labels are longer
   (Επικοινωνία against Contact). One breakpoint for both would have to serve the Greek width, which takes
   the full menu away from English screens that could still hold it — an iPad in landscape, for instance.
   So each language changes over at its own width, with room to spare above what it measured. */
@media (max-width: 1140px) {
  .nav { display: none; }
  .burger { display: block; }
  .header-cta { margin-left: auto; }
  .burger { margin-left: 0; }
}
@media (min-width: 981px) {
  html:not(.lang-el) .nav { display: flex; }
  html:not(.lang-el) .burger { display: none; }
}
.nav a:hover { color: var(--navy); }
.header-phone:hover { color: var(--navy); }
.header-cta .btn { border-radius: 999px; padding: 12px 22px; font-size: .95rem; font-weight: 600; letter-spacing: -.01em; text-transform: none; }
.header-cta .btn-primary, main .btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.header-cta .btn-primary:hover, main .btn-primary:hover { background: var(--navy-dark); border-color: var(--navy-dark); color: #fff; }
.burger { border-radius: 999px; }
.action-bar a { border-radius: 999px; font-size: .85rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.mobile-nav a { font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }

/* Default link hover: no cyan flash */
main a:hover { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--navy); }
footer a:hover { color: #fff; }
.social a { border-radius: 50%; }
.social a:hover { background: var(--orange); transform: none; }

/* Small accent text in readable shades */
.range-tag, .lineup-tag { color: var(--orange-text); }
.path#events { --accent: var(--orange-text); }
.path#events { --accent-hover: var(--navy); }
.path#construction { --accent-hover: var(--orange-text); }
/* Service tiles share one scheme: orange marker line, navy link */
.svc.card, .svc.card:nth-child(2), .svc.card:nth-child(3) { --accent: var(--navy); }
.svc-body h3::before { background: var(--orange); }
.why-item { --accent: var(--orange-text); }
.lift-caption p { color: var(--ink); }
.lift-caption .eyebrow { color: var(--orange-text); }
.form-foot small a { color: var(--navy) !important; }

/* Quote form: segmented control, as used in the hero-style controls */
.seg { gap: 4px; padding: 4px; border: 0; border-radius: 999px; background: rgba(21, 26, 46, .06); }
.seg label { padding: 11px; border-radius: 999px; background: transparent; color: var(--ink); font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.seg label:hover { background: rgba(21, 26, 46, .05); }
.seg input:checked + label { background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(21, 26, 46, .12); }
.seg input:focus-visible + label { outline: 2px solid var(--navy); outline-offset: 2px; }
main .field input:hover, main .field select:hover, main .field textarea:hover { border-color: #b9bfcc; }

@media (prefers-reduced-motion: reduce) {
  .svc .media img, main .link-more > span, .why-item > .i, .why-photo img, .delivery-call > span { transition: none; }
  .svc.card:hover .media img, .why-photo:hover img, .range-list a:hover .range-img img { transform: none; }
}
@media (max-width: 900px) {
  .trust-bento { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .trust-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .trust-stats li + li { border-left: 0; }
  .trust-stats li:nth-child(even) { border-left: 1px solid var(--line); }
  .trust-certs ul { grid-template-columns: 1fr; }
  .why-photo .badge { left: 12px; bottom: 12px; }
  .why-photo { min-height: 0; aspect-ratio: 1; }
}


/* Delivery: the photograph sits in a fixed frame and drifts inside it as the page scrolls,
   so it moves slower than everything around it. Nothing else in the section moves. */
.delivery { position: relative; isolation: isolate; display: flex; align-items: flex-start; min-height: clamp(860px, 84vw, 1180px); padding-block: clamp(64px, 8vw, 110px) 0; overflow: hidden; background: linear-gradient(180deg, #264f96 0%, #3566ad 40%, #4a7cc0 60%); color: #fff; }
.delivery-frame { position: absolute; left: 0; right: 0; bottom: 0; z-index: -2; height: 68%; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 24%, #000 44%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 24%, #000 44%); }
.delivery img.bg { position: absolute; left: 0; top: 0; width: 100%; height: 138%; object-fit: cover; object-position: center 60%; will-change: transform; }
.delivery .wrap.delivery-copy { display: block; max-width: 760px; text-align: center; }
.delivery h2 { font-size: clamp(2.3rem, 4.6vw, 4rem); font-weight: 700; line-height: 1.03; letter-spacing: -.045em; color: #fff; text-wrap: balance; text-shadow: 0 2px 30px rgba(10, 30, 70, .25); }
.delivery-copy p { max-width: 54ch; margin: 22px auto 0; font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6; color: rgba(255, 255, 255, .94); text-shadow: 0 1px 16px rgba(10, 30, 70, .25); }
.delivery-copy p + p { margin-top: 14px; }
.delivery-copy .delivery-towns { margin-top: 20px; font-size: .95rem; font-weight: 600; letter-spacing: .02em; color: #fff; }
.delivery-call { display: inline-flex; align-items: center; gap: 4px; margin-top: 22px; font-size: 1.08rem; font-weight: 600; color: #fff; text-shadow: 0 1px 12px rgba(10, 30, 70, .55); }
.delivery-call > span { font-size: 1.3em; line-height: 1; color: #FF7A45; transition: transform .3s ease; }
.delivery-call:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.delivery-call:hover > span { transform: translateX(2px); }
.delivery-copy .delivery-tag { margin-top: 18px; font-size: 1rem; font-weight: 700; letter-spacing: 0; text-shadow: 0 1px 12px rgba(10, 30, 70, .55); }
.delivery h2 em, .delivery-copy em, .delivery-copy strong { font-style: normal; color: #FF7A45; }
.delivery-copy strong { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .delivery-call > span { transition: none; }
}
@media (max-width: 900px) {
  .delivery { min-height: 980px; }
  .delivery-frame { height: 42%; }
  .delivery img.bg { height: 128%; object-position: 58% 70%; }
}

/* The three group logos, on white, above the range */
.group-logos { padding-block: clamp(28px, 3.6vw, 48px) 0; background: #fff; }
.group-logos .wrap { display: flex; justify-content: center; }
/* a quiet row: each logo lands around 70px tall, well under the headline and the product shots */
.group-logos img { width: clamp(230px, 26vw, 360px); height: auto; background: transparent; }
/* the same separating rule the About page uses */
.group-rule { width: min(1200px, calc(100% - 40px)); height: 1px; margin: clamp(26px, 3.4vw, 44px) auto 0; background: linear-gradient(90deg, var(--navy) 0%, #6aa8e0 48%, #F4A27A 100%); opacity: .55; }

/* ---------- sizing clean-up from the site-wide audit ---------- */
/* small uppercase labels were under 12px */
.header-phone small { font-size: .75rem; }
.lift-cue { font-size: .75rem; }
/* phones: links need a comfortable finger-sized target (24px or more) */
@media (max-width: 720px) {
  footer ul a { display: inline-block; padding-block: 4px; }
  footer ul { gap: 4px; }
  .foot-credit a { display: inline-block; padding-block: 5px; }
  .form-foot small a, .contact-card span a { display: inline-block; padding-block: 3px; }
  .lineup-link, .lineup-item h3 a { display: inline-flex; min-height: 28px; align-items: center; }
}

/* ISO certification logos in the footer, on a white tile so the navy marks read on the dark ground */
.foot-brand .foot-iso { display: block; width: auto; height: 40px; margin-top: 18px; opacity: .85; }

/* ---------- breadcrumbs: one row, same place on every inner page ---------- */
.crumb-bar { padding-block: 16px; background: #fff; border-bottom: 1px solid var(--line); }
.crumb-bar .crumbs { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; margin: 0; font-size: .82rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.crumb-bar .crumbs a { color: var(--navy); }
.crumb-bar .crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumb-bar .crumbs [aria-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- footer bottom row ---------- */
.foot-bottom { align-items: center; font-size: .85rem; color: rgba(255, 255, 255, .6); }
.foot-bottom p { margin: 0; }
.foot-legal { display: grid; gap: 10px; }
.foot-links a, .foot-group a { color: #8E9BFF; }
.foot-links a:hover, .foot-group a:hover { color: #fff; }
.foot-links span { margin-inline: 3px; }
.foot-group { text-align: right; }
@media (max-width: 720px) {
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .foot-group { text-align: left; }
  .foot-links a { display: inline-block; padding-block: 4px; }
}

/* social icons and ISO logos on one row above the footer divider */
.foot-badges { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 40px; }
.foot-badges .social { margin: 0; }
.foot-badges .foot-iso { display: block; width: auto; height: 40px; margin: 0; opacity: .85; }
.foot-badges + .foot-bottom { margin-top: 24px; }

/* delivery photo: two loaded lorries shown at their own proportions across the full width,
   drifting a little inside the frame; the copy sits clear of the lorries */
@media (min-width: 901px) {
  .delivery { min-height: 0; padding-bottom: 35vw; }
  .delivery-frame { height: 40vw; }
  .delivery img.bg { height: auto; aspect-ratio: 1600 / 714; object-position: center; }
}
@media (max-width: 900px) {
  .delivery img.bg { object-position: 82% 60%; }
}

/* ---------- device fit ---------- */
/* small phones: the action bar keeps each label on one line */
@media (max-width: 360px) {
  .action-bar { gap: 6px; padding-inline: 8px; }
  .action-bar a { gap: 5px; padding-inline: 6px; font-size: .78rem; white-space: nowrap; }
}
/* phones held sideways: give the screen back to the content */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar { display: none; }
  .header .wrap { height: 60px; }
  .brand img { height: 42px; }
  .crumb-bar { padding-block: 10px; }
  .cf-panel { position: static; }
}
/* touch screens (phones and tablets): form fields at 16px so iOS does not zoom in when one is tapped */
@media (max-width: 720px), (pointer: coarse) {
  input, select, textarea, .field input, .field select, .field textarea, .gc-field input, .gc-field select, .cu-field input, .cu-field select, .cu-field textarea { font-size: 16px; }
}
/* touch screens: text links get a finger-sized (44px) tap area. The extra padding is cancelled by a negative
   margin, so nothing moves on the page; only the area you can tap grows. */
@media (max-width: 900px), (pointer: coarse) {
  body :is(.pc-link, .pc h3 a, .ev-link, .lift-link, .path-cta, .cu-mail, .cu-link, .lineup-link,
    .lineup-item h3 a, .vr-call, .hero-call, .link-more, .foot-links a, .foot-group a, .topbar a,
    .ev-list a.ev-link, td a, th a, .gc-n a, .contact-card a, .form-foot a, .cmp-col h3 a) {
    display: inline-flex; align-items: center; padding-block: 10px; margin-block: -10px;
  }
  body footer ul a { display: inline-flex; align-items: center; min-height: 36px; padding-block: 0; }
  body .crumbs a { display: inline-block; padding-block: 10px; margin-block: -10px; }
  body footer ul { gap: 2px; }
}

/* quote form: pick every kind of unit you need */
.need-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.need-set legend { margin-bottom: 10px; padding: 0; font-weight: 600; color: var(--ink); }
.need-set legend small { margin-left: 6px; font-size: .8rem; font-weight: 500; color: var(--muted); }
.need-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.need-pill { position: relative; cursor: pointer; }
.field .need-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }

.need-pill span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border: 1px solid #d6d9e2; border-radius: 999px; background: #fff; font-size: .9rem; font-weight: 500; color: var(--ink); transition: background-color .2s, border-color .2s, color .2s; }
.need-pill:hover span { border-color: #b9bfcc; }
.need-pill input:checked + span { border-color: var(--navy); background: var(--navy); color: #fff; }
.need-pill input:checked + span::before { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.need-pill input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }

/* needs list behind a button */
.need-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid #d6d9e2; border-radius: 12px; background: #fff; font: inherit; font-size: .95rem; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s; }
.need-toggle:hover { border-color: #b9bfcc; }
.need-toggle[aria-expanded="true"] { border-color: var(--navy); }
.need-toggle:focus-visible { outline: 2px solid var(--navy); outline-offset: -1px; }
.need-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.need-summary.is-empty { color: var(--muted); }
.need-toggle svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.need-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.need-set .need-pills { margin-top: 10px; padding: 14px; border: 1px solid #e3e5eb; border-radius: 14px; background: #fafbfc; }
.need-set .need-pills[hidden] { display: none; }

/* hero call links: phone icon and the number in bold */
.hero-call { display: inline-flex; align-items: center; gap: 8px; }
.hero-call .call-ico { flex: none; width: 1.05em; height: 1.05em; fill: currentColor; }
.hero-call strong { font-weight: 700; letter-spacing: .01em; }
/* card titles turn orange on hover: event types and VIP rooms */
.ev-card h3, .vr-range .pc h3 a { transition: color .25s ease; }
.ev-card:hover h3, .vr-range .pc:hover h3 a { color: var(--orange); }
/* touch screens: the card in focus, or tapped, gets the same orange title */
.ev-card.is-lit h3, .vr-range .pc.is-lit h3 a { color: var(--orange); }
/* hero call link turns orange on hover */
.hero-call { transition: color .25s ease; }
.hero-call:hover { color: var(--orange); text-decoration: none; }

/* pill-shaped call buttons keep their own colours on hover */
.pc-pill.hero-call:hover { color: #fff; }
.delivery-call.hero-call strong { color: #FF7A45; }

/* call links: orange on hover everywhere, with a short ring of the phone icon and the arrow sliding on */
a.hero-call, a.hero-call > span, a.hero-call .call-ico { transition: color .25s ease, transform .3s ease; }
a.hero-call:hover, .ev-hero a.hero-call:hover, .ev-band a.hero-call:hover, a.vr-call.hero-call:hover { color: var(--orange); text-decoration: none; }
a.hero-call:hover > span { color: var(--orange); transform: translateX(3px); }
a.hero-call:hover .call-ico { animation: callRing .5s ease; }
@keyframes callRing {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  a.hero-call:hover .call-ico { animation: none; }
  a.hero-call:hover > span { transform: none; }
}
/* the navy pill call buttons keep white text */
a.pc-pill.hero-call:hover, a.pc-pill.hero-call:hover > span { color: #fff; }

/* request type: three choices, "Other" opens a description box */
.quote-form .seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quote-form .type-other { margin: -6px 0 18px; }
.quote-form .type-other[hidden] { display: none; }
/* pills and choices are buttons: a quick double tap should not select their text */
.need-pill span, .seg label, .need-toggle { -webkit-user-select: none; user-select: none; }
@media (max-width: 480px) {
  .quote-form .seg { grid-template-columns: 1fr 1.45fr 1fr; }
  .quote-form .seg label { padding: 10px 6px; font-size: .88rem; line-height: 1.2; }
}

/* ---------- small phones: nothing may be wider than the screen ---------- */
/* a single long word (Greek runs long) breaks instead of pushing the page sideways */
h1, h2, h3, h4 { overflow-wrap: break-word; }
/* breadcrumbs stay on one line: long names shorten with "…" (the first link, Home, never does) */
.crumb-bar .crumbs a { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb-bar .crumbs a:not(:last-of-type) { flex-shrink: 0; }
.crumb-bar .crumbs [aria-current] { flex-shrink: 4; }
.crumb-bar .crumbs > span[aria-hidden] { flex-shrink: 0; }
/* the form's send button may wrap, and fills the width on phones */
.form-foot .btn { white-space: normal; text-align: center; }
@media (max-width: 480px) {
  .form-foot .btn { width: 100%; }
  .pcat-head h2 { font-size: clamp(1.7rem, 8.4vw, 2.2rem); }
}
/* one-column layouts on phones: columns may shrink below their longest word, and big titles scale with the screen */
@media (max-width: 900px) {
  .cf-grid > *, .pcat-head > *, .cf-title-row > * { min-width: 0; }
  .cf-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .cf-panel h1 { font-size: clamp(1.7rem, 8.2vw, 2.2rem); }
  .pcat-head h2 { font-size: clamp(1.6rem, 7.8vw, 2.2rem); }
}
/* buttons whose text wraps (long Greek labels) stay tidy: centred lines with room above and below */
.pc-pill, .lift-pill, .lineup-pill, main .btn { text-align: center; justify-content: center; line-height: 1.25; }
@media (max-width: 480px) {
  .pc-pill, .lift-pill, .lineup-pill { padding-block: 10px; }
}
/* text links on touch screens: the arrow stays at the end of the text instead of on its own line */
@media (max-width: 900px), (pointer: coarse) {
  body :is(.lineup-link, .pc-link, .ev-link, .lift-link, .path-cta, .cu-mail, .cu-link, .link-more, .ev-list a.ev-link):not(.hero-call) { display: inline-block; }
  body :is(.lineup-link, .pc-link, .ev-link, .lift-link, .path-cta, .cu-mail, .cu-link, .link-more, .ev-list a.ev-link):not(.hero-call) > span { margin-left: .25em; }
}
/* phone numbers never split over two lines (the text around them may wrap) */
.call-text strong { white-space: nowrap; }
/* homepage hero caption on phones: the product name stays on one line, the pill grows into a rounded box */
.lift-chip strong { white-space: nowrap; }
@media (max-width: 720px) {
  .lift.is-static .lift-chip { border-radius: 22px; padding: 10px 18px; }
}
/* product line-up: a long word in a card title can't widen its column */
.lineup-item { min-width: 0; }
.lineup-item h3 { hyphens: manual; }
/* VIP comparison table on phones: the value column takes the remaining width and wraps */
@media (max-width: 720px) {
  .vr-table td { align-items: baseline; }
  .vr-table td { text-align: right; }
  .vr-table td::before { flex: 0 1 auto; max-width: 48%; letter-spacing: .04em; text-align: left; overflow-wrap: normal; }
}
@media (max-width: 380px) {
  /* smallest phones: label above its value */
  .vr-table td { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
  .vr-table td::before { max-width: none; }
}
/* delivery section call line: the text wraps, the number stays whole and the arrow stays beside it */
.delivery-call { flex-wrap: nowrap; }
.delivery-call .call-text { min-width: 0; flex: 0 1 auto; }

/* ---------- legal pages (privacy, cookies, terms) ---------- */
.legal { padding-block: clamp(40px, 6vw, 80px); background: #fff; }
.legal-wrap { max-width: 780px; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -.045em; color: var(--ink); }
.legal h1 em { font-style: normal; color: var(--orange); }
.legal-lead { margin: 16px 0 6px; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.5; color: var(--ink); }
.legal-date { margin: 0 0 clamp(24px, 4vw, 40px); font-size: .9rem; color: var(--muted); }
.legal h2 { margin: clamp(28px, 4vw, 40px) 0 10px; font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; color: var(--ink); scroll-margin-top: 100px; }
.legal p { margin: 0 0 12px; font-size: 1rem; line-height: 1.7; color: var(--grey); }
.legal p strong { color: var(--ink); }
.legal a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--orange-text); }
.legal code { white-space: nowrap; font-size: .9em; padding: 2px 6px; border-radius: 6px; background: var(--bg-soft); color: var(--ink); }
.legal-table { width: 100%; margin: 8px 0 16px; border-collapse: collapse; font-size: .95rem; }
.legal-table th, .legal-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink); }
.legal-more { margin-top: clamp(32px, 5vw, 48px) !important; padding-top: 20px; border-top: 1px solid var(--line); }
.legal-more a { margin-left: 10px; }
@media (max-width: 720px) {
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .legal-table td { display: block; padding: 4px 0; border: 0; }
  .legal-table td::before { content: attr(data-l); display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
}

/* ---------- quote forms: spam trap, sending result (js/quote-send.js) ---------- */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.send-note { margin: 14px 0 0; font-size: .95rem; line-height: 1.5; }
.send-note.is-error { padding: 12px 14px; border-radius: 12px; background: #FFF1EC; color: #8A2E0C; }
.send-note a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
button[aria-busy="true"] { opacity: .75; cursor: progress; }
.send-done { display: grid; justify-items: center; gap: 10px; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 40px); border-radius: 24px; background: #fff; text-align: center; box-shadow: 0 20px 50px -28px rgba(21, 26, 46, .3); animation: sendDone .6s cubic-bezier(.22, 1, .36, 1); }
.send-done svg { width: 56px; height: 56px; fill: none; stroke: #1E9E5A; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.send-done svg circle { fill: #E8F7EF; stroke: none; }
.send-done h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.send-done p { max-width: 42ch; margin: 0; color: var(--grey); }
@keyframes sendDone { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .send-done { animation: none; } }

/* ---------- 404 page ---------- */
.nf { padding-block: clamp(56px, 9vw, 120px); background: #fff; text-align: center; }
.nf-wrap { max-width: 720px; }
.nf-code { margin: 0 0 6px; font-size: clamp(4rem, 12vw, 8rem); font-weight: 800; line-height: 1; letter-spacing: -.06em; color: var(--orange); }
.nf h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 700; line-height: 1.05; letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.nf h1 em { font-style: normal; color: var(--orange); }
.nf-lead { max-width: 46ch; margin: 16px auto 28px; font-size: 1.08rem; color: var(--grey); }
.nf-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.nf .nf-quote { background: var(--orange); }
.nf .nf-quote:hover { background: #d9481a; }
.nf-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin: 36px 0 0; padding: 0; list-style: none; }
.nf-links a { display: inline-flex; align-items: center; gap: 4px; padding-block: 8px; font-weight: 600; color: var(--navy); }
.nf-links a span { transition: transform .25s; }
.nf-links a:hover span { transform: translateX(3px); }
.nf-call { margin-top: 26px; color: var(--muted); }
.nf-call a { color: var(--navy); font-weight: 700; }

/* ---------- footer map (js/site.js): wide map, pin left of centre, white info card on the right ---------- */
.foot-map { position: relative; margin-top: 48px; padding: 0; border-radius: 24px; overflow: hidden; background: #1c2440; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.foot-map-frame { position: relative; height: clamp(300px, 30vw, 380px); overflow: hidden;
  background: radial-gradient(circle at 36% 48%, rgba(240, 90, 40, .18), transparent 32%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-20 210 C80 190 150 230 250 200 S420 120 620 150' stroke='%233a4f8f' stroke-width='14' opacity='.55'/%3E%3Cpath d='M300 -20 C290 60 330 110 310 170 S300 260 330 330' stroke='%23304377' stroke-width='9' opacity='.6'/%3E%3Cpath d='M-20 80 C120 100 180 40 330 70 S520 40 620 90' stroke='%232c3d6e' stroke-width='5' opacity='.7'/%3E%3Cpath d='M430 -20 C440 80 520 120 620 130' stroke='%232c3d6e' stroke-width='4' opacity='.6'/%3E%3Cpath d='M60 330 C90 260 60 220 120 150' stroke='%232c3d6e' stroke-width='4' opacity='.6'/%3E%3Cpath d='M470 330 C470 280 520 240 600 230' stroke='%23305a8f' stroke-width='18' opacity='.35'/%3E%3C/g%3E%3C/svg%3E") center / cover, linear-gradient(135deg, #1f2a4d, #19203a); }
/* the live map: wider than the frame so the pin (centre of the map) sits left of centre, clear of the card;
   Google's logo and terms (bottom centre/right) stay visible */
.foot-map-frame iframe { position: absolute; top: 0; right: 0; display: block; width: 145%; height: 100%; border: 0; filter: saturate(.55) contrast(1.04) brightness(1.02); }
.foot-map-ask { position: absolute; inset: 0 38% 0 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 16px; text-align: center; }
.foot-map-pin { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(240, 90, 40, .16); box-shadow: 0 0 0 10px rgba(240, 90, 40, .07); animation: mapPulse 2.4s ease-in-out infinite; }
.foot-map-pin svg { width: 34px; height: 34px; fill: #FF7A45; stroke: #fff; stroke-width: 1.3; }
.foot-map-pin svg circle { fill: #fff; stroke: none; }
@keyframes mapPulse { 50% { box-shadow: 0 0 0 18px rgba(240, 90, 40, 0); } }
.foot-map-show { min-height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: #fff; color: var(--navy); font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); transition: background-color .25s, color .25s, transform .25s; }
.foot-map-show:hover { background: var(--orange); color: #fff; transform: translateY(-1px); }
.foot-map-show:focus-visible { outline: 2px solid #FF7A45; outline-offset: 3px; }
.foot-map-ask small { max-width: 34ch; font-size: .78rem; color: rgba(255, 255, 255, .6); }
/* info card */
.foot-map-card { position: absolute; top: clamp(20px, 2.4vw, 32px); right: clamp(20px, 3vw, 36px); width: min(340px, 36%); padding: 26px 26px 24px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55); }
.foot-map-kicker { margin: 0 0 6px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
footer .foot-map-card h4 { margin: 0 0 10px; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; text-transform: none; color: var(--ink); }
.foot-map-addr { margin: 0 0 8px; font-size: .98rem; line-height: 1.5; color: var(--ink); }
.foot-map-hours { margin: 0 0 18px; font-size: .86rem; color: var(--muted); }
.foot-map-actions { display: flex; flex-wrap: wrap; gap: 8px; }
footer .foot-map-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: 999px; font-size: .9rem; font-weight: 700; transition: background-color .25s, color .25s, border-color .25s; }
footer .foot-map-dir { background: var(--orange); color: #fff; }
footer .foot-map-dir:hover { background: #d9481a; color: #fff; }
footer .foot-map-call { border: 1.5px solid var(--line); color: var(--navy); }
footer .foot-map-call:hover { border-color: var(--navy); color: var(--navy); }
@media (max-width: 820px) {
  .foot-map-frame { height: 260px; }
  .foot-map-frame iframe { width: 100%; }
  .foot-map-ask { inset: 0; }
  .foot-map-card { position: static; width: auto; margin: 0; border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .foot-map-pin { animation: none; } }

/* ===================== Site search (js/search.js) ===================== */
.srch-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; transition: background-color .25s, border-color .25s, color .25s; }
.srch-btn svg, .srch svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.srch-btn svg { width: 18px; height: 18px; }
.srch-btn:hover { border-color: var(--orange); background: var(--orange); color: #fff; }
.header-cta .lang-switch + .srch-btn { margin-left: -8px; }
@media (max-width: 720px) { .srch-btn { width: 36px; height: 36px; } .header-cta .lang-switch + .srch-btn { margin-left: -12px; } }

html.srch-on { overflow: hidden; }
.srch { --srch-tint: #FFF3ED; width: min(700px, calc(100% - 32px)); max-width: none; max-height: none; margin: clamp(16px, 9vh, 96px) auto auto; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.srch::backdrop { background: rgba(12, 17, 44, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.srch[open] { animation: srchIn .24s cubic-bezier(.2, .8, .2, 1); }
.srch[open]::backdrop { animation: srchFade .24s ease-out; }
.srch.is-closing { animation: srchOut .16s ease-in forwards; }
.srch.is-closing::backdrop { animation: srchFade .16s ease-in reverse forwards; }
@keyframes srchIn { from { opacity: 0; transform: translateY(-12px) scale(.985); } }
@keyframes srchOut { to { opacity: 0; transform: translateY(-6px) scale(.99); } }
@keyframes srchFade { from { opacity: 0; } }
.srch-panel { display: flex; flex-direction: column; max-height: calc(100dvh - 2 * clamp(16px, 9vh, 96px)); border-radius: 24px; background: #fff; box-shadow: 0 30px 80px rgba(8, 12, 30, .35); overflow: hidden; }

/* the search bar, with an orange line that grows under it while typing */
.srch-bar { position: relative; display: flex; align-items: center; gap: 14px; margin: 0; padding: 12px 12px 12px 22px; border-bottom: 1px solid var(--card-line); }
.srch-bar::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: linear-gradient(90deg, var(--orange), #F4A27A); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.srch-bar:has(input:not(:placeholder-shown))::after { transform: scaleX(1); }
.srch-bar > svg { flex: none; width: 24px; height: 24px; color: var(--orange); stroke-width: 2.4; }
.srch-bar input { flex: 1; min-width: 0; height: 52px; padding: 0; border: 0; background: none; font: inherit; font-size: 1.2rem; font-weight: 600; letter-spacing: -.015em; color: var(--ink); caret-color: var(--orange); outline: none; }
.srch-bar input:focus-visible { outline: none; }
.srch-bar input::placeholder { color: #A3A8BC; font-weight: 500; }
.srch-bar input::-webkit-search-cancel-button { display: none; }
.srch-close { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--bg-soft); color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s, transform .25s; }
.srch-close svg { width: 18px; height: 18px; stroke-width: 2.4; }
.srch-close:hover { background: var(--orange); color: #fff; transform: rotate(90deg); }

.srch-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 18px 24px 10px; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }
.srch-head::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.srch-head:empty { display: none; }
.srch-list { flex: 1; margin: 0; padding: 0 12px 16px; list-style: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.srch-list li { margin: 0; }
.srch-list a { display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 8px; border-radius: 16px; color: var(--ink); text-decoration: none; transition: background-color .18s; }
.srch-list li[aria-selected="true"] a { background: var(--srch-tint); }
.srch-pic { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 14px; background: var(--bg-soft); color: var(--navy); overflow: hidden; }
.srch-pic.is-product { background: #fff; box-shadow: inset 0 0 0 1px var(--card-line); }
.srch-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.srch-pic.is-product img { object-fit: contain; }
.srch-list li[aria-selected="true"] .srch-pic img { transform: scale(1.06); }
.srch-pic > svg { width: 22px; height: 22px; }
.srch-txt { flex: 1; min-width: 0; }
.srch-txt strong { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--navy); transition: color .18s; }
.srch-list li[aria-selected="true"] .srch-txt strong { color: var(--ink); }
.srch-txt small { display: block; margin-top: 2px; font-size: .82rem; line-height: 1.4; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch-txt mark { padding: 0 1px; border-radius: 4px; background: rgba(240, 90, 40, .15); color: var(--orange-text); }
.srch-kind { flex: none; min-width: 76px; text-align: center; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: background-color .18s, color .18s; }
.srch-list li[aria-selected="true"] .srch-kind { background: #fff; color: var(--orange-text); }
.srch-go { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--orange); color: #fff; opacity: 0; transform: translateX(-6px) scale(.9); transition: opacity .2s, transform .2s; }
.srch-go svg { width: 16px; height: 16px; stroke-width: 2.6; }
.srch-list li[aria-selected="true"] .srch-go { opacity: 1; transform: none; }


/* nothing found */
.srch-empty { display: grid; justify-items: center; gap: 6px; padding: 30px 24px 34px; text-align: center; }
.srch-empty[hidden] { display: none; }
.srch-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: var(--srch-tint); color: var(--orange); }
.srch-empty-icon svg { width: 24px; height: 24px; stroke-width: 2.4; }
.srch-empty p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--grey); }
.srch-empty strong { font-size: 1.05rem; color: var(--ink); }
.srch-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.srch-empty-actions a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: .92rem; font-weight: 700; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
.srch-empty-actions .is-quote { background: var(--orange); color: #fff; }
.srch-empty-actions .is-quote:hover { background: #d9481a; color: #fff; }
.srch-empty-actions .is-call { border: 1.5px solid var(--line); color: var(--navy); }
.srch-empty-actions .is-call:hover { border-color: var(--orange); color: var(--orange-text); }

@media (max-width: 720px), (pointer: coarse) { .srch-kind { display: none; } }
/* phones: a full-screen sheet */
@media (max-width: 720px) {
  .srch { width: 100%; height: 100dvh; margin: 0; }
  .srch-panel { height: 100%; max-height: none; border-radius: 0; }
  .srch-bar { gap: 10px; padding: 8px 8px 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); }
  .srch-bar > svg { width: 22px; height: 22px; }
  .srch-bar input { font-size: 1.05rem; }
  .srch-close { width: 44px; height: 44px; background: none; }
  .srch-close svg { width: 22px; height: 22px; }
  .srch-head { padding: 16px 16px 8px; }
  .srch-list { padding: 0 8px 24px; }
  .srch-empty { padding: 28px 16px; }
}
@media (prefers-reduced-motion: reduce) { .srch[open], .srch.is-closing, .srch[open]::backdrop, .srch.is-closing::backdrop { animation: none; } .srch-close:hover { transform: none; } }
/* pages and ranges: an orange line icon on a soft tile, filled orange when picked */
.srch-pic.is-icon { background: var(--srch-tint); color: var(--orange); transition: background-color .2s, color .2s; }
.srch-pic.is-icon svg { width: 26px; height: 26px; stroke-width: 1.9; }
.srch-list li[aria-selected="true"] .srch-pic.is-icon { background: var(--orange); color: #fff; }
/* empty box: popular products as picture cards, four to a row (two on phones) */
.srch-list.is-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 20px 20px 22px; }
.srch-list.is-quick a { flex-direction: column; align-items: stretch; gap: 10px; height: 100%; padding: 8px 8px 12px; border: 1px solid var(--card-line); border-radius: 18px; text-align: center; transition: border-color .2s, background-color .2s, box-shadow .2s, transform .2s; }
.srch-list.is-quick a:hover, .srch-list.is-quick li[aria-selected="true"] a { border-color: rgba(240, 90, 40, .45); background: var(--srch-tint); box-shadow: 0 10px 24px rgba(240, 90, 40, .14); transform: translateY(-2px); }
.srch-list.is-quick .srch-pic { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; background: #fff; box-shadow: none; }
.srch-list.is-quick .srch-pic img { width: 88%; height: 88%; }
.srch-list.is-quick a:hover .srch-pic img, .srch-list.is-quick li[aria-selected="true"] .srch-pic img { transform: scale(1.06); }
.srch-list.is-quick .srch-txt strong { font-size: .92rem; line-height: 1.25; }
.srch-list.is-quick .srch-txt small { font-size: .74rem; }
.srch-list.is-quick .srch-kind, .srch-list.is-quick .srch-go { display: none; }
@media (max-width: 720px) {
  .srch-list.is-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px 16px 24px; }
}

/* ---------- search in the brand blues (replaces the orange accents) ---------- */
.srch { --srch-tint: #EEF3FC; }
.srch-btn:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.srch-bar::after { background: linear-gradient(90deg, var(--navy), var(--cyan)); }
.srch-bar > svg { color: var(--navy); }
.srch-bar input { caret-color: var(--navy); }
.srch-close:hover { background: var(--navy); color: #fff; }
.srch-head { color: var(--navy); }
.srch-head::before { content: none; }
.srch-list a:hover { background: var(--srch-tint); }
.srch-list li[aria-selected="true"] .srch-txt strong { color: var(--navy); }
.srch-txt mark { background: rgba(0, 176, 240, .16); color: var(--navy); }
.srch-list li[aria-selected="true"] .srch-kind { color: var(--navy); }
.srch-go { background: var(--navy); }
.srch-empty-icon { color: var(--navy); }
.srch-empty-actions .is-quote { background: var(--navy); }
.srch-empty-actions .is-quote:hover { background: var(--navy-dark); }
.srch-empty-actions .is-call:hover { border-color: var(--navy); color: var(--navy); }
.srch-pic.is-icon { color: var(--navy); }
.srch-list li[aria-selected="true"] .srch-pic.is-icon { background: var(--navy); color: #fff; }
.srch-list.is-quick a:hover, .srch-list.is-quick li[aria-selected="true"] a { border-color: rgba(42, 55, 141, .35); background: var(--srch-tint); box-shadow: 0 10px 24px rgba(42, 55, 141, .12); }