/* ============================================================================
   Ginkgo Events — CMS display-variant components (ADDITIVE).
   These styles are only ever applied to opt-in `.gk-*` classes that appear when
   an editor flips a display toggle (carousel / accordion). The core design
   system in ginkgo.css is never modified.
   ========================================================================== */

/* ---- Carousel (clients + testimonials, spec §6b) -------------------------- */
.gk-carousel{
  display:flex;
  flex-wrap:nowrap;
  gap:clamp(1rem,3vw,1.3rem);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:2px;
  -webkit-overflow-scrolling:touch;
  padding-bottom:.7rem;
  scrollbar-width:thin;
  scrollbar-color:var(--blue) var(--paper-2);
}
.gk-carousel::-webkit-scrollbar{height:8px;}
.gk-carousel::-webkit-scrollbar-track{background:var(--paper-2);border-radius:99px;}
.gk-carousel::-webkit-scrollbar-thumb{background:var(--blue);border-radius:99px;}
.gk-carousel > *{scroll-snap-align:start;}
.gk-carousel:focus-visible{outline:3px solid var(--blue);outline-offset:6px;border-radius:6px;}
/* testimonial cards get a fixed, snappable width; client logos stay natural */
.quotes.gk-carousel > .quote{flex:0 0 clamp(280px,82%,400px);}
.trustbar__logos.gk-carousel > span{flex:0 0 auto;}

/* Optional JS-injected nav arrows */
.gk-carousel-wrap{position:relative;}
.gk-carousel__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--shadow-sm);z-index:2;
}
.gk-carousel__nav:hover{border-color:var(--blue);color:var(--blue);}
.gk-carousel__nav[disabled]{opacity:.35;cursor:default;}
.gk-carousel__nav--prev{left:-6px;}
.gk-carousel__nav--next{right:-6px;}
.gk-carousel__nav svg{width:20px;height:20px;}

/* ---- Accordion (FAQ, spec §6b) -------------------------------------------- */
.gk-accordion{display:flex;flex-direction:column;gap:.8rem;}
.gk-accordion__item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.gk-accordion__q{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;padding:1.15rem 1.35rem;font-weight:700;
  color:var(--ink);font-size:1.08rem;
}
.gk-accordion__q::-webkit-details-marker{display:none;}
.gk-accordion__q::marker{content:"";}
.gk-accordion__q:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;}
/* Heading wrapping the question inside <summary>: strip its block styling so
   the summary flex row stays intact (Phase 1 — question is a real h2/h3). */
.faq__q-h{margin:0;font:inherit;color:inherit;letter-spacing:normal;}
.gk-accordion__chev{width:22px;height:22px;flex:0 0 auto;color:var(--blue);transition:transform .25s ease;}
.gk-accordion__item[open] .gk-accordion__chev{transform:rotate(180deg);}
.gk-accordion__a{padding:0 1.35rem 1.25rem;color:var(--ink-soft);}
.gk-accordion__a > :first-child{margin-top:0;}
.gk-accordion__a > :last-child{margin-bottom:0;}

@media (prefers-reduced-motion:reduce){
  .gk-accordion__chev{transition:none;}
  .gk-carousel{scroll-behavior:auto;}
}

/* ---- Client logo strip (build prompt Phase 3) ----------------------------- */
/* Top hairline only — the bottom border was bleeding into the CTA card's
   rounded corners; whitespace separates it from the CTA instead. */
.logo-strip{border-top:1px solid var(--line);background:#fff;padding-block:2.2rem;}
/* Group the logo strip with the section that follows it (CTA band on the home
   page, enquiry form on landing pages): a smaller gap above the ask than the
   full section rhythm below it. Derived from the --section scale, not hard-coded. */
.logo-strip + .section{padding-top:calc(var(--section) * .32);}
.logo-strip__label{
  text-align:center;font-family:'Barlow Semi Condensed',sans-serif;
  text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;
  color:var(--ink-soft);margin:0 0 1.4rem;
}
/* Uniform optical sizing: constrain by height, contain, so different logo
   shapes sit consistently. Explicit height prevents zero-height collapse. */
.logo-tile{
  flex:0 0 auto;list-style:none;display:flex;align-items:center;
  justify-content:center;height:52px;
}
.logo-tile img{height:52px;width:auto;max-width:170px;object-fit:contain;display:block;filter:grayscale(1);opacity:.72;transition:filter .25s ease,opacity .25s ease;}
.logo-tile a:hover img,.logo-tile a:focus-visible img{filter:none;opacity:1;}
.logo-tile__text{font-weight:700;color:#9fb4bb;font-size:1.15rem;letter-spacing:.02em;}

/* Grid variant — static, all visible. */
.logo-grid{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:1.6rem 1.4rem;align-items:center;justify-items:center;
}

/* Carousel variant — pure-CSS marquee (two tracks, second aria-hidden). */
.logo-marquee{
  display:flex;gap:clamp(1.5rem,4vw,3rem);overflow:hidden;
  /* Fixed-width fade to background at both edges so logos fade out instead of
     being hard-clipped mid-glyph (consistent regardless of viewport width). */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);
}
.logo-marquee__track{
  display:flex;gap:clamp(1.5rem,4vw,3rem);flex:0 0 auto;
  margin:0;padding:0;list-style:none;
  /* 45s for the 21-logo set — keeps roughly the same px/s as the original 30. */
  animation:logo-scroll 45s linear infinite;
}
.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track{animation-play-state:paused;}
@keyframes logo-scroll{to{transform:translateX(calc(-100% - clamp(1.5rem,4vw,3rem)));}}

/* No JS / reduced motion: stop the animation, drop the duplicate track, and
   let the strip scroll manually so every logo stays reachable. */
@media (prefers-reduced-motion:reduce){
  .logo-marquee{overflow-x:auto;}
  .logo-marquee__track{animation:none;}
  .logo-marquee__track[aria-hidden]{display:none;}
}

/* ---- Enquiry form (build prompt Phase 0.5) -------------------------------- */
.enquiry-form__title{margin:0 0 1.2rem;}
.field-check{display:flex;gap:.6rem;align-items:flex-start;margin:.4rem 0 1.1rem;font-size:.92rem;color:var(--ink-soft);cursor:pointer;}
.field-check input{margin-top:.2rem;flex:0 0 auto;width:18px;height:18px;accent-color:var(--blue);}
.form-alert{border-radius:var(--radius-sm);padding:.9rem 1.1rem;margin-bottom:1.2rem;font-size:.95rem;line-height:1.5;}
.form-alert--error{background:#fdecea;border:1px solid #f5b7b1;color:#922b21;}
.form-alert--ok{background:#e8f8f4;border:1px solid #a3e0d2;color:#0b5e4d;}
.form-alert a{color:inherit;text-decoration:underline;}
.cf-turnstile{margin:.2rem 0 1.1rem;}
/* Honeypot — off-screen, never shown to humans, ignored by them. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---- Light button on coloured bands: define the edge (WCAG 1.4.11) --------
   A white .btn--light on the teal→blue CTA gradient is only ~2.5:1 against the
   blue end (< 3:1 non-text contrast). A near-opaque ink border (matching the
   button's own dark text) gives ≥3:1 across the whole gradient. */
.btn--light{border-color:rgba(14,42,51,.9);}
/* Primary CTA on the gradient band: brand blue #2AAEE4 fill with the dark ink
   label (set by .cta-band .btn--light in ginkgo.css). Blue is prominent and
   separates it from the outlined "Call" secondary. The dark ink border above
   also stops the blue fill blending into the blue end of the gradient behind
   it, and keeps a >=3:1 non-text boundary. (Not a darkened variant — #2AAEE4.) */
.cta-band .btn--light{background:var(--blue);}

/* ---- Landing-page sections (build prompt Phase 2) ------------------------- */
/* Tick lists reused OUTSIDE a .split container (benefits, enquiry points).
   Core .ticks sizing in ginkgo.css is scoped to .split; mirror it here so the
   icons don't balloon to full width. .split's rules keep higher specificity. */
ul.ticks{list-style:none;padding:0;margin:1.3rem 0;display:grid;gap:.7rem;}
ul.ticks li{display:flex;gap:.7rem;align-items:flex-start;font-weight:500;}
ul.ticks li svg{width:1.4em;height:1.4em;flex:0 0 auto;color:var(--teal);margin-top:.1em;}

.trust-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:center;}
.trust-badge{display:flex;align-items:center;gap:.55rem;font-weight:600;color:var(--ink);font-size:1rem;}
.trust-badge svg{width:22px;height:22px;flex:0 0 auto;color:var(--teal);}

.ticks--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.8rem 2rem;}

.chip-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem;}
.chip{background:#fff;border:1px solid var(--line);border-radius:99px;padding:.5rem 1.1rem;font-weight:600;color:var(--ink-soft);box-shadow:var(--shadow-sm);}

.enquiry-split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
.enquiry-split__copy{position:sticky;top:2rem;}
@media (max-width:860px){
  .enquiry-split{grid-template-columns:1fr;}
  .enquiry-split__copy{position:static;}
}

/* ---- Homepage destination tiles (Round 2 Task 4: 15 tiles, orphan-free) ---
   15 lays out cleanly at 5 / 3 / 1 columns (never 2 or 4, which leave orphans). */
.dtile-grid{display:grid;gap:.9rem;grid-template-columns:repeat(5,1fr);}
@media (max-width:1100px){.dtile-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.dtile-grid{grid-template-columns:1fr;}}

/* ---- Newsletter — slim light band (homepage layout pass) ------------------
   Overrides the base dark card in ginkgo.css: light neutral band with the
   heading + email field on one row at desktop, stacked at mobile. Keeps it from
   competing with the orange enquiry CTA or merging into the dark footer. */
.newsletter{
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:none;
  padding:clamp(1.3rem,3vw,1.9rem) clamp(1.3rem,3.5vw,2.2rem);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.2rem,4vw,3rem);flex-wrap:wrap;text-align:left;
}
.newsletter h2{color:var(--ink);margin:0;font-size:clamp(1.15rem,2.4vw,1.5rem);}
.newsletter p{color:var(--ink-soft);margin:.35rem 0 0;max-width:46ch;}
.newsletter__copy{flex:1 1 260px;min-width:0;}
.newsletter form.newsletter-async{display:block;margin:0;flex:1 1 330px;max-width:520px;}
.newsletter__row{display:flex;gap:.6rem;}
.newsletter input{flex:1;border:1px solid var(--line);border-radius:999px;padding:.85em 1.2em;font:inherit;background:#fff;min-width:0;}
.newsletter input:focus{outline:3px solid var(--blue);border-color:transparent;}
.newsletter-async .form-alert{margin:0 0 .8rem;text-align:left;}
.newsletter__consent{font-size:.8rem;color:var(--ink-soft);margin:.65rem 0 0;text-align:left;max-width:none;}
.newsletter__consent a{color:var(--blue-deep);text-decoration:underline;}
@media (max-width:640px){
  .newsletter{flex-direction:column;align-items:stretch;}
  /* In column mode the flex-basis above would become a HEIGHT — reset so the
     copy and form size to their content instead of inflating the band. */
  .newsletter__copy,.newsletter form.newsletter-async{flex:0 0 auto;}
  .newsletter__row{flex-direction:column;}
  .newsletter__row .btn{width:100%;}
}