/*
Theme Name:   CoKinder
Theme URI:    https://www.cokinder.com
Description:  CoKinder's child theme of Hello Elementor. Holds the brand tokens and the few rules that should not live inside a page builder.
Author:       CoKinder
Template:     hello-elementor
Version:      1.0.0
Text Domain:  cokinder
*/

/* The design tokens, carried over from the static template so the two cannot
   drift. Elementor's global colours and fonts are set to the same values, so
   a change made in the builder and a change made here describe the same
   design rather than fighting over it. */
:root {
  --white: #ffffff;
  --green: #629f61;
  --green-deep: #3f6b3e;
  /* The brand green and yellow at reading contrast — the same hues, darkened
     only as far as they can go before the yellow converges with the green
     rather than standing out on it. */
  --green-shade: #3a6a3c;
  --green-forest: #1e3a24;
  --yellow-deep: #edb33c;
  --yellow: #fdd77f;
  --mint: #8dceb9;
  --coral: #fe696d;
  --ink: #1f2a24;
  --ink-muted: #5c6b62;
  --surface: #f7faf7;
  --surface-mint: #eff7f2;
  --surface-warm: #fef7e9;
  --line: #e4ede6;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Karla", "Helvetica Neue", Arial, sans-serif;
  --measure: 62ch;
  --page: 1180px;
}

/* Focus is visible everywhere. Hello Elementor leaves this to the browser, and
   builders routinely style it away by accident; a keyboard user on a site about
   a sensitive subject should never have to guess where they are. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ck-green);
  outline-offset: 2px;
}

/* Media placed by the builder should never push the page sideways. */
img,
video {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
   Layout the design owns.

   These rules exist so the Elementor templates can stay about content. A
   widget that carries its own padding, its own max-width and its own grid is
   a widget nobody can restyle without opening forty panels; a class name
   means one edit here changes every place it is used. What is left in the
   builder is what a person should be able to change: the words, the order,
   and which sections exist.
   --------------------------------------------------------------------------- */

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--white);
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--green-forest);
  text-wrap: balance;
}

/* Sections ---------------------------------------------------------------- */

.ck-section {
  padding-block: clamp(3rem, 7vw, 6rem);
}

.ck-section__lead {
  max-width: var(--measure);
  color: var(--ink-muted);
  font-size: 1.125rem;
}

.ck-section--routes,
.ck-section--verification {
  background: var(--surface);
}

.ck-section--legal {
  background: var(--surface-mint);
}

.ck-section--pricing {
  background: var(--surface-warm);
}

/* Hero -------------------------------------------------------------------- */

.ck-hero {
  padding-block: clamp(4rem, 10vw, 8rem);
  background: linear-gradient(160deg, var(--green-shade), var(--green-forest));
  color: var(--white);
}

.ck-hero__title,
.ck-hero__title h1 {
  color: var(--white);
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.05;
}

.ck-hero__lead {
  max-width: var(--measure);
  color: color-mix(in srgb, var(--white) 86%, transparent);
  font-size: 1.25rem;
}

.ck-hero__actions {
  gap: 1rem;
  flex-wrap: wrap;
}

/* Cards ------------------------------------------------------------------- */

.ck-grid {
  display: grid;
  /* auto-fit rather than a fixed column count: three cards on a desktop, one
     on a phone, and no breakpoint to maintain when a section gains a fourth. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.5rem;
  align-items: start;
}

.ck-card {
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  height: 100%;
}

.ck-card h3 {
  margin-block-end: 0.5rem;
  font-size: 1.25rem;
}

.ck-card p {
  margin: 0;
  color: var(--ink-muted);
}

/* Buttons ----------------------------------------------------------------- */

.ck-button .elementor-button {
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 700;
  transition: transform 120ms ease, background-color 120ms ease;
}

.ck-button--primary .elementor-button {
  background: var(--yellow-deep);
  color: var(--green-forest);
}

.ck-button--ghost .elementor-button {
  background: transparent;
  color: currentColor;
  box-shadow: inset 0 0 0 2px currentColor;
}

.ck-button .elementor-button:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .ck-button .elementor-button {
    transition: none;
  }
  .ck-button .elementor-button:hover {
    transform: none;
  }
}

/* Header and footer ------------------------------------------------------- */

.ck-header {
  padding-block: 1rem;
  border-block-end: 1px solid var(--line);
  background: var(--white);
}

.ck-header__inner {
  gap: 2rem;
}

.ck-footer {
  padding-block: 3rem 2rem;
  background: var(--green-forest);
  color: color-mix(in srgb, var(--white) 82%, transparent);
}

.ck-footer h3,
.ck-footer h4 {
  color: var(--white);
}

.ck-footer a {
  color: inherit;
}

.ck-footer__cols {
  gap: 2.5rem;
  flex-wrap: wrap;
}

.ck-footer__note {
  margin-block-start: 2rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
  font-size: 0.9rem;
}

/* Article body ------------------------------------------------------------ */

.ck-prose {
  max-width: var(--measure);
}

.ck-prose h2,
.ck-prose h3 {
  margin-block-start: 2em;
}

.ck-post__meta {
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------------------
   Motion.

   The rule throughout: nothing is hidden until JavaScript says it can be
   revealed again. .ck-reveal is added by the script, so a reader without it —
   or with reduced motion — gets the finished page, never a blank one waiting
   for an animation that will not run.
   --------------------------------------------------------------------------- */

.ck-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 620ms cubic-bezier(0.2, 0.7, 0.3, 1) var(--ck-delay, 0ms),
    transform 620ms cubic-bezier(0.2, 0.7, 0.3, 1) var(--ck-delay, 0ms);
}

.ck-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ck-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Hero ---------------------------------------------------------------------
   A slow drift across the gradient. It is deliberately almost too slow to
   notice: the subject is a decision people are nervous about, and a hero that
   performs undercuts it. This should read as depth, not as animation. */

.ck-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% 8%, color-mix(in srgb, var(--mint) 26%, transparent), transparent 60%),
    linear-gradient(160deg, var(--green-shade), var(--green-forest));
  background-size: 160% 160%, 100% 100%;
  animation: ck-drift 34s ease-in-out infinite alternate;
}

@keyframes ck-drift {
  from { background-position: 0% 0%, 0 0; }
  to   { background-position: 60% 40%, 0 0; }
}

/* A soft edge where the hero meets the page, instead of a hard line. */
.ck-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 96px;
  background: linear-gradient(to bottom, transparent, var(--white));
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ck-hero {
    animation: none;
  }
}

/* Cards --------------------------------------------------------------------
   Lift on hover, and a top edge that draws itself in the brand yellow. Both
   are transforms and opacity only — nothing here triggers layout, so a grid
   of twelve stays smooth on a phone. */

.ck-card {
  position: relative;
  overflow: hidden;
  transition:
    transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 220ms cubic-bezier(0.2, 0.7, 0.3, 1),
    border-color 220ms ease;
}

.ck-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--yellow-deep), var(--mint));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ck-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--green) 40%, var(--line));
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--green-forest) 55%, transparent);
}

.ck-card:hover::before,
.ck-card:focus-within::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .ck-card,
  .ck-card::before {
    transition: none;
  }
  .ck-card:hover {
    transform: none;
  }
}

/* Sections that carry a colour get a hairline rule rather than a hard join. */
.ck-section--routes,
.ck-section--verification,
.ck-section--legal,
.ck-section--pricing,
.ck-section--faq {
  border-block: 1px solid var(--line);
}

/* FAQ ---------------------------------------------------------------------- */

.ck-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 1.25rem 2.5rem;
}

.ck-faq__item {
  padding-block: 1.25rem;
  border-block-start: 1px solid var(--line);
}

.ck-faq__item h3 {
  font-size: 1.1rem;
  margin-block-end: 0.35rem;
}

.ck-faq__item p {
  margin: 0;
  color: var(--ink-muted);
}

/* Stories read as quotes, not as feature cards. */
.ck-section--stories .ck-card {
  background: var(--surface-mint);
  border-color: transparent;
}

.ck-section--stories .ck-card p {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ink);
}

/* Links -------------------------------------------------------------------- */

.ck-prose a,
.ck-footer a {
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 160ms ease;
}

.ck-prose a:hover {
  text-decoration-color: var(--green);
}

/* Header ------------------------------------------------------------------- */

.ck-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  /* Translucent rather than solid: the hero's colour shows through as you
     scroll past it, which ties the header to the page instead of sitting on
     top of it like a toolbar. */
  background: color-mix(in srgb, var(--white) 88%, transparent);
  backdrop-filter: blur(10px);
}

.ck-nav a:hover {
  color: var(--green);
}

/* Archive ------------------------------------------------------------------ */

.ck-archive article {
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ck-archive article:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .ck-archive article,
  .ck-archive article:hover {
    transition: none;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Header wordmark and navigation.

   The wordmark is type, not an image: an image needs uploading, sizing and
   replacing on a rebuild, and Elementor's site-logo widget renders a
   placeholder the size of a hero photograph when no logo is set — which is
   exactly what it did here.
   --------------------------------------------------------------------------- */

.ck-logo .elementor-heading-title {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--green-forest);
  line-height: 1;
}

.ck-logo a {
  text-decoration: none;
  color: inherit;
}

.ck-nav ul {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-nav a {
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
}

/* Hero text takes its colour from the ground it sits on, which is why these
   widgets carry no Elementor global — a global would out-rank this. */
.ck-hero .elementor-heading-title,
.ck-hero__title .elementor-heading-title {
  color: var(--white);
}

.ck-hero__lead,
.ck-hero__lead p {
  color: color-mix(in srgb, var(--white) 88%, transparent);
}

.ck-footer .elementor-heading-title {
  color: var(--white);
}

.ck-footer p {
  color: color-mix(in srgb, var(--white) 80%, transparent);
}

/* The gap between the hero and the first section was the fade plus a full
   section's padding stacked on each other. */
.ck-hero + .ck-section {
  padding-block-start: clamp(2rem, 4vw, 3rem);
}

/* ---------------------------------------------------------------------------
   Beating Elementor's default heading colour.

   Defining global typography makes Elementor emit

     .elementor-widget-heading .elementor-heading-title { color: primary }

   for every heading on the site. That is two classes, so a rule written as
   `.ck-hero h1` — one class and an element — loses to it, and the hero title
   came out brand green on a brand green ground at about 1.3:1.

   These selectors match Elementor's shape rather than fighting it with
   !important, which would win here and lose later against the per-element rule
   Elementor writes when someone picks a colour in the builder. A person
   choosing a colour should still be able to.
   --------------------------------------------------------------------------- */

.ck-hero .elementor-widget-heading .elementor-heading-title {
  color: var(--white);
}

.ck-footer .elementor-widget-heading .elementor-heading-title {
  color: var(--white);
}

.ck-logo .elementor-widget-heading .elementor-heading-title,
.ck-header .ck-logo .elementor-heading-title {
  color: var(--green-forest);
}

/* ===========================================================================
   The static design, in the builder.

   Written mobile-first throughout. The earlier pass laid out for a desktop and
   let flex-wrap sort out the phone, which is how a header ends up stacked on
   top of a hero and a four-column grid ends up four columns wide on a 390px
   screen. Every multi-column rule below is inside a min-width query, so the
   phone gets the simple case and the desktop gets the exception.
   =========================================================================== */

/* Icons ------------------------------------------------------------------- */

.ck-ico {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The sprite itself is inlined for currentColor to work; it must not occupy
   space or be read out. */
body > svg[aria-hidden="true"]:first-of-type,
body > svg:last-child {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Header, over the hero --------------------------------------------------- */

.ck-header {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 50;
  padding-block: 1rem;
  background: transparent;
  backdrop-filter: none;
  border: 0;
  color: var(--white);
}

.ck-header__inner {
  gap: 1rem;
  flex-wrap: wrap;
}

.ck-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--white);
}

.ck-brand img {
  width: 28px;
  height: 28px;
}

.ck-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.ck-brand__name {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
}

.ck-brand__tag {
  font-family: var(--body);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--white) 72%, transparent);
}

/* Colour and type only.
 *
 * The layout is Elementor's. Its nav-menu widget renders the menu twice — once
 * inline for desktop and once inside a burger dropdown for small screens — and
 * a blanket `.ck-nav ul { display: flex }` hits both, overrides the widget's
 * own rules, and produces what it produced here: six links stacked in three
 * rows across the hero, plus a second invisible copy at 0,0. Style the leaves,
 * leave the layout alone. */

.ck-nav .elementor-nav-menu--main .elementor-nav-menu > li > a {
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  color: color-mix(in srgb, var(--white) 88%, transparent);
  fill: currentColor;
}

.ck-nav .elementor-nav-menu--main .elementor-nav-menu > li > a:hover,
.ck-nav .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item-active {
  color: var(--white);
}

/* The burger, on small screens. */
.ck-nav .elementor-menu-toggle {
  color: var(--white);
  background: transparent;
}

/* The dropdown is a white panel over a dark hero, so its links are dark. */
.ck-nav .elementor-nav-menu--dropdown a {
  color: var(--ink);
}

.ck-header__actions {
  gap: 0.75rem;
}

.ck-lang .pll-parent-menu-item > a,
.ck-lang a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
  color: var(--white);
  font-size: 0.85rem;
  text-decoration: none;
}

.ck-lang ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 900px) {
  .ck-nav {
    display: block;
  }
}

/* Hero -------------------------------------------------------------------- */

.ck-hero {
  position: relative;
  padding-block: 7.5rem 3rem;
  color: var(--white);
}

.ck-hero__grid {
  gap: 2.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.ck-hero__copy {
  flex: 1 1 20rem;
  min-width: 0;
}

.ck-hero__visual {
  flex: 1 1 18rem;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.ck-hero__h1 {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--white);
}

/* The single accent on the page. */
.ck-accent {
  color: var(--yellow-deep);
}

.ck-hero__lead,
.ck-hero__lead p {
  max-width: 34rem;
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--white) 84%, transparent);
}

.ck-hero__actions {
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-block-start: 2rem;
}

/* Phone ------------------------------------------------------------------- */

.ck-phone {
  position: relative;
  width: min(300px, 78vw);
}

.ck-phone__body {
  position: relative;
  aspect-ratio: 300 / 620;
  border-radius: 34px;
  padding: 10px;
  background: var(--white);
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.ck-screen {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: cover;
  object-position: top center;
  border-radius: 26px;
  opacity: 0;
  transition: opacity 900ms ease;
}

.ck-screen.is-on {
  opacity: 1;
}

.ck-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}

.ck-float--one {
  inset-block-start: 8%;
  inset-inline-start: -8%;
  color: var(--green);
}

.ck-float--two {
  inset-block-end: 12%;
  inset-inline-end: -10%;
}

@media (prefers-reduced-motion: reduce) {
  .ck-screen {
    transition: none;
  }
}

/* Trust chips ------------------------------------------------------------- */

.ck-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}

.ck-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--white) 26%, transparent);
  background: color-mix(in srgb, var(--white) 8%, transparent);
  color: color-mix(in srgb, var(--white) 88%, transparent);
  font-size: 0.82rem;
}

/* Section headings -------------------------------------------------------- */

.ck-eyebrow .elementor-heading-title {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}

.ck-section__title .elementor-heading-title {
  max-width: 22ch;
  font-size: clamp(1.85rem, 4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* Cards ------------------------------------------------------------------- */

.ck-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: var(--white);
  color: var(--green);
  font-size: 1.15rem;
}

.ck-card--mint {
  background: var(--surface-mint);
  border-color: transparent;
}

.ck-card--warm {
  background: var(--surface-warm);
  border-color: transparent;
}

.ck-section--routes .ck-card--plain .ck-card__icon,
.ck-section--how .ck-card--plain .ck-card__icon {
  background: var(--surface-mint);
}

/* Grid: one column on a phone, and only then more ------------------------- */

.ck-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 700px) {
  .ck-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 1050px) {
  .ck-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }
}

/* FAQ --------------------------------------------------------------------- */

.ck-faq {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 2.5rem;
}

@media (min-width: 800px) {
  .ck-faq {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Footer ------------------------------------------------------------------ */

.ck-footer__cols {
  flex-wrap: wrap;
  gap: 2rem;
}

.ck-footer__cols > * {
  flex: 1 1 14rem;
  min-width: 0;
}

/* Nothing on the page may scroll the body sideways. */
html,
body {
  overflow-x: hidden;
}

/* The header row, on desktop.
 *
 * Elementor gives a widget inside a row container a flexible basis, so the
 * navigation was handed about 430px and its list wrapped onto three lines
 * across the hero. Telling the list not to wrap and the widget not to shrink
 * below its content is what keeps a six-item menu on one line. */

@media (min-width: 900px) {
  /* Elementor lays a container out on its inner element, driven by custom
     properties — so setting flex-wrap on the element that carries the class
     does nothing at all, which is why the menu kept wrapping however many
     times the rule was rewritten. Set the variable it actually reads. */
  .ck-header__inner {
    --flex-wrap: nowrap;
    --gap: 2rem;
    --row-gap: 2rem;
    --column-gap: 2rem;
  }

  .ck-nav {
    flex: 0 1 auto;
    min-width: max-content;
  }

  .ck-nav .elementor-nav-menu--main .elementor-nav-menu {
    flex-wrap: nowrap;
  }

  .ck-brand-wrap,
  .ck-header__actions {
    flex: 0 0 auto;
  }
}

/* The header on a phone.
 *
 * It was allowed to wrap, so the brand took the first line, the burger the
 * second, and the call to action landed on top of the headline. A header is
 * one row at every width — what changes is what is in it, not how many lines
 * it takes. */

@media (max-width: 899px) {
  .ck-header {
    padding-block: 0.75rem;
  }

  .ck-header__inner {
    --flex-wrap: nowrap;
    --flex-wrap-mobile: nowrap;
    --gap: 0.75rem;
    --row-gap: 0.75rem;
    --column-gap: 0.75rem;
  }

  .ck-brand-wrap,
  .ck-nav,
  .ck-header__actions {
    flex: 0 0 auto;
  }

  /* The nav widget is what pushes everything apart, so it takes the slack. */
  .ck-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
  }

  .ck-brand__name {
    font-size: 1.15rem;
  }

  .ck-brand__tag {
    display: none;
  }

  .ck-header__actions .ck-button .elementor-button {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  /* Enough room under a single-row header, and no more. */
  .ck-hero {
    padding-block: 6.5rem 2.5rem;
  }

  .ck-hero__actions {
    margin-block-start: 1.5rem;
  }

  .ck-chips {
    margin-block-start: 2rem;
  }

  /* The floating labels hang outside the phone by design; on a narrow screen
     that is the difference between a nice detail and a horizontal scrollbar. */
  .ck-float--one {
    inset-inline-start: -2%;
  }

  .ck-float--two {
    inset-inline-end: -2%;
  }
}


/* Elementor's row containers wrap by default on mobile, which is right for the
   hero — text above the phone — and wrong for the header. Stated explicitly in
   both places rather than relying on a default that differs per breakpoint. */

.ck-hero__grid {
  --flex-wrap: wrap;
}

.ck-header__actions {
  --flex-wrap: nowrap;
  --gap: 0.6rem;
  --column-gap: 0.6rem;
}

.ck-hero__actions {
  --flex-wrap: wrap;
  --gap: 0.75rem;
  --column-gap: 0.75rem;
}

/* The header row, stated plainly.
 *
 * Two earlier attempts failed for the same reason in different disguises:
 * Elementor lays a container out on its inner element, and it sets
 * --flex-wrap on that inner element directly — so neither a flex-wrap on the
 * outer nor a custom property inherited from it ever reaches the thing doing
 * the layout. Widgets are also given width:100% in there, which is what made
 * three children take three rows however the wrapping was set.
 *
 * So: address the inner element, and give the children back their own width.
 * One row at every size; only the contents change. */

.ck-header__inner > .e-con-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.ck-header__inner > .e-con-inner > * {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.ck-header__inner .ck-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

@media (min-width: 900px) {
  .ck-header__inner > .e-con-inner {
    gap: 2rem;
  }

  .ck-header__inner .ck-nav {
    justify-content: center;
  }
}

/* The actions sit as a row of their own, never stacked. */
.ck-header__actions > .e-con-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.6rem;
}

.ck-header__actions > .e-con-inner > * {
  width: auto;
}

/* The hero: text and phone side by side when there is room, stacked when not. */
.ck-hero__grid > .e-con-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
}

.ck-hero__actions > .e-con-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ck-hero__actions > .e-con-inner > * {
  width: auto;
}

/* Third time, and the reason it took three.
 *
 * Elementor's rule is `.e-con > .e-con-inner { flex-wrap: var(--flex-wrap) }`,
 * and it declares --flex-wrap with enough specificity that neither inheriting
 * it from the parent nor re-declaring flex-wrap at the same weight displaces
 * it. Declaring the variable on the inner element itself does: it is the same
 * element the var() is resolved on, so this is the value that resolves. */

.ck-header .ck-header__inner > .e-con-inner,
.ck-header__actions > .e-con-inner {
  --flex-wrap: nowrap;
  --flex-wrap-mobile: nowrap;
  --flex-wrap-tablet: nowrap;
  --flex-direction: row;
  --align-items: center;
}

.ck-header .ck-header__inner > .e-con-inner > .elementor-widget {
  --widgets-spacing: 0;
  width: auto;
}

/* The hero's two columns, same story as the header.
 *
 * Elementor gives every child of a container width:100%, so two columns that
 * would fit side by side each claim a full row and wrap. Giving them an
 * automatic width and a flex basis is what lets them share the line — and
 * still stack on a phone, because the basis is wider than half a phone. */

.ck-hero__grid > .e-con-inner {
  --flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.ck-hero__grid > .e-con-inner > * {
  width: auto;
  min-width: 0;
}

.ck-hero__grid > .e-con-inner > .ck-hero__copy {
  flex: 1 1 26rem;
}

.ck-hero__grid > .e-con-inner > .ck-hero__visual {
  flex: 0 1 20rem;
  display: flex;
  justify-content: center;
}

/* Cards: the icon should not be stretched across the card by the container's
   default full-width children. */
.ck-card > .e-con-inner > .ck-card__icon {
  width: auto;
  align-self: flex-start;
}