/* BUKA home concepts A, B, D — motion layer (round 3). Loaded only on A/B/D after concepts.css; C does not load it.
   Hidden start states exist only under .hc-pending (set in <head>, removed by concepts.js or after 3 s) and body.hc-motion (set by
   concepts.js), so without JS nothing is hidden. Everything moving uses transform/opacity/filter, except the accordion width. */
.hc { --ease-acc: cubic-bezier(.62, .05, .1, 1); }

/* ================================================================ hero card carousel (reference geometry)
   The ring has its own reserved box (height from the geometry: the front cards rise by r*sin(10deg), scaled by the perspective) and
   clips to it, so cards can never paint over the form, the CTA or the person line. concepts.js sets --r, --card, the box height
   and each card's visibility from the available width; the CSS values below are the no-JS fallback. */
.hc .hc-car { --card: 150px; --r: 600px; position: relative; width: 100%; height: calc((var(--r) * .1737 + var(--card) / 2) * 1.25 + var(--card) / 2 + 20px); margin: 28px auto 0; pointer-events: none; z-index: 1; overflow: hidden; contain: layout paint; }
.hc .hc-car__rot { position: absolute; left: 50%; top: calc((var(--r) * .1737 + var(--card) / 2) * 1.25 + 10px); width: 0; height: 0; transform-style: preserve-3d; transform: perspective(3000px) rotateX(10deg) rotateY(0deg); will-change: transform; }
.hc .hc-car__spoke { position: absolute; left: calc(var(--r) * -1); top: calc(var(--card) / -2); width: calc(var(--r) * 2); height: var(--card); display: flex; justify-content: space-between; transform-style: preserve-3d; transform: rotateY(var(--a)); }
.hc .hc-car__card { display: block; flex: none; width: var(--card); height: var(--card); border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); }
.hc .hc-car__card--l { transform: rotateY(-90deg); }
.hc .hc-car__card--r { transform: rotateY(90deg); }
.hc .hc-car--light .hc-car__card { box-shadow: 0 12px 28px -14px rgba(19, 19, 19, .28), 0 0 0 1px rgba(19, 19, 19, .04); }
.hc-motion .hc-car, .hc-pending .hc-car { opacity: 0; transition: opacity .9s ease-out; }
.hc-motion .hc-car.is-in { opacity: 1; }
@media (max-width: 1199px) { .hc .hc-car { --card: 112px; --r: 440px; } }
@media (max-width: 767px) { .hc .hc-car { --card: 72px; --r: 160px; margin-top: 20px; } }
/* A: under the hero form, above the person line; B: along the foot of the light hero; D: centred under the CTA */
.hc .hc-hero--a .hc-car { margin-top: 24px; }
.hc .hc-hero--a .hc-hero__person { margin-top: 4px; }
.hc .hc-hero--b { overflow: hidden; padding-bottom: 8px; }
.hc .hc-hero--b .hc-car { margin-top: 16px; }
.hc .hc-hero--d { overflow: hidden; padding-bottom: 8px; }
.hc .hc-hero--d .hc-car { margin-top: 20px; }
.hc .hc-hero-d__person { display: flex; justify-content: center; margin-top: 8px; }

/* ================================================================ hero intro (words blur in, then lead, form, person) */
.hc .hc-w { transition: opacity .6s ease-out, filter .6s ease-out; transition-delay: calc(var(--i, 0) * 65ms); }
.hc .is-armed .hc-w, .hc .is-armed.hc-w { opacity: 0; filter: blur(10px); }
.hc .is-armed.is-in .hc-w, .hc .is-in [data-split] .hc-w { opacity: 1; filter: none; }
.hc-pending .hc-intro [data-split], .hc-pending .hc-intro [data-intro] { opacity: 0; }
.hc .hc-intro [data-intro] { transition: opacity .7s ease-out, transform .7s var(--ease-expo); }
.hc .hc-intro.is-armed [data-intro] { opacity: 0; transform: translateY(14px); }
.hc .hc-intro.is-in [data-intro] { opacity: 1; transform: none; }
.hc .hc-intro.is-in .hc-lead[data-intro] { transition-delay: .35s; }
.hc .hc-intro.is-in .hc-heroform[data-intro], .hc .hc-intro.is-in .hc-formcard[data-intro], .hc .hc-intro.is-in .hc-hero-d__cta[data-intro] { transition-delay: .5s; }
.hc .hc-intro.is-in .hc-svcwrap[data-intro] { transition-delay: .6s; }
.hc .hc-intro.is-in .hc-hero__person[data-intro], .hc .hc-intro.is-in .hc-hero-d__person[data-intro] { transition-delay: 1.1s; }
.hc .hc-hero--a .hc-hero__bg { transition: transform 1.4s var(--ease-expo), opacity 1s ease-out; }
.hc .hc-hero--a.is-armed:not(.is-in) .hc-hero__bg { transform: scale(1.08); opacity: .55; }
/* section headings: same word reveal on scroll; inline icon circles grow in (reference "smarter / more adaptive" icons) */
.hc .hc-hicon { display: inline-grid; place-items: center; width: 52px; height: 52px; margin: 0 .08em; border-radius: 50%; vertical-align: middle; transform: translateY(-.06em); transition: transform .8s var(--ease-expo); transition-delay: calc(var(--i, 0) * 65ms); }
.hc .hc-hicon--grad { background: var(--grad-d); color: #fff; }
.hc .hc-hicon--amber { background: var(--accent); color: var(--ink); }
.hc .hc-hicon .hc-hicon__in { display: grid; place-items: center; } .hc .hc-hicon svg { width: 24px; height: 24px; }
.hc .is-armed .hc-hicon { transform: translateY(-.06em) scale(0); }
.hc .is-armed.is-in .hc-hicon { transform: translateY(-.06em) scale(1); }
@media (max-width: 767px) { .hc .hc-hicon { width: 36px; height: 36px; } .hc .hc-hicon svg { width: 18px; height: 18px; } }

/* ================================================================ block reveals (rise and settle) */
.hc-motion [data-reveal] { transition: opacity .7s ease-out, transform .9s var(--ease-expo); }
.hc-motion [data-reveal].is-armed:not(.is-in) { opacity: 0; transform: translateY(48px) scale(.97); }

/* ================================================================ tools ticker (reference: 50 px/s, 80 px gaps, no mask) */
.hc .hc-ticker { padding-block: 28px 32px; }
.hc .hc-ticker__head { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; }
.hc .hc-ticker__toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--subtle-2); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.hc .hc-ticker__toggle svg { width: 14px; height: 14px; fill: currentColor; }
.hc .hc-ticker__toggle.is-paused svg { display: none; }
.hc .hc-ticker__toggle.is-paused::before { content: ""; margin-left: 3px; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.hc .hc-ticker__toggle:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
.hc .hc-ticker__viewport { overflow: hidden; }
.hc .hc-ticker__track { display: flex; width: max-content; animation: hc-tick 40s linear infinite; }
.hc .hc-ticker__group { display: flex; align-items: center; gap: 80px; padding: 0 80px 0 0; margin: 0; list-style: none; }
.hc .hc-ticker__group li { display: flex; align-items: center; gap: 12px; height: 40px; flex: none; }
/* official logos at their natural ratio; heights chosen for equal optical weight (wordmark cap height about 18 px) */
.hc .hc-logo { display: block; width: auto; max-width: none; flex: none; }
/* round 5: single-colour logos at their own published colour (no filters, no opacity); Google is a plain word in the page font */
.hc .hc-logo--m { height: 23px; } .hc .hc-logo--s { height: 18px; } .hc .hc-logo--w { height: 29px; }
.hc .hc-logo--gt { height: auto; font: 500 27px/1 var(--font); letter-spacing: -.035em; color: #1c1c1c; white-space: nowrap; }
@media (max-width: 767px) { .hc .hc-logo--m { height: 20px; } .hc .hc-logo--s { height: 15px; } .hc .hc-logo--w { height: 25px; } .hc .hc-logo--gt { font-size: 23px; } }
.hc .hc-ticker__group .hc-tools__mark { width: 32px; height: 32px; }
.hc .hc-ticker__group .hc-tools__mark img, .hc .hc-ticker__group .hc-tools__mark svg { width: 32px; height: 32px; object-fit: contain; }
.hc .hc-ticker__group .hc-tools__name { font-size: 22px; font-weight: 500; letter-spacing: -.04em; color: #6f6b6e; }
.hc .is-user-paused .hc-ticker__track, .hc .hc-ticker.is-offscreen .hc-ticker__track { animation-play-state: paused; }
@keyframes hc-tick { to { transform: translateX(-50%); } }
@media (max-width: 767px) { .hc .hc-ticker__group { gap: 48px; padding-right: 48px; } .hc .hc-ticker__group .hc-tools__name { font-size: 18px; } .hc .hc-ticker__group .hc-tools__mark, .hc .hc-ticker__group .hc-tools__mark img, .hc .hc-ticker__group .hc-tools__mark svg { width: 26px; height: 26px; } }

/* ================================================================ service accordion with real photos
   >= 1200 px: side by side (reference); the open card shows its text column and the photo, closed cards show icon, title and link
   (their description and tags stay in the page and appear when the card opens). 768-1199 px: stacked rows, the open row shows the
   photo beside the text. < 768 px: stacked, the photo opens under the text. The photo is decorative (alt="", aria-hidden). */
.hc .hc-acc-shell { display: block; }
.hc .hc-acc-shell > .hc-acc { background: transparent; }
.hc .hc-acc { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* flex values are set at every width (they only apply inside the >= 1200 px flex row), so crossing the breakpoint never starts a
   flex-grow transition from 0 (which briefly squeezed the cards) */
.hc .hc-acc__item { min-width: 0; flex: 1 1 0; }
.hc .hc-acc__item.is-active { flex-grow: 2.6; }
.hc .hc-acc__card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; height: 100%; padding: clamp(20px, 2vw, 28px); border-radius: var(--r-s); background: #fff; overflow: hidden; }
.hc .hc-acc__item:not(.is-active) .hc-acc__card { cursor: pointer; }
.hc .hc-acc__body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hc .hc-acc__top { display: flex; align-items: center; justify-content: space-between; }
.hc .hc-acc__text h3 { margin-bottom: 10px !important; font-size: clamp(1.35rem, 1.1rem + .6vw, 1.6rem) !important; }
.hc .hc-acc__text p { color: var(--ink-2); font-size: 1rem; line-height: 1.6; max-width: 46ch; }
.hc .hc-acc__text .hc-chips { margin-top: 14px; }
.hc .hc-acc__text .hc-link { margin-top: 8px; }
.hc .hc-acc__card .hc-iconbox { transition: transform .5s var(--ease-expo); }
.hc .hc-acc__item.is-active .hc-iconbox { transform: rotate(-8deg) scale(1.06); }
.hc .hc-acc__vis { position: relative; display: grid; grid-template-rows: 0fr; min-height: 0; opacity: 0; border-radius: var(--r-s); overflow: hidden; background: transparent; transition: grid-template-rows .45s var(--ease-acc), opacity .35s ease-out, margin .45s var(--ease-acc); }
.hc .hc-acc__item.is-active .hc-acc__vis { grid-template-rows: 1fr; opacity: 1; margin-top: 18px; }
.hc .hc-acc__visin { position: relative; min-height: 0; overflow: hidden; border-radius: var(--r-s); }
.hc .hc-acc__photo, .hc .hc-acc__art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10 !important; object-fit: cover; border-radius: var(--r-s); transform: scale(1.06); transition: transform 1s var(--ease-expo) .1s; }
.hc .hc-acc__item.is-active .hc-acc__photo, .hc .hc-acc__item.is-active .hc-acc__art { transform: none; }
/* a soft shade at the foot of the photo keeps it calm next to the white card */
.hc .hc-acc__visin::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(19, 19, 19, 0) 55%, rgba(19, 19, 19, .22) 100%); pointer-events: none; }
@media (min-width: 768px) and (max-width: 1199.98px) {
  .hc .hc-acc__card { grid-template-columns: minmax(0, 1fr) 0fr; transition: grid-template-columns .45s var(--ease-acc); }
  .hc .hc-acc__item.is-active .hc-acc__card { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 28px; }
  .hc .hc-acc__vis, .hc .hc-acc__item.is-active .hc-acc__vis { grid-template-rows: 1fr; margin-top: 0; }
  .hc .hc-acc__visin { height: 100%; min-height: 0; }
  .hc .hc-acc__item.is-active .hc-acc__visin { min-height: 260px; }
  .hc .hc-acc__photo, .hc .hc-acc__art { position: absolute; inset: 0; height: 100%; aspect-ratio: auto !important; }
  .hc .hc-acc__item:not(.is-active) .hc-acc__text p, .hc .hc-acc__item:not(.is-active) .hc-acc__text .hc-chips { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hc .hc-acc__item:not(.is-active) .hc-acc__body { flex-direction: row; align-items: center; gap: 18px; }
  .hc .hc-acc__item:not(.is-active) .hc-acc__top { gap: 14px; }
  .hc .hc-acc__item:not(.is-active) .hc-acc__text { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; flex: 1; }
  .hc .hc-acc__item:not(.is-active) .hc-acc__text h3 { margin: 0 !important; }
  .hc .hc-acc__item:not(.is-active) .hc-acc__text .hc-link { margin: 0; }
}
@media (min-width: 1200px) {
  .hc .hc-acc { display: flex; gap: 12px; height: 440px; }
  .hc .hc-acc__item { transition: flex-grow .45s var(--ease-acc); }
  .hc .hc-acc__card { display: flex; gap: 0; height: 100%; }
  .hc .hc-acc__body { flex: 1 1 auto; justify-content: space-between; min-width: 0; }
  .hc .hc-acc__item.is-active .hc-acc__body { flex: 0 0 min(330px, 48%); }
  .hc .hc-acc__vis, .hc .hc-acc__item.is-active .hc-acc__vis { display: block; flex: 1 1 0; width: auto; margin: 0; grid-template-rows: none; }
  .hc .hc-acc__vis { max-width: 0; transition: max-width .45s var(--ease-acc), opacity .3s ease-out, margin .45s var(--ease-acc); }
  .hc .hc-acc__item.is-active .hc-acc__vis { max-width: 100%; margin-left: 24px; opacity: 1; transition: max-width .45s var(--ease-acc), opacity .4s ease-out .2s, margin .45s var(--ease-acc); }
  .hc .hc-acc__visin { height: 100%; }
  .hc .hc-acc__photo, .hc .hc-acc__art { height: 100%; aspect-ratio: auto !important; }
  /* closed cards: icon, number, title and link; description and tags are visually hidden (screen readers still read them) */
  .hc .hc-acc__item:not(.is-active) .hc-acc__text p, .hc .hc-acc__item:not(.is-active) .hc-acc__text .hc-chips { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hc .hc-acc--d { height: 470px; }
}
/* closed cards keep at least ~210 px of text width at every laptop size, so "Explore paid advertising" stays on one line */
@media (min-width: 1200px) { .hc .hc-acc__item.is-active { flex-grow: 2.6; } .hc .hc-acc__item.is-active .hc-acc__body { flex-basis: min(300px, 50%); } .hc .hc-acc__item .hc-acc__card { padding: 24px; } }
@media (min-width: 1200px) and (max-width: 1535.98px) { .hc .hc-acc__item.is-active { flex-grow: 2.35; } }
@media (min-width: 1200px) and (max-width: 1279.98px) { .hc .hc-acc__item.is-active { flex-grow: 2; } }

/* ================================================================ "120" card counterpart: portrait + verified number + directions
   The portrait has its own frame (nothing laid over the face apart from the small location pill in its top corner); the text sits
   on its own white surface below it. */
.hc .hc-who { position: relative; margin: 0; display: grid; grid-template-rows: minmax(260px, 1fr) auto; gap: 12px; padding: 12px; border-radius: var(--r); background: var(--subtle); }
.hc .hc-who__photo { position: relative; min-height: 260px; border-radius: var(--r-s); overflow: hidden; background: #e9e3e1; }
.hc .hc-who__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; transition: transform 1.4s var(--ease-expo); }
.hc-motion .hc-who.is-armed:not(.is-in) .hc-who__photo > img { transform: scale(1.08); }
.hc .hc-who .hc-pill { top: 14px; left: 14px; font-size: 13px; padding: 6px 12px; }
.hc .hc-who__panel { display: grid; gap: 6px; padding: 20px 22px 22px; border-radius: var(--r-s); background: #fff; color: var(--ink); }
.hc .hc-who__num { display: flex; align-items: baseline; gap: 10px; line-height: 1; margin-top: 6px !important; }
.hc .hc-who__num > span:first-child { font-size: clamp(3.4rem, 2.6rem + 2.4vw, 4.6rem); font-weight: 500; letter-spacing: -.06em; font-variant-numeric: tabular-nums; min-width: .7em; }
.hc .hc-who__unit { font-size: 1.25rem; font-weight: 500; letter-spacing: -.03em; }
.hc .hc-who__cap { color: var(--ink-2); font-size: .95rem; }
.hc .hc-who__dirs { display: flex; gap: 10px; margin-top: 8px; }
.hc .hc-dir { position: relative; display: grid; align-content: start; gap: 5px; width: 64px; height: 46px; padding: 8px; border-radius: 8px; background: var(--subtle); transition: transform .6s var(--ease-expo), opacity .5s ease-out, box-shadow .4s ease-out; }
.hc .hc-dir i { display: block; height: 4px; border-radius: 2px; background: #d9d6d8; } .hc .hc-dir i:first-child { width: 70%; background: var(--ink); } .hc .hc-dir i:last-child { width: 45%; }
.hc .hc-dir--pick { background: #fff; box-shadow: 0 0 0 2px var(--magenta); }
.hc .hc-dir b { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--grad-d); color: #fff; transition: transform .5s var(--ease-expo) .9s; }
.hc .hc-dir b svg { width: 13px; height: 13px; }
.hc-motion .hc-who.is-armed .hc-dir { opacity: 0; transform: translateY(14px); }
.hc-motion .hc-who.is-in .hc-dir { opacity: 1; transform: none; }
.hc-motion .hc-who.is-in .hc-dir:nth-child(2) { transition-delay: .12s; } .hc-motion .hc-who.is-in .hc-dir:nth-child(3) { transition-delay: .24s; }
.hc-motion .hc-who.is-in .hc-dir--pick { transform: translateY(-4px) scale(1.06); transition-delay: .12s, .12s, .8s; }
.hc-motion .hc-who.is-armed:not(.is-in) .hc-dir b { transform: scale(0); }
.hc .hc-bento--m .hc-who { grid-row: span 2; }
.hc .hc-bento--b { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
.hc .hc-bento--b .hc-bento__card--soft { grid-row: auto; }
.hc .hc-bento--b .hc-bento__card--ink { grid-template-columns: 1fr; align-content: end; }
.hc .hc-bento--dm .hc-who { grid-template-rows: minmax(300px, 1fr) auto; }
@media (max-width: 991px) { .hc .hc-bento--b { grid-template-columns: 1fr 1fr; } .hc .hc-bento--b .hc-who { grid-column: 1 / -1; } }
@media (max-width: 599px) { .hc .hc-bento--b { grid-template-columns: 1fr; } .hc .hc-who { grid-template-rows: auto auto; } .hc .hc-who__photo { min-height: 0; aspect-ratio: 1 / 1; } .hc .hc-who__photo > img { object-position: 50% 30%; } }

/* ================================================================ process ("Expertise" counterpart) */
.hc .hc-proc__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .hc .hc-proc__grid { grid-template-columns: 1fr 1fr; } }
.hc .hc-proc__grid > li { display: grid; align-content: start; justify-items: center; gap: 8px; padding: 24px 24px 32px; text-align: center; overflow: hidden; }
.hc .hc-proc__grid h3 { margin-top: 8px !important; }
.hc .hc-proc__grid p { color: var(--ink-2); max-width: 46ch; }
.hc .hc-mini { position: relative; width: min(100%, 420px); height: 280px; }
.hc .hc-mini [data-in] { transition: opacity .6s ease-out, transform .9s var(--ease-expo); transition-delay: calc(var(--k, 0) * 110ms + .15s); }
.hc-motion [data-reveal].is-armed:not(.is-in) .hc-mini [data-in] { opacity: 0; transform: translateY(70px) rotate(-5deg); }
.hc-motion [data-reveal].is-armed:not(.is-in) .hc-mini__list [data-in] { transform: translateX(20px); }
.hc .hc-mini__back { position: absolute; top: 34px; right: 26px; width: 210px; padding: 18px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 1.05rem; font-weight: 500; line-height: 1.25; letter-spacing: -.02em; text-align: left; transform: rotate(6deg); box-shadow: var(--shadow-card); }
.hc .hc-mini__back--r { right: auto; left: 0; top: 18px; width: 170px; transform: rotate(-6deg); }
.hc .hc-mini__card { position: absolute; left: 50%; bottom: 14px; width: 270px; margin-left: -135px; padding: 12px; border: 5px solid var(--subtle); border-radius: 16px; background: #fff; text-align: left; box-shadow: var(--shadow-card); }
.hc .hc-mini--talk .hc-mini__card { margin-left: -160px; }
.hc .hc-mini--build .hc-mini__card { margin-left: -70px; width: 260px; }
.hc .hc-mini__dark { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; }
.hc .hc-mini__dark em { font-style: normal; font: 500 11px/1 var(--mono); letter-spacing: .1em; padding: 4px 8px; border-radius: 20px; background: rgba(179, 16, 94, .35); }
.hc .hc-marq { overflow: hidden; margin-top: 10px; }
.hc .hc-marq__track { display: flex; width: max-content; animation: hc-tick 22s linear infinite; }
.hc .hc-marq--r .hc-marq__track { animation-direction: reverse; animation-duration: 26s; }
.hc .hc-marq ul { display: flex; gap: 6px; padding-right: 6px; margin: 0; list-style: none; }
.hc .hc-marq li { padding: 6px 12px; border-radius: 20px; background: var(--subtle); font-size: 12px; white-space: nowrap; color: var(--ink-2); }
.hc .hc-marq.is-offscreen .hc-marq__track { animation-play-state: paused; }
.hc .hc-mini__dir { position: absolute; top: 56px; left: 50%; display: grid; align-content: start; gap: 8px; width: 120px; height: 158px; padding: 12px; border: 5px solid var(--subtle); border-radius: 14px; background: #fff; box-shadow: var(--shadow-card); }
.hc .hc-mini__dir:nth-child(1) { margin-left: -190px; transform: rotate(-8deg); } .hc .hc-mini__dir:nth-child(2) { margin-left: -60px; top: 36px; z-index: 2; } .hc .hc-mini__dir:nth-child(3) { margin-left: 70px; transform: rotate(8deg); }
.hc .hc-mini__bar { height: 26px; border-radius: 6px; background: var(--ink); } .hc .hc-mini__dir:nth-child(3) .hc-mini__bar { background: var(--subtle-2); }
.hc .hc-mini__line { height: 6px; border-radius: 3px; background: var(--subtle-2); } .hc .hc-mini__line--s { width: 60%; }
.hc .hc-mini__btn { width: 54px; height: 16px; margin-top: 6px; border-radius: 8px; background: var(--accent); }
.hc .hc-mini__dir--pick { box-shadow: 0 0 0 2px var(--magenta), var(--shadow-card); }
.hc .hc-mini__check { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 20px; background: var(--grad-d); color: #fff; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: transform .5s var(--ease-expo) .9s, opacity .4s ease-out .9s; }
.hc .hc-mini__check svg { width: 14px; height: 14px; }
.hc-motion [data-reveal].is-armed:not(.is-in) .hc-mini__check { opacity: 0; transform: translateX(-50%) scale(.6); }
.hc .hc-mini__title { font-weight: 500; font-size: 14px; margin: 2px 0 10px !important; }
.hc .hc-mini__progress { height: 8px; border-radius: 4px; background: var(--subtle); overflow: hidden; }
.hc .hc-mini__progress span { display: block; height: 100%; width: 100%; border-radius: 4px; background: var(--grad); transform-origin: left; transition: transform 1.1s cubic-bezier(.65, 0, .35, 1) .55s; }
.hc-motion [data-reveal].is-armed:not(.is-in) .hc-mini__progress span { transform: scaleX(0); }
.hc .hc-mini__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.hc .hc-mini__list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--subtle); font-size: 12.5px; }
.hc .hc-mini__list svg { width: 14px; height: 14px; padding: 3px; border-radius: 50%; background: var(--ink); color: #fff; box-sizing: content-box; flex: none; }
.hc .hc-orbit__ring { position: absolute; left: 50%; top: 50%; border: 1px solid #e7e7e7; border-radius: 50%; transform: translate(-50%, -50%); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease-out; }
.hc .hc-orbit__ring--1 { width: 300px; height: 258px; } .hc .hc-orbit__ring--2 { width: 220px; height: 190px; } .hc .hc-orbit__ring--3 { width: 140px; height: 120px; }
.hc .hc-orbit__center { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-card); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) .1s; }
.hc .hc-orbit__center img { width: 52px; height: auto; }
.hc .hc-orbit__pill { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 20px; background: #fff; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .04); font-size: 12px; font-weight: 500; white-space: nowrap; transform: translate(-50%, -50%); transition: opacity .5s ease-out .3s; }
.hc .hc-orbit__pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--grad-d); }
.hc-motion [data-reveal].is-armed:not(.is-in) .hc-orbit__ring, .hc-motion [data-reveal].is-armed:not(.is-in) .hc-orbit__center { transform: translate(-50%, -50%) scale(0); }
.hc-motion [data-reveal].is-armed:not(.is-in) .hc-orbit__center { transform: scale(0); }
.hc-motion [data-reveal].is-armed:not(.is-in) .hc-orbit__pill { opacity: 0; }
@media (max-width: 479px) { .hc .hc-mini { transform: scale(.82); transform-origin: 50% 40%; height: 240px; } }

/* ================================================================ reduced motion: a meaningful still view */
@media (prefers-reduced-motion: reduce) {
  .hc .hc-ticker__track { animation: none; width: auto; justify-content: center; }
  .hc .hc-ticker__group { flex-wrap: wrap; justify-content: center; gap: 20px 48px; padding: 0 20px; }
  .hc .hc-ticker__group[aria-hidden="true"], .hc .hc-ticker__group li[aria-hidden="true"] { display: none; }
  .hc .hc-ticker__toggle { display: none; }
  .hc .hc-marq__track { animation: none; }
  .hc .hc-acc__item, .hc .hc-acc__vis, .hc .hc-acc__visin, .hc .hc-car { transition: none !important; }
}
/* word spans stay inline (site.css makes hero H1 spans block-level for the live two-line H1) */
.t-soft4 .hc .hero h1 .hc-w, .hc h1 .hc-w, .hc h2 .hc-w { display: inline; }
@media (max-width: 479px) { .hc .hc-mini--build .hc-mini__back--r { top: 0; left: 50%; margin-left: -150px; width: 210px; transform: rotate(-4deg); } .hc .hc-mini--build .hc-mini__card { margin-left: -110px; } .hc .hc-mini--talk .hc-mini__back { top: 6px; right: 0; } }

/* ================================================================ round 4: header (A, B, D only; the shared header markup is unchanged)
   Aligned with the page grid; logo at its natural ratio; logo, CTA and menu button never shrink. Below 1200 px the full link row
   no longer fits with comfortable gaps, so the compact menu (the existing Menu button and panel) takes over earlier than the live
   site's 960 px, while the CTA stays visible. */
.hc .s1-header .container { width: min(100% - 2 * var(--gutter), var(--wrap)); gap: 16px; }
.hc .s1-header .logo-link { flex: none; }
.hc .s1-header .logo-link img { width: 132px; height: auto; aspect-ratio: 240 / 92; }
.hc .s1-header .header-cta, .hc .s1-header .s1-nav-toggle { flex: none; white-space: nowrap; }
.hc .s1-header .site-nav { min-width: 0; }
@media (min-width: 1200px) { .hc .s1-header .site-nav ul { gap: 6px; } .hc .s1-header .site-nav a { padding: 8px 10px; } }
@media (min-width: 960px) and (max-width: 1199.98px) {
  .hc .s1-header .s1-nav-toggle { display: inline-flex; min-height: 44px; border-radius: 80px; padding: 0 16px; font: 500 14px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
  .hc .s1-header .site-nav { display: none; }
  .hc .s1-header.is-open .site-nav { display: block; position: absolute; left: 0; right: 0; top: 100%; padding: 12px var(--gutter) 24px; background: #fff; box-shadow: var(--shadow-soft); border-radius: 0 0 var(--r) var(--r); }
  .hc .s1-header.is-open .site-nav ul { flex-direction: column; gap: 2px; max-width: var(--wrap); margin-inline: auto; }
  .hc .s1-header .site-nav .nav-more { display: list-item; }
  .hc .s1-header .site-nav a, .hc-a .s1-header .site-nav a { min-height: 44px; display: flex; align-items: center; padding: 8px 10px; color: var(--ink); font-size: 14px; }
  .hc .s1-header .header-cta { padding: 13px 18px; }
}
.hc .s1-header .s1-nav-toggle:focus-visible, .hc .s1-header .header-cta:focus-visible, .hc .s1-header .logo-link:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
/* A: the header floats over the dark hero, so the hero keeps a top inset of header height + breathing room */
.hc .hc-hero--a { padding-top: calc(var(--buka-header-h, 72px) + 56px); }
@media (max-width: 767px) { .hc .hc-hero--a { padding-top: calc(var(--buka-header-h, 64px) + 40px); } }
.hc main [id] { scroll-margin-top: calc(var(--buka-header-h, 72px) + 16px); }

/* ================================================================ round 4: spacing and density (laptop first) */
.hc .hc-section { padding-block: clamp(56px, 5.2vw, 96px); }
.hc .hc-head { margin-bottom: clamp(28px, 3.6vw, 56px); }
.hc .hc-head h2 + .hc-sub { margin-top: 16px; }
.hc main h2 { font-size: clamp(2rem, 1.35rem + 1.75vw, 2.875rem); }
/* bentos: no tall empty boxes; the portrait card leads, the small facts stack beside it */
.hc .hc-bento { gap: 12px; }
.hc .hc-bento__card { padding: clamp(20px, 2vw, 28px); }
/* The portrait source is 400 px square, so its frame never grows past ~340 px: from 600 px up the card is two columns (portrait |
   text), below that the portrait is a square above the text. Each bento places the portrait card in a wide cell. */
@media (min-width: 600px) {
  .hc .hc-who { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); grid-template-rows: auto; align-items: stretch; }
  .hc .hc-who__photo { min-height: 300px; }
  .hc .hc-who__panel { align-content: center; }
}
.hc .hc-bento > * { min-width: 0; }
.hc .hc-bento .hc-bento__card--soft, .hc .hc-bento .hc-bento__card--text { grid-row: auto; align-content: center; }
.hc .hc-bento .hc-bento__card--soft .hc-link { margin-top: 4px; align-self: start; }
.hc .hc-bento .hc-bento__card--ink { grid-template-columns: 1fr; align-content: end; gap: 6px; }
.hc .hc-bento .hc-bento__card--grad { align-content: center; }
.hc .hc-bento--m, .hc .hc-bento--b, .hc .hc-bento--d { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
.hc .hc-bento .hc-who { grid-row: auto; }
@media (min-width: 600px) {
  .hc .hc-bento--m { grid-template-columns: 1fr 1fr; grid-template-areas: "who who" "lon grad" "rep rep"; }
  .hc .hc-bento--b { grid-template-columns: 1fr 1fr; grid-template-areas: "who who" "lon rep"; }
  .hc .hc-bento--d { grid-template-columns: 1fr 1fr; grid-template-areas: "who who" "txt rep"; }
}
@media (min-width: 992px) {
  .hc .hc-bento--m { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "who grad" "lon rep"; }
  .hc .hc-bento--b { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "who lon" "who rep"; }
  .hc .hc-bento--d { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "who txt" "who rep"; }
}
@media (min-width: 600px) {
  .hc .hc-bento .hc-who { grid-area: who; }
  .hc .hc-bento--m .hc-bento__card--soft, .hc .hc-bento--b .hc-bento__card--soft { grid-area: lon; }
  .hc .hc-bento--m .hc-bento__card--grad { grid-area: grad; }
  .hc .hc-bento .hc-bento__card--ink { grid-area: rep; }
  .hc .hc-bento--d .hc-bento__card--text { grid-area: txt; }
}
.hc .hc-bento__card--text h2 { font-size: clamp(1.6rem, 1.3rem + .8vw, 2rem) !important; }
.hc .hc-contact-a { padding-block: 0 clamp(24px, 3vw, 40px); }
/* B hero: lighter service list (one line each; the full descriptions are in the accordion below) */
.hc .hc-svcstack { gap: 10px; }
.hc .hc-svcrow { padding: 18px 20px; gap: 14px; align-items: start; }
.hc .hc-svcrow__t { font-size: clamp(1.15rem, 1rem + .4vw, 1.3rem) !important; margin: 4px 0 4px !important; padding-right: 32px; }
.hc .hc-svcrow p { font-size: .975rem; }
.hc .hc-svcrow .hc-link { min-height: 40px; }
.hc .hc-svcrow__n { top: 20px; right: 20px; }
.hc .hc-svcrow--more { padding: 12px 18px; }
@media (min-width: 992px) { .hc .hc-hero-b { gap: clamp(32px, 4vw, 64px); } .hc .hc-svcwrap { align-self: center; } }

/* links whose text may wrap (narrow cards): the arrow follows the last word instead of floating to the far edge */
.hc .hc-acc__text .hc-link { display: block; min-height: 0; margin-top: 10px; padding-block: 8px; line-height: 1.5; }
.hc .hc-acc__text .hc-link .hc-link__i { display: inline-block; margin-left: 6px; vertical-align: -2px; }
/* A: the header floats inside the rounded hero card (12 px from the page edge), so its contents line up with the hero's own inset */
.hc-a .s1-header .container { width: min(100% - 2 * (var(--gutter) + 12px), var(--wrap)); }

/* ================================================================ round 5 */
/* --- Google reviews line (hero). Google's guidance: "on Google", an as-of date, the G logo, no stars by the Google name or logo */
.hc .hc-greviews { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 0; max-width: none; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.hc .hc-greviews__g { width: 20px; height: 20px; flex: none; }
.hc .hc-greviews strong { font-weight: 600; color: var(--ink); }
.hc .hc-greviews__asof { color: var(--ink-3); white-space: nowrap; }
.hc .hc-greviews__link { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--magenta); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.hc .hc-greviews__link .hc-link__i svg { width: 14px; height: 14px; display: block; }
.hc .hc-greviews--light { color: rgba(255, 255, 255, .82); }
.hc .hc-greviews--light strong { color: #fff; } .hc .hc-greviews--light .hc-greviews__asof { color: rgba(255, 255, 255, .66); } .hc .hc-greviews--light .hc-greviews__link { color: #fff; }
.hc .hc-greviews__g { background: #fff; border-radius: 50%; padding: 2px; box-sizing: content-box; }
.hc .hc-hero__person, .hc .hc-hero-d__person { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hc .hc-greviews--b { justify-content: flex-start; margin-top: 12px; }

/* --- preview label (sections that only exist in the design preview) */
.hc .hc-previewnote { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 18px 0 0; padding: 10px 14px; max-width: 760px; border: 1px dashed var(--grey-300); border-radius: var(--r-s); font-size: 13.5px; color: var(--ink-2); }
.hc .hc-previewnote span { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--magenta); }
.hc .hc-previewnote a { color: var(--magenta); text-decoration: underline; text-underline-offset: 2px; }

/* --- slider frame (native scroller; concepts.js adds glide, drag and autoplay) */
.hc .hc-sl { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hc .hc-sl::-webkit-scrollbar { display: none; }
.hc .hc-sl.is-gliding, .hc .hc-sl.is-dragging { scroll-snap-type: none; }
.hc .hc-sl.is-dragging { cursor: grabbing; user-select: none; }
@media (hover: hover) and (pointer: fine) { .hc .hc-sl { cursor: grab; } }
.hc .hc-sl:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; border-radius: var(--r); }
.hc .hc-sl__track { display: flex; margin: 0; padding: 0; list-style: none; }
.hc .hc-sl__track > li { flex: none; scroll-snap-align: start; }
.hc .hc-sl__ctrl { display: flex; gap: 10px; flex: none; }
.hc .hc-sl__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--subtle); color: var(--ink); cursor: pointer; transition: background-color .2s ease, transform .16s ease-out; }
.hc .hc-sl__btn:hover { background: var(--subtle-2); } .hc .hc-sl__btn:active { transform: scale(.96); }
.hc .hc-sl__btn svg { width: 20px; height: 20px; }
.hc .hc-sl__btn:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
.hc .hc-sl__pause svg { width: 14px; height: 14px; fill: currentColor; }
.hc .hc-sl__pause.is-paused svg { display: none; } .hc .hc-sl__pause.is-paused::before { content: ""; margin-left: 3px; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.hc .hc-sl-static .hc-sl__ctrl [data-sl-prev], .hc .hc-sl-static .hc-sl__ctrl [data-sl-next] { display: none; }
.hc .hc-testi__head, .hc .hc-blog__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.hc .hc-testi__head h2, .hc .hc-blog__head h2 { max-width: 18ch; }
.hc .hc-testi__head .hc-sub, .hc .hc-blog__head .hc-sub { margin-top: 14px; max-width: 52ch; }

/* --- testimonials (reference card: 439 x 480, 24 px radius, 10 px gap; full-bleed row that starts at the page grid) */
.hc .hc-testi .hc-sl { margin-top: clamp(28px, 3.4vw, 48px); --inset: max(var(--gutter), calc((100% - var(--wrap)) / 2)); scroll-padding-inline: var(--inset); }
.hc .hc-testi .hc-sl__track { gap: 10px; padding-inline: var(--inset); }
.hc .hc-tcard { position: relative; width: 439px; height: 480px; border-radius: 24px; overflow: hidden; color: #fff; isolation: isolate; }
.hc .hc-tcard--g1 { background: linear-gradient(160deg, #3a2a35 0%, #6c2a52 60%, #b3105e 100%); }
.hc .hc-tcard--g2 { background: linear-gradient(160deg, #2d2d2d 0%, #4b3b2a 55%, #c47d12 100%); }
.hc .hc-tcard--g3 { background: linear-gradient(160deg, #23202a 0%, #3b2457 60%, #941762 100%); }
.hc .hc-tcard--g4 { background: linear-gradient(160deg, #2b2b2b 0%, #5a3147 55%, #e2a01a 100%); }
.hc .hc-tcard--g5 { background: linear-gradient(160deg, #262626 0%, #47323e 60%, #8f3b6a 100%); }
.hc .hc-tcard--g6 { background: linear-gradient(160deg, #2a2724 0%, #54412a 55%, #b46f14 100%); }
.hc .hc-tcard__art { position: absolute; inset: 0; z-index: -1; }
.hc .hc-tcard__logo { position: absolute; top: 20px; left: 20px; padding: 6px 12px; border: 1px dashed rgba(255, 255, 255, .45); border-radius: 80px; font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.hc .hc-tcard__ph { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); width: 128px; height: 128px; display: grid; place-items: center; padding: 14px; border: 1px dashed rgba(255, 255, 255, .4); border-radius: 50%; font-size: 12px; line-height: 1.35; text-align: center; color: rgba(255, 255, 255, .72); }
.hc .hc-tcard__body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 10px; padding: 22px; background: linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, .55) 45%); }
.hc .hc-tcard__badge { justify-self: start; padding: 4px 10px; border-radius: 80px; background: rgba(255, 255, 255, .16); font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hc .hc-tcard__q { width: 28px; height: 21px; color: rgba(255, 255, 255, .9); }
.hc .hc-tcard__quote { font-size: 1.3rem; line-height: 1.3; letter-spacing: -.02em; max-width: 24ch; }
.hc .hc-tcard__who { justify-self: end; font-size: .95rem; color: rgba(255, 255, 255, .82); }
@media (max-width: 991px) { .hc .hc-tcard { width: 360px; height: 420px; } }
@media (max-width: 599px) { .hc .hc-tcard { width: min(82vw, 340px); height: 400px; } .hc .hc-tcard__quote { font-size: 1.15rem; } }

/* --- blog (reference card: square, 24 px radius, title on the photo; hover zooms the photo to 1.1) */
.hc .hc-blog .hc-sl { margin-top: clamp(28px, 3.4vw, 48px); }
.hc .hc-blog .hc-sl__track { gap: 20px; }
.hc .hc-post { position: relative; width: calc((100% - 40px) / 3); aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden; background: var(--subtle-2); color: #fff; isolation: isolate; }
.hc .hc-post__img { position: absolute; inset: 0; z-index: -1; }
.hc .hc-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-expo); }
@media (hover: hover) { .hc .hc-post:hover .hc-post__img img { transform: scale(1.1); } }
.hc .hc-post__body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; padding: 22px; background: linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, .72) 55%); }
.hc .hc-post__badge { justify-self: start; padding: 4px 10px; border-radius: 80px; background: rgba(255, 255, 255, .92); color: var(--ink); font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hc .hc-post__title { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.55rem) !important; line-height: 1.2 !important; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.hc .hc-post__cat { font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
@media (max-width: 991px) { .hc .hc-post { width: calc((100% - 20px) / 2.15); } }
@media (max-width: 599px) { .hc .hc-post { width: 84%; } }

/* --- closing CTA with photo: the photo layer zooms 1.3 -> 1 (~1 s, cubic-bezier(.4,.8,.2,1) fitted to the reference samples) */
.hc .hc-ctaph { padding-block: clamp(24px, 3vw, 40px); }
.hc .hc-ctaph__panel { position: relative; margin-inline: 12px; border-radius: var(--r); overflow: hidden; color: #fff; isolation: isolate; background: #22303f; }
.hc .hc-ctaph__media { position: absolute; inset: 0; z-index: -1; transform-origin: 50% 50%; transition: transform 1s cubic-bezier(.4, .8, .2, 1); }
.hc .hc-ctaph__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }
.hc .hc-ctaph__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 16, 28, .76) 0%, rgba(10, 16, 28, .6) 46%, rgba(10, 16, 28, .18) 68%, rgba(10, 16, 28, .04) 100%); }
.hc-motion .hc-ctaph__panel.is-armed:not(.is-in) .hc-ctaph__media { transform: scale(1.3); }
.hc .hc-ctaph__in { display: grid; gap: 32px; width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding-block: clamp(36px, 5vw, 72px); }
@media (min-width: 992px) { .hc .hc-ctaph__in { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); align-items: center; gap: clamp(32px, 5vw, 80px); } }
.hc .hc-ctaph__copy h2 { color: #fff; max-width: 16ch; }
.hc .hc-ctaph__copy > p:not(.hc-status) { margin-top: 16px; color: rgba(255, 255, 255, .9); font-size: 1.0625rem; max-width: 46ch; }
.hc .hc-ctaph .hc-status { background: rgba(255, 255, 255, .14); color: #fff; }
.hc .hc-ctaph .hc-status .dot { background: var(--status); }
.hc .hc-ctaph__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.hc .hc-ctaph__actions .hc-link { color: #fff; }
.hc .hc-ctaph .hc-alt { margin-top: 28px; }
.hc .hc-ctaph .hc-alt a { color: #fff; }
.hc .hc-ctaph .hc-formcard { color: var(--ink); }
.hc .hc-ctaph--b .hc-ctaph__media::after { background: linear-gradient(270deg, rgba(10, 16, 28, .76) 0%, rgba(10, 16, 28, .6) 46%, rgba(10, 16, 28, .18) 68%, rgba(10, 16, 28, .04) 100%); }
@media (min-width: 992px) { .hc .hc-ctaph--b .hc-ctaph__in { grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); } .hc .hc-ctaph--b .hc-formcard { order: -1; } }
.hc .hc-ctaph--d .hc-ctaph__media::after { background: linear-gradient(90deg, rgba(10, 16, 28, .72) 0%, rgba(10, 16, 28, .56) 50%, rgba(10, 16, 28, .16) 72%, rgba(10, 16, 28, .04) 100%), linear-gradient(0deg, rgba(10, 16, 28, .35), rgba(10, 16, 28, 0) 40%); }
@media (min-width: 992px) { .hc .hc-ctaph--d .hc-ctaph__in { grid-template-columns: minmax(0, 1.1fr) minmax(340px, 420px); } }
@media (max-width: 991px) { .hc .hc-ctaph__media::after, .hc .hc-ctaph--b .hc-ctaph__media::after { background: linear-gradient(180deg, rgba(10, 16, 28, .8) 0%, rgba(10, 16, 28, .62) 50%, rgba(10, 16, 28, .5) 100%); } }
@media (max-width: 767px) { .hc .hc-ctaph__panel { margin-inline: 8px; } }

/* --- cookie panel, A/B/D only: the same panel, text and three equal buttons, laid out as a slim bar on laptops so it no longer
   covers the hero's main action. Behaviour, choices and wording are unchanged; the expanded preferences still open inside it. */
@media (min-width: 900px) {
  .hc .consent { padding: 10px var(--gutter); }
  .hc .consent__panel { max-width: min(1200px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t a" "p a" "m m"; column-gap: 24px; align-items: center; padding: 12px 18px; }
  .hc .consent .consent__title { grid-area: t; font-size: 15px; margin: 0 0 2px; }
  .hc .consent__panel > p { grid-area: p; margin: 0; font-size: 14px; line-height: 1.45; }
  .hc .consent__panel > .consent__actions { grid-area: a; flex-wrap: nowrap; gap: 8px; }
  .hc .consent__panel > .consent__actions .buka-button-secondary { min-height: 44px; padding: 8px 16px; font-size: 14px; white-space: nowrap; }
  .hc .consent__manage { grid-area: m; }
}
@media (min-width: 1200px) {
  .hc .consent__panel { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t p a" "m m m"; }
  .hc .consent .consent__title { margin: 0; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .hc .hc-ctaph__media, .hc .hc-post__img img { transition: none !important; transform: none !important; } }
/* B hero on laptops: tighter vertical rhythm so the form's send button stays clear of the slim cookie bar (1024-1440 px wide) */
@media (min-width: 992px) {
  .hc .hc-hero--b { padding-top: 22px; }
  .hc .hc-hero-b .hc-tag { margin-bottom: 10px; }
  .hc .hc-hero-b h1 { font-size: clamp(2rem, 1.35rem + 1.45vw, 2.6rem); max-width: 21ch; }
  .hc .hc-hero-b .hc-lead { margin-top: 10px; font-size: 1rem; }
  .hc .hc-formcard--b { margin-top: 14px; padding: 16px 20px 14px; }
  .hc .hc-formcard--b .hc-formcard__t { margin-bottom: 6px !important; font-size: 1.1rem !important; }
  .hc .hc-formcard--b .hc-chipset { gap: 6px; margin-top: 4px; }
  .hc .hc-formcard--b .hc-chip { min-height: 38px; padding: 5px 12px; font-size: 13.5px; }
  .hc .hc-formcard--b .hc-fields { gap: 8px 12px; }
  .hc .hc-formcard--b .hc-form__note { margin-top: 8px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) { .hc .hc-hero--b { padding-top: 12px; } .hc .hc-hero-b .hc-lead { margin-top: 8px; } }

/* ================================================================ round 6 */
/* --- four steps: numbered rail (desktop), numbered cards, "You get" line; an ordered list, readable without motion */
.hc .hc-proc__rail { display: none; }
@media (min-width: 768px) {
  .hc .hc-proc__rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; margin: -12px auto 28px; padding: 0; max-width: 980px; }
  .hc .hc-proc__rail::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 18px; height: 2px; background: linear-gradient(90deg, var(--plum), var(--magenta) 50%, var(--accent)); opacity: .35; }
  .hc .hc-proc__rail li { position: relative; display: grid; justify-items: center; gap: 8px; font-weight: 500; font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
  .hc .hc-proc__rail span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--magenta) inset; font: 500 13px/1 var(--mono); color: var(--magenta); }
}
.hc .hc-proc__grid { list-style: none; counter-reset: none; }
.hc .hc-step__n { margin: 6px 0 0 !important; display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px; border-radius: 80px; background: var(--ink); color: #fff !important; font: 500 13px/1 var(--mono); letter-spacing: .1em; }
.hc .hc-step__get { margin-top: 6px !important; padding: 10px 14px; border-radius: var(--r-s); background: var(--subtle); font-size: .95rem; color: var(--ink) !important; max-width: 46ch; }
.hc .hc-step__get strong { font-weight: 600; }

/* --- client work: premium browser frames (thin border, soft depth, light rim), image scrolls inside */
.hc .hc-cw__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.hc .hc-cw__head h2 { max-width: 18ch; } .hc .hc-cw__head .hc-sub { margin-top: 14px; max-width: 54ch; }
.hc .hc-cw__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 2.4vw, 32px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .hc .hc-cw__grid { grid-template-columns: 1fr 1fr; } }
.hc .hc-wcard[hidden] { display: none; }
.hc .hc-wcard.is-new { animation: hc-wnew .7s var(--ease-expo) both; }
@keyframes hc-wnew { from { opacity: 0; transform: translateY(24px); } }
.hc .hc-wframe { position: relative; border-radius: 16px; padding: 0; background: #fff; border: 1px solid rgba(19, 19, 19, .1); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 2px 4px rgba(19, 19, 19, .04), 0 24px 48px -28px rgba(19, 19, 19, .35); overflow: hidden; transition: transform .5s var(--ease-expo), box-shadow .5s var(--ease-expo); }
@media (hover: hover) { .hc .hc-wcard:hover .hc-wframe { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 4px 8px rgba(19, 19, 19, .05), 0 34px 60px -30px rgba(19, 19, 19, .45); } }
.hc .hc-wframe__bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; background: #f6f5f4; border-bottom: 1px solid rgba(19, 19, 19, .07); }
.hc .hc-wframe__bar i { width: 10px; height: 10px; border-radius: 50%; background: #dcd8d5; }
.hc .hc-wframe__url { margin-left: 12px; flex: 1; max-width: 320px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff; border: 1px solid rgba(19, 19, 19, .06); font: 500 12px/1 var(--mono); letter-spacing: .02em; color: var(--ink-3); overflow: hidden; white-space: nowrap; }
.hc .hc-wframe__view { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; background: #f3f2f1; }
.hc .hc-wframe__view img { display: block; width: 100%; height: auto; will-change: transform; }
.hc .hc-wcard__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; padding: 16px 4px 0; }
.hc .hc-wcard__meta h3 { font-size: 1.35rem !important; }
.hc .hc-wcard__meta p { color: var(--ink-2); font-size: .95rem; }
.hc .hc-cw__more { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 40px); }
.hc .hc-cw__pause svg { width: 14px; height: 14px; fill: currentColor; }
.hc .hc-cw__pause.is-paused svg { display: none; } .hc .hc-cw__pause.is-paused::before { content: ""; margin-left: 3px; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
/* A: dark premium panel */
.hc .hc-cw--a { width: min(100% - 24px, 1416px); margin-inline: auto; border-radius: var(--r); background: var(--ink); color: #fff; }
.hc .hc-cw--a .hc-tag { color: rgba(255, 255, 255, .86); } .hc .hc-cw--a .hc-sub, .hc .hc-cw--a .hc-wcard__meta p { color: rgba(255, 255, 255, .72); }
.hc .hc-cw--a .hc-wframe { background: #1d1d1f; border-color: rgba(255, 255, 255, .12); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 30px 60px -30px rgba(0, 0, 0, .8); }
.hc .hc-cw--a .hc-wframe__bar { background: #262628; border-color: rgba(255, 255, 255, .06); } .hc .hc-cw--a .hc-wframe__bar i { background: #48484c; }
.hc .hc-cw--a .hc-wframe__url { background: #1d1d1f; border-color: rgba(255, 255, 255, .08); color: #a5a3a6; }
.hc .hc-cw--a .hc-link { color: var(--accent); } .hc .hc-cw--a .hc-sl__btn { background: rgba(255, 255, 255, .1); color: #fff; }
.hc .hc-cw--a .hc-arrow--ink { background: var(--accent); color: var(--ink); } .hc .hc-cw--a .hc-arrow--ink .hc-arrow__i { background: var(--ink); color: #fff; }
/* B: light and plain, on the soft shell */
.hc .hc-cw--b .hc-cw__grid { padding: 12px; border-radius: var(--r); background: var(--subtle); }
.hc .hc-cw--b .hc-wcard { padding: 12px 12px 16px; border-radius: var(--r-s); background: #fff; }
.hc .hc-cw--b .hc-wframe { box-shadow: 0 1px 2px rgba(19, 19, 19, .05); }
/* D: spacious, centred heading, wide gaps */
.hc .hc-cw--d .hc-cw__head { justify-content: center; text-align: center; } .hc .hc-cw--d .hc-cw__head > div { display: grid; justify-items: center; }
.hc .hc-cw--d .hc-cw__head .hc-cw__pause { position: absolute; right: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.hc .hc-cw--d .hc-wrap { position: relative; }
@media (min-width: 992px) { .hc .hc-cw--d .hc-cw__grid { gap: 48px 40px; } }

/* --- three design directions (demo brand) */
.hc .hc-dirs { display: grid; gap: 28px; margin-top: clamp(24px, 3vw, 40px); padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r); background: var(--subtle); }
@media (min-width: 992px) { .hc .hc-dirs { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 40px; } }
.hc .hc-dirs__copy h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important; max-width: 20ch; }
.hc .hc-dirs__copy > p { margin-top: 10px; color: var(--ink-2); max-width: 52ch; }
.hc .hc-dirs__opts { display: grid; gap: 8px; margin-top: 20px; }
.hc .hc-dirs__opt { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; padding: 8px; border: 1px solid transparent; border-radius: 14px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: box-shadow .25s ease, border-color .25s ease, opacity .25s ease; }
.hc .hc-dirs__opt img { width: 88px; height: 55px; object-fit: cover; object-position: top; border-radius: 8px; }
.hc .hc-dirs__opt span { display: grid; gap: 2px; font-size: 15px; font-weight: 500; }
.hc .hc-dirs__opt b { font: 500 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--magenta); }
.hc .hc-dirs__opt small { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.hc .hc-dirs.is-js .hc-dirs__opt:not(.is-on) { opacity: .72; }
.hc .hc-dirs__opt.is-on { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta), 0 10px 24px -14px rgba(179, 16, 94, .5); opacity: 1; }
.hc .hc-dirs__opt:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
.hc .hc-dirs__stage { margin: 0; }
.hc .hc-dirs__imgs { position: relative; aspect-ratio: 16 / 10; background: #fff; }
.hc .hc-dirs__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hc .hc-dirs.is-js .hc-dirs__img { position: absolute; inset: 0; opacity: 0; transform: scale(1.02); transition: opacity .45s ease-out, transform .7s var(--ease-expo); }
.hc .hc-dirs.is-js .hc-dirs__img.is-on { opacity: 1; transform: none; }
.hc .hc-dirs:not(.is-js) .hc-dirs__imgs { aspect-ratio: auto; display: grid; gap: 8px; }
.hc .hc-dirs:not(.is-js) .hc-dirs__img { height: auto; aspect-ratio: 16 / 10; }
.hc .hc-dirs__stage figcaption { margin-top: 10px; font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.hc .hc-dirs--d { background: transparent; border: 1px solid var(--subtle-2); }

/* --- sample review cards: drawn portrait, stars, sample text */
.hc .hc-tcard__av { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); width: 150px; height: 150px; border-radius: 50%; box-shadow: 0 0 0 6px rgba(255, 255, 255, .12); }
.hc .hc-tcard__stars { display: flex; gap: 3px; color: #f5c451; } .hc .hc-tcard__stars svg { width: 18px; height: 18px; }
.hc .hc-tcard__badge { background: rgba(255, 255, 255, .92) !important; color: var(--ink) !important; }
@media (max-width: 599px) { .hc .hc-tcard__av { width: 120px; height: 120px; } }

/* --- Google trust card near the hero CTA (Buka's own card; no stars next to the Google name or logo) */
.hc .hc-gtrust { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 16px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--subtle-2); box-shadow: 0 6px 18px -12px rgba(19, 19, 19, .3); font-size: 14px; line-height: 1.35; color: var(--ink-2); text-align: left; max-width: 100%; }
.hc .hc-gtrust__g { width: 22px; height: 22px; flex: none; }
.hc .hc-gtrust__txt { margin: 0 !important; max-width: none !important; }
.hc .hc-gtrust__txt strong { color: var(--ink); font-weight: 600; }
.hc .hc-gtrust__asof { display: block; font-size: 12px; color: var(--ink-3); }
.hc .hc-gtrust__link { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--magenta); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.hc .hc-gtrust__link .hc-link__i svg { width: 14px; height: 14px; display: block; }
.hc .hc-gtrust--dark { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); box-shadow: none; color: rgba(255, 255, 255, .8); }
.hc .hc-gtrust--dark strong { color: #fff; } .hc .hc-gtrust--dark .hc-gtrust__asof { color: rgba(255, 255, 255, .6); } .hc .hc-gtrust--dark .hc-gtrust__link { color: #fff; }
.hc .hc-gtrust--dark .hc-gtrust__g { background: #fff; border-radius: 50%; padding: 2px; box-sizing: content-box; }
.hc .hc-gtrust--b { margin-top: 14px; }
.hc .hc-gtrust-wrap { display: flex; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .hc .hc-wcard.is-new, .hc .hc-dirs__img { animation: none !important; transition: none !important; }
  .hc .hc-wframe { transition: none !important; }
}
/* B: trust card at the top of the service column, beside the form */
.hc .hc-gtrust--b { margin: 0 0 12px; display: flex; }
/* short laptop screens (e.g. 1180×720, 1366×768): size the hero by the real viewport height as well, so the main action stays clear
   of the cookie bar; type keeps a readable floor */
@media (min-width: 992px) and (max-height: 780px) {
  .hc .hc-hero--d { padding-top: 28px; }
  .hc .hc-hero-d h1 { font-size: clamp(2.6rem, 8.2vh, 4.5rem); }
  .hc .hc-hero-d .hc-lead { margin-top: 14px; }
  .hc .hc-hero-d__cta { margin-top: 20px; }
  .hc .hc-hero--b { padding-top: 10px; }
  .hc .hc-hero-b h1 { font-size: clamp(1.9rem, 4.9vh, 2.6rem); }
  .hc .hc-hero-b .hc-tag { margin-bottom: 6px; }
  .hc .hc-formcard--b { margin-top: 10px; }
  .hc .hc-hero--a { padding-top: calc(var(--buka-header-h, 72px) + 36px); }
  .hc .hc-hero--a h1 { font-size: clamp(2.6rem, 8vh, 3.75rem); }
}
@media (min-width: 992px) and (max-width: 1199.98px) and (max-height: 780px) { .hc .hc-hero-b h1 { font-size: clamp(1.9rem, 4.9vh, 2.3rem); } .hc .hc-hero-b .hc-tag { margin-bottom: 6px; } }
/* directions on phones and tablets: heading, then the preview, then the options (the choice is visible right where it is made) */
@media (max-width: 991.98px) { .hc .hc-dirs__copy { display: contents; } .hc .hc-dirs__copy > .hc-tag, .hc .hc-dirs__copy > h3, .hc .hc-dirs__copy > p { order: 0; } .hc .hc-dirs__copy > .hc-tag { margin-bottom: -16px; } .hc .hc-dirs__copy > p { margin-top: -16px; } .hc .hc-dirs__stage { order: 1; } .hc .hc-dirs__opts { order: 2; margin-top: 0; } }
.hc .hc-dirs { grid-template-columns: minmax(0, 1fr); } .hc .hc-dirs > *, .hc .hc-dirs__copy > * { min-width: 0; }
@media (min-width: 992px) { .hc .hc-dirs { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
@media (max-width: 479px) { .hc .hc-dirs { padding: 16px; } .hc .hc-dirs__opt { grid-template-columns: 72px minmax(0, 1fr); } .hc .hc-dirs__opt img { width: 72px; height: 45px; } }
.hc [data-work-more][hidden], .hc [data-work-pause][hidden], .hc [data-sl-pause][hidden] { display: none !important; }
.hc .hc-dirs__credits { margin-top: 8px; text-align: center; font-size: 12.5px; color: var(--ink-3); }
.hc .hc-dirs__credits summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.hc .hc-dirs__credits p { margin: 6px auto 0 !important; max-width: 60ch !important; text-align: left; line-height: 1.5; }
.hc .hc-dirs__credits a { color: inherit; text-decoration: underline; }

/* ================================================================ round 7 */
/* --- tools band: three labelled groups in the same controlled scroll */
.hc .hc-ticker__group > li.hc-ticker__grp { display: flex; align-items: center; gap: 36px; height: 44px; }
.hc .hc-ticker__glabel { flex: none; padding: 6px 12px; border-radius: 80px; background: var(--subtle); font: 500 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.hc .hc-ticker__items { display: flex; align-items: center; gap: 48px; margin: 0; padding: 0; list-style: none; }
.hc .hc-ticker__items > li { display: flex; align-items: center; flex: none; height: 44px; }
.hc .hc-logo--txt { font: 500 22px/1 var(--font); letter-spacing: -.03em; color: #1c1c1c; white-space: nowrap; }
.hc .hc-logo--cl { height: 26px; } .hc .hc-logo--sf { height: 26px; } .hc .hc-logo--s { height: 17px; } .hc .hc-logo--w { height: 27px; } .hc .hc-logo--m { height: 21px; }
.hc .hc-ticker__group { gap: 72px; padding-right: 72px; }
.hc .hc-ticker__note { margin: 14px auto 0; font-size: 12.5px; color: var(--ink-3); text-align: center; max-width: none; }
@media (max-width: 767px) { .hc .hc-logo--txt { font-size: 18px; } .hc .hc-ticker__items { gap: 32px; } .hc .hc-ticker__group > li.hc-ticker__grp { gap: 24px; } .hc .hc-logo--cl, .hc .hc-logo--sf { height: 22px; } .hc .hc-logo--w { height: 23px; } .hc .hc-logo--m { height: 18px; } .hc .hc-logo--s { height: 14px; } }
@media (prefers-reduced-motion: reduce) { .hc .hc-ticker__group > li.hc-ticker__grp { flex-wrap: wrap; height: auto; justify-content: center; } .hc .hc-ticker__items { flex-wrap: wrap; justify-content: center; gap: 16px 32px; } }

/* --- client work: simple luxury card (name, then a large clean preview), white edge light on hover / keyboard focus */
@property --hc-edge { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hc .hc-wcard { position: relative; display: grid; gap: 14px; }
.hc .hc-wcard__name { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.55rem) !important; letter-spacing: -.03em; }
.hc .hc-wcard__frame { position: relative; border-radius: 20px; padding: 1px; background: linear-gradient(180deg, rgba(19, 19, 19, .14), rgba(19, 19, 19, .06)); box-shadow: 0 1px 2px rgba(19, 19, 19, .05), 0 22px 44px -30px rgba(19, 19, 19, .4); isolation: isolate; }
.hc .hc-wcard__frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: 2; pointer-events: none;
  background: conic-gradient(from var(--hc-edge), rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 230deg, rgba(214, 219, 228, .55) 290deg, #fff 338deg, rgba(255, 255, 255, .9) 346deg, rgba(255, 255, 255, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .45s ease; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .85)) drop-shadow(0 0 1px rgba(120, 128, 140, .35)); }
.hc .hc-wcard:hover .hc-wcard__frame::before, .hc .hc-wcard:focus-within .hc-wcard__frame::before { opacity: 1; animation: hc-edge 3.6s linear infinite, hc-edge-pulse 3.6s ease-in-out infinite; }
@keyframes hc-edge { to { --hc-edge: 360deg; } }
@keyframes hc-edge-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.hc .hc-wcard__view { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; border-radius: 19px; background: #f3f2f1; }
.hc .hc-wcard__view img { display: block; width: 100%; height: auto; will-change: transform; }
.hc .hc-wcard__top { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
.hc .hc-wcard__link { justify-self: start; min-height: 40px; }
.hc .hc-cw__pause { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--subtle-2); border-radius: 80px; background: #fff; color: var(--ink); font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.hc .hc-cw__pi { display: grid; place-items: center; width: 14px; height: 14px; } .hc .hc-cw__pi svg { width: 14px; height: 14px; fill: currentColor; }
.hc .hc-cw__pause.is-paused .hc-cw__pi svg { display: none; } .hc .hc-cw__pause.is-paused .hc-cw__pi::before { content: ""; margin-left: 3px; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.hc .hc-cw__pause:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
/* the light is the hover/focus cue; the old "lift" is dropped */
.hc .hc-wcard:hover .hc-wframe { transform: none; }
/* A: dark panel */
.hc .hc-cw--a .hc-wcard__frame { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .8); }
.hc .hc-cw--a .hc-wcard__name { color: #fff; }
.hc .hc-cw--a .hc-cw__pause { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
/* B: soft shell; cards are white tiles */
.hc .hc-cw--b .hc-wcard { padding: 16px 16px 12px; }
/* D: spacious */
.hc .hc-cw--d .hc-wcard__name { text-align: left; }
@media (prefers-reduced-motion: reduce) { .hc .hc-wcard__frame::before { animation: none !important; opacity: 0 !important; } .hc .hc-wcard:focus-within .hc-wcard__frame { box-shadow: 0 0 0 2px var(--magenta), 0 22px 44px -30px rgba(19, 19, 19, .4); } }
@media (hover: none) { .hc .hc-wcard:hover .hc-wcard__frame::before { opacity: 0; animation: none; } }

/* --- sample review cards with stock photos and demo firm logos */
.hc .hc-tcard--photo { background: #2a2622; }
.hc .hc-tcard--photo .hc-tcard__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hc .hc-tcard--photo .hc-tcard__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 12, .35) 0%, rgba(10, 10, 12, 0) 26%, rgba(10, 10, 12, 0) 40%, rgba(10, 10, 12, .78) 78%); }
.hc .hc-tcard__firm { position: absolute; z-index: 1; top: 20px; left: 20px; display: block; height: 24px; color: #fff; }
.hc .hc-tcard__firm svg { height: 24px; width: auto; display: block; }
.hc .hc-tcard--photo .hc-tcard__body { background: none; }
.hc .hc-tcard__badge { font-size: 10.5px !important; }

/* --- rating badge (stars with the number only; the Google source line sits below a divider) */
.hc .hc-gtrust { display: inline-grid; gap: 6px; padding: 10px 14px; text-align: left; }
.hc .hc-gtrust__rate { display: flex; align-items: center; gap: 8px; margin: 0 !important; font-size: 14px; color: var(--ink-2); max-width: none !important; }
.hc .hc-gtrust__rate strong { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.hc .hc-gtrust__stars { display: inline-flex; gap: 2px; color: #f5b301; } .hc .hc-gtrust__stars svg { width: 16px; height: 16px; } .hc .hc-gtrust__stars svg.off { color: #d9d6d2; }
.hc .hc-gtrust__src { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding-top: 6px; border-top: 1px solid var(--subtle-2); font-size: 13px; font-weight: 500; color: var(--magenta); text-decoration: underline; text-underline-offset: 3px; }
.hc .hc-gtrust__src .hc-gtrust__g { width: 18px; height: 18px; }
.hc .hc-gtrust__asof { color: var(--ink-3); font-weight: 400; text-decoration: none; display: inline; font-size: 12px; }
.hc .hc-gtrust--dark .hc-gtrust__rate { color: rgba(255, 255, 255, .8); } .hc .hc-gtrust--dark .hc-gtrust__rate strong { color: #fff; }
.hc .hc-gtrust--dark .hc-gtrust__src { color: #fff; border-color: rgba(255, 255, 255, .16); } .hc .hc-gtrust--dark .hc-gtrust__asof { color: rgba(255, 255, 255, .6); }
.hc .hc-gtrust--b { display: inline-grid; }

/* --- sticky offer band: light frosted surface (A/B/D), opaque fallback */
.hc .offer-band__in { background: rgba(255, 255, 255, .96); color: var(--ink); border: 1px solid rgba(19, 19, 19, .1); box-shadow: 0 12px 32px -14px rgba(19, 19, 19, .35), 0 1px 0 rgba(255, 255, 255, .8) inset; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .hc .offer-band__in { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); } }
.hc .offer-band__title { color: var(--ink) !important; } .hc .offer-band__note { color: var(--ink-2) !important; }
.hc .offer-band__close { color: var(--ink) !important; } .hc .offer-band__close:hover { background: rgba(19, 19, 19, .06); }
.hc .offer-band { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.hc .offer-band__cta { box-shadow: none; }

/* --- B on short mid-size laptops (e.g. 1100×700): one more step of vertical tightening, readable floor kept */
@media (min-width: 992px) and (max-width: 1199.98px) and (max-height: 720px) { .hc .hc-hero-b .hc-lead { font-size: .95rem; line-height: 1.45; } .hc .hc-formcard--b .hc-chip { min-height: 36px; } .hc .hc-formcard--b { padding-top: 12px; } }
@media (prefers-reduced-motion: reduce) { .hc .hc-ticker__group > li.hc-ticker__grp[aria-hidden="true"] { display: none; } .hc .hc-ticker__group { flex-direction: column; gap: 14px; padding: 0 20px; } }
/* light backgrounds (B, D): the light gets a soft silver trail and a thin neutral halo so it reads on white without a glow */
.hc .hc-cw--b .hc-wcard__frame::before, .hc .hc-cw--d .hc-wcard__frame::before { padding: 2.5px;
  background: conic-gradient(from var(--hc-edge), rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 220deg, rgba(150, 158, 172, .45) 285deg, rgba(235, 238, 244, .95) 330deg, #fff 342deg, rgba(150, 158, 172, .5) 350deg, rgba(255, 255, 255, 0) 360deg);
  filter: drop-shadow(0 0 1.5px rgba(70, 78, 92, .45)) drop-shadow(0 0 4px rgba(255, 255, 255, .9)); }
.hc .hc-cw--a .hc-wcard__frame::before { padding: 2.5px; }

/* ================================================================ round 8 */
/* --- brand edge light (tokens: --plum #941762, --magenta #b3105e, --accent #f5a722), client cards: hover / keyboard focus */
.hc .hc-cw--a .hc-wcard__frame::before, .hc .hc-cw--b .hc-wcard__frame::before, .hc .hc-cw--d .hc-wcard__frame::before, .hc .hc-wcard__frame::before {
  padding: 2px; filter: none;
  background: conic-gradient(from var(--hc-edge), rgba(148, 23, 98, 0) 0deg, rgba(148, 23, 98, 0) 200deg, rgba(148, 23, 98, .55) 260deg, #b3105e 305deg, #f5a722 345deg, rgba(245, 167, 34, 0) 360deg); }
/* --- the same light around the OUTSIDE of the rental offer card (a ring 4 px outside its edge; the card itself does not move) */
@property --hc-edge2 { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hc .hc-edge { position: relative; isolation: isolate; }
.hc .hc-edge::after { content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: calc(var(--r) + 5px); padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--hc-edge2), rgba(148, 23, 98, .14) 0deg, rgba(148, 23, 98, .14) 200deg, rgba(148, 23, 98, .55) 260deg, #b3105e 305deg, #f5a722 345deg, rgba(148, 23, 98, .14) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.hc .hc-edge.is-lit::after { animation: hc-edge2 6s linear infinite; }
@keyframes hc-edge2 { to { --hc-edge2: 360deg; } }
.hc .hc-rental-a__price.hc-edge::after { border-radius: calc(var(--r-s) + 5px); }
.hc .hc-rental-b__card.hc-edge::after, .hc .hc-rental-d__card.hc-edge::after { border-radius: calc(var(--r) + 5px); }
@media (prefers-reduced-motion: reduce) { .hc .hc-edge::after { animation: none !important; background: linear-gradient(135deg, #941762, #b3105e 45%, #f5a722); } }

/* --- compact design directions inside the rental offer */
.hc .hc-rdirs { margin: 22px 0 6px; padding: 16px; border-radius: var(--r-s); background: var(--subtle); }
.hc .hc-rdirs__k { margin: 0 !important; font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--magenta); }
.hc .hc-rdirs__t { margin: 4px 0 12px !important; font-size: 1rem; font-weight: 500; color: var(--ink) !important; }
.hc .hc-rdirs__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hc .hc-rdirs__opt { display: grid; gap: 6px; padding: 5px; border: 1px solid transparent; border-radius: 12px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: box-shadow .2s ease, opacity .2s ease, transform .2s ease; }
.hc .hc-rdirs__opt img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 8px; display: block; }
.hc .hc-rdirs__opt span { display: grid; padding: 0 3px 2px; font: 500 12px/1.25 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.hc .hc-rdirs__opt small { font: 400 12px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.hc .hc-rdirs.is-js .hc-rdirs__opt:not(.is-on) { opacity: .66; }
.hc .hc-rdirs__opt.is-on { box-shadow: 0 0 0 2px var(--magenta); opacity: 1; }
.hc .hc-rdirs__opt.is-on span::after { content: "Selected"; margin-top: 2px; font: 600 10px/1.2 var(--mono); letter-spacing: .1em; color: var(--magenta); }
.hc .hc-rdirs__opt:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
.hc .hc-rdirs__note { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.hc .hc-rdirs__note .hc-dirs__credits { margin: 0; text-align: left; }
.hc .hc-rental-d .hc-rdirs { max-width: 980px; margin: 20px auto 0; }
@media (max-width: 479px) { .hc .hc-rdirs__opt span { font-size: 11px; } .hc .hc-rdirs__opt small { display: none; } }

/* --- four service cards (A/B/D): the open card keeps its text column; closed cards stay readable */
@media (min-width: 1200px) {
  .hc .hc-acc--4 .hc-acc__item.is-active { flex-grow: 2.1; }
  .hc .hc-acc--4 .hc-acc__item.is-active .hc-acc__body { flex-basis: min(290px, 52%); }
  .hc .hc-acc--4 .hc-acc__card { padding: 22px; }
  .hc .hc-acc--4 .hc-acc__text h3 { font-size: clamp(1.2rem, 1rem + .5vw, 1.45rem) !important; }
}
@media (min-width: 1200px) and (max-width: 1365.98px) { .hc .hc-acc--4 .hc-acc__item.is-active { flex-grow: 1.85; } }
/* tools band: one neutral standard (official single-colour dark versions; plain names in the same neutral) */
.hc .hc-logo--txt { color: #151514; font-weight: 600; letter-spacing: -.035em; }
.hc .hc-logo--cl { height: 25px; } .hc .hc-logo--sf { height: 25px; }
/* A: the price tile sits inside the grey shell; the light runs just outside the tile (3 px) so it stays inside the shell padding */
.hc .hc-rental-a__price.hc-edge::after { inset: -4px; border-radius: calc(var(--r-s) + 4px); }
.hc .hc-rental-a__price { background: transparent !important; }
/* D: compact directions row */
.hc .hc-rental-d .hc-rdirs { max-width: 720px; }