/* ============================================================
   iKaleo Solutions — shared site styles (Bootstrap 5 + custom)

   Mobile-first: every unqueried rule below is the ~375px
   default. Complexity is added only via min-width media queries
   at 480px / 768px / 1200px — never max-width, never a fourth
   breakpoint. See each component for a note on how it behaves
   at 375 / 768 / 1440.
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --ika-teal: #1FE0BA;
  --ika-slate: #697E89;
  --ika-coral: #EB7082;
  --ika-ink: #2C2C2A;
  --ika-navbar-height: 60px;
}

body {
  font-family: 'Open Sans', Arial, sans-serif;
  color: var(--ika-ink);
  padding-top: var(--ika-navbar-height);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', Arial, sans-serif;
}

.script-heading {
  font-family: 'Oooh Baby', cursive;
  color: var(--ika-slate);
}

.ika-divider {
  width: 60px;
  height: 2px;
  background-color: var(--ika-teal);
  margin: 8px auto 20px;
  border-radius: 2px;
}
.ika-divider--left {
  margin-left: 0;
  margin-right: auto;
}
.ika-divider--wide {
  width: 180px;
}
.sv-journey-divider {
  width: 260px;
}
.sp-row-divider {
  /* Proportional to its own heading's width (the ~44% ratio that
     "Website Design" already had at its old fixed 160px) instead
     of a flat width, so every heading gets the same proportioned
     underline regardless of how long its text is. */
  width: 44%;
}
.sp-divider-strategies {
  width: 58%;
}
.sp-divider-wider {
  width: 65%;
}
.sp-divider-gmb {
  width: 68%;
}
/* services.html's 6 body-content underlines (not the shared
   footer's) — nudge down a little from the base 8px top margin,
   and add that same +6px to the bottom margin too. */
.sv-divider-down {
  margin-top: 14px;
  margin-bottom: 26px;
}
/* Shrinks to the width of its widest child (the heading text),
   so the divider's margin:auto centers it under that heading
   specifically instead of under the full (wider) column. */
.sp-heading-wrap {
  display: table;
}

.text-teal { color: var(--ika-teal) !important; }
.text-slate { color: var(--ika-slate) !important; }
.text-coral { color: var(--ika-coral) !important; }

/* ------------------------------------------------------------
   Navbar
   (Bootstrap's navbar-expand-md already handles the mobile
   collapse; nothing here needs a breakpoint of its own.)
   ------------------------------------------------------------ */
.ika-navbar {
  height: var(--ika-navbar-height);
  padding-top: 0;
  padding-bottom: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.ika-navbar .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}
.ika-navbar .navbar-brand img {
  height: 58px;
  width: auto;
}
.ika-navbar .nav-link {
  /* Same typographic treatment as the hero kicker (.ika-hero-kicker). */
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #000;
  /* Light outline so the black text stays legible even when the
     open mobile menu (transparent background) overlaps a dark
     hero video underneath it. */
  -webkit-text-stroke: 0.75px rgba(255,255,255,0.8);
  text-stroke: 0.75px rgba(255,255,255,0.8);
}
@media (min-width: 768px) {
  .ika-navbar .nav-link {
    /* Desktop nav always sits on the navbar's own solid white
       background (no transparent mobile menu overlapping a hero
       video here) — sub-pixel stroke widths don't render
       distinguishably anyway, so just drop it entirely. */
    -webkit-text-stroke: 0;
    text-stroke: 0;
  }
}
.ika-navbar .nav-link.active,
.ika-navbar .nav-link:hover,
.ika-navbar .nav-link:active {
  color: var(--ika-teal);
}

/* ------------------------------------------------------------
   Hero sections (full-bleed video / image background)
   375: kicker + title stack centered, title uses clamp() so it
        never forces horizontal scroll on a narrow phone.
   768/1440: same layout, title simply grows toward its clamp
        ceiling — no structural change needed at any breakpoint.
   ------------------------------------------------------------ */
.ika-hero {
  position: relative;
  min-height: 85vh;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #000;
}
.ika-hero video.hero-bg,
.ika-hero img.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Homepage hero only: at mobile widths the section is much taller
   (portrait-ish) than the 16:9 clip, so object-fit:cover — scaling
   to fill the height — crops well over half the width, and the
   mascot and the person sit near the two outer edges of the frame,
   so one of them lands outside the visible crop. Switch to `contain`
   below 768px so the full frame (both of them) is always visible,
   letterboxed on the hero's own black background instead of cropped.
   Desktop viewports are wide enough relative to 85vh that cover
   never crops this tight, so it's untouched there. */
@media (max-width: 767.98px) {
  .ika-hero--home video.hero-bg {
    object-fit: contain;
  }
}
.ika-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: clamp(1.5rem, 6vw, 2.5rem) 1.25rem;
}
/* Extra breathing room between the hero and the content below it on about.html. */
.about-intro {
  margin-top: 77px;
}
.ika-hero-kicker {
  font-size: 0.875rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  margin-bottom: 1rem;
}
.ika-hero-title {
  font-family: 'Oooh Baby', cursive;
  font-size: clamp(2.5rem, 9vw, 5rem);
  color: var(--ika-slate);
  text-shadow: 0 4px 24px rgba(0,0,0,0.45);
}

/* Services hero.
   Mobile: centered in the hero, same vertical centering as every
   other page's hero (e.g. about.html) — kicker sits close above
   the heading, both centered as a block.
   768px+: shifted right to land on the wall in the background
   video, between the right edge and the chair, bigger heading. */
.services-hero-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;
}
@media (min-width: 768px) {
  .services-hero-content {
    /* Real layout positioning instead of a transform: the auto
       margin absorbs free space on the left, pushing the box as
       far right as the container naturally allows without ever
       painting past its edge (unlike a vw-based transform, which
       clipped at some viewport widths but not others). */
    margin-right: 1.5vw;
  }
}
.services-hero-content .ika-hero-kicker {
  color: #fff;
  margin-bottom: 0.25rem;
}
.services-hero-content .ika-hero-title {
  color: var(--ika-coral);
  font-size: clamp(3.5rem, 13vw, 7.5rem);
}
/* "Start Your Journey" section — extra breathing room from the
   hero above (was Bootstrap's py-5, 3rem top and bottom), and
   below (more room before the Strategies video underneath). */
.sv-start-journey {
  padding: 6rem 0 7rem;
}
.sv-start-journey h2 {
  font-family: 'Oooh Baby', cursive;
  /* Fixed 65px wrapped to two lines on real small phones — the
     container only has ~351px to work with at 375px wide (12px
     padding each side) and ~296px at 320px, but "Start Your
     Journey" needs 436px at 65px (measured against the actual
     loaded Oooh Baby metrics). Scales down on narrow screens,
     reaching the original 65px again by ~535px and staying there
     through desktop, where it always fit. */
  font-size: clamp(2.4rem, 13vw - 3px, 65px);
}
.ika-hero-logo img {
  width: min(90%, 640px);
  height: auto;
}

/* ------------------------------------------------------------
   Full-bleed background image sections
   375: single column, fluid padding.
   768/1440: unchanged structurally — padding just grows toward
        its clamp ceiling.
   ------------------------------------------------------------ */
.ika-bg-section {
  position: relative;
  min-height: 70vh;
  padding: clamp(3rem, 12vw, 175px) 0;
  margin-bottom: clamp(2rem, 8vw, 100px);
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}
.ika-bg-section .ika-bg-card {
  max-width: 420px;
  width: 100%;
}

/* ------------------------------------------------------------
   Project teaser links (homepage puzzle-piece section)
   ------------------------------------------------------------ */
.project-teaser {
  position: relative;
  text-decoration: none;
}
.project-teaser img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.project-teaser-title {
  font-family: 'Oooh Baby', cursive;
}
.project-teaser-title.text-coral { color: var(--ika-coral); }
.project-teaser-title.text-slate { color: var(--ika-slate); }

/* ------------------------------------------------------------
   Newspaper-style copy (About / Projects)
   ------------------------------------------------------------ */
.np-kicker {
  display: block;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ika-slate);
  margin: 0 0 8px;
}
.np-heading {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: 700;
  color: var(--ika-slate);
}
.reel-spotlight .np-heading a {
  display: inline-block;
  transform-origin: left center;
  transition: transform 0.2s ease, color 0.2s ease;
}
.reel-spotlight .np-heading a:hover {
  transform: scale(1.15);
  color: #fff !important;
  -webkit-text-stroke: 1px var(--ika-slate);
  text-stroke: 1px var(--ika-slate);
}
.np-rule {
  border: none;
  border-top: 4px double var(--ika-ink);
  margin: 10px 0 4px;
}
.np-rule-thin {
  border: none;
  border-top: 1px solid var(--ika-ink);
  margin: 0 0 22px;
}
.np-body p {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1rem;
  line-height: 1.7;
  text-align: justify;
  color: var(--ika-ink);
}
.np-body p:first-of-type::first-letter {
  float: left;
  font-family: Georgia, serif;
  font-size: 3.6rem;
  line-height: 0.78;
  font-weight: 700;
  padding: 4px 8px 0 0;
  color: var(--ika-slate);
}
.np-photo {
  border: 1px solid var(--ika-ink);
  border-radius: 20px;
  padding: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.32);
}

/* ------------------------------------------------------------
   Generic card carousel (About "Four Corner Pieces",
   Services "iKaleo Difference")
   375: 1 card visible per slide.
   480+: 2 cards visible per slide.
   768+: 4 cards visible per slide (unchanged through 1440+).
   Breakpoints here MUST match the visibleCount() thresholds in
   assets/js/site.js.
   ------------------------------------------------------------ */
.ika-carousel {
  width: 100%;
  margin: 20px 0 10px;
}
.ika-carousel-title {
  text-align: center;
  font-family: 'Oooh Baby', cursive;
  font-size: 2.8rem;
  color: var(--ika-slate);
  margin-bottom: 8px;
}
.sv-carousel-title {
  /* Flat 56px + nowrap only actually fit "The iKaleo Difference" on
     one line from ~530px wide up — narrower than that (most real
     phones: 375, 390, 414...) the nowrap text overflowed the
     centered box symmetrically past both edges, reading as
     off-center rather than centered-but-clipped. Scales down below
     that width, holding 56px (unchanged) from ~530px up through the
     768px breakpoint, where the desktop rule below takes over. */
  font-size: clamp(2rem, 11vw - 2.5px, 56px);
  white-space: nowrap;
  margin-bottom: 46px;
}
@media (min-width: 768px) {
  .sv-carousel-title {
    font-size: 90px;
    white-space: normal;
  }
}
.ika-carousel-outer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ika-carousel-window {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.ika-carousel-track {
  display: flex;
  gap: 16px;
  transition: transform 0.38s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.ika-card {
  flex: 0 0 100%;
  min-width: 0;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e0ddd7;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 18px 34px;
  min-height: 240px;
  text-align: center;
}
@media (min-width: 480px) {
  .ika-card { flex: 0 0 calc(50% - 8px); }
}
@media (min-width: 768px) {
  .ika-card { flex: 0 0 calc(25% - 12px); }
}
/* Services page's carousel — 3 cards visible instead of 4, and
   taller (matches the JS's visibleCount() override, scoped via
   the same .sv-carousel class). */
@media (min-width: 768px) {
  .sv-carousel .ika-card { flex: 0 0 calc(33.333% - 10.67px); }
}
.sv-carousel .ika-card {
  min-height: 340px;
}
/* About page's "Four Corner Pieces" carousel — taller cards. */
.ab-carousel .ika-card {
  min-height: 320px;
}
.ab-carousel .ika-card-divider {
  margin-bottom: 34px;
}
.ika-card--dark {
  background: #16191A;
  border-color: #3A3D3E;
  color: #fff;
}
.ika-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .ika-card-icon {
    width: 56px;
    height: 56px;
  }
}
.ika-card-letter {
  font-size: 3rem;
  font-weight: 800;
  color: var(--ika-slate);
  -webkit-text-stroke: 1px #000;
  margin-bottom: 12px;
}
.ika-card-divider {
  width: 60%;
  height: 1px;
  background: #e0ddd7;
  margin-bottom: 14px;
}
.ika-card-label {
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #888780;
  margin-bottom: 8px;
}
.ika-card--dark .ika-card-label { color: #5DCAA5; }
.sv-carousel .ika-card-label {
  font-size: 15px;
  margin-bottom: 36px;
  color: #EB7082;
}
.sv-carousel .ika-card-divider {
  background: #697E89;
}
.sv-card-icon-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.sv-card-icon-svg {
  width: 26px;
  height: 26px;
}
@media (min-width: 768px) {
  .sv-card-icon-img {
    width: 34px;
    height: 34px;
  }
  .sv-card-icon-svg {
    width: 30px;
    height: 30px;
  }
}
.ika-card-word {
  font-family: Georgia, serif;
  font-size: 1.2rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
}
.ika-card-desc {
  font-family: Georgia, serif;
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
}
.ika-carousel-btn {
  background: none;
  border: none;
  font-size: 2.2rem;
  color: var(--ika-ink);
  opacity: 0.35;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
  line-height: 1;
  transition: opacity 0.2s;
}
.ika-carousel-btn:hover { opacity: 0.75; }
.ika-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.ika-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #D9D3C7;
  cursor: pointer;
  padding: 0;
  transition: background 0.22s;
}
.ika-dot.active { background: #1D9E75; }

/* ------------------------------------------------------------
   Services: S-pattern alternating rows
   375: media stacks above copy (order-1/order-2 in the HTML),
        video height is fluid via aspect-ratio instead of a
        fixed px height.
   768+: Bootstrap's col-md-5/col-md-7 puts them side by side;
        order-md-1/2 alternates which side the media sits on.
   1440: unchanged, columns just have more room.
   ------------------------------------------------------------ */
.sp-row {
  margin-bottom: 70px;
}
.sp-media video,
.sp-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  display: block;
}
.sp-row h3 {
  color: var(--ika-coral);
  font-family: 'Oooh Baby', cursive;
  font-size: 65px;
}
/* "Google My Business" and "Authentic Connections" are long
   enough to wrap onto a second line at mobile widths — shrink
   just those two so they fit on one line; back to the normal
   65px (with room to wrap if it ever needs to) at desktop. */
.sp-row h3.sp-heading-tight {
  font-size: 58px;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .sp-row h3.sp-heading-tight {
    font-size: 65px;
    white-space: normal;
  }
}
.sv-start-journey p,
.sp-row p {
  font-size: 1.25rem;
}

/* ------------------------------------------------------------
   Projects: reel spotlights
   Already fluid (width:100%, height:auto) — no breakpoint
   needed at any width.
   ------------------------------------------------------------ */
.reel-section {
  /* Bootstrap's .row.gy-4 gives the row a -24px margin-top
     AND its first column a +24px padding-top — those cancel,
     so this value IS the true visible gap to the first row's
     content (no compensation needed). */
  padding-top: 125px;
}
.reel-spotlight {
  /* Same cancellation applies row-to-row, so this is also the
     true visible content-to-content gap. */
  margin-bottom: 118px;
}
.reel-spotlight:last-of-type {
  /* 170px visible gap to the footer's content (170 - 52 for
     the footer's own border-top + top padding). */
  margin-bottom: 118px;
}
.reel-spotlight video {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.13);
  display: block;
}

/* ------------------------------------------------------------
   Shared footer + contact form
   ------------------------------------------------------------ */
.ika-footer {
  background-color: #fff;
  border-top: 2px solid var(--ika-teal);
  padding: 3rem 0 20px;
}
@media (min-width: 768px) {
  .ika-footer {
    padding-top: 4rem;
  }
}
/* privacy-policy.html's minimal standalone footer — no video/hello/
   form row, so it doesn't need the full footer's teal top border
   (the page already has one teal divider above, under "Third Party
   Information"; this would have been a second one near the bottom). */
.ika-footer--minimal {
  border-top: none;
}
/* Nudges the whole footer content (video/hello/form row) right. */
.ika-footer .container {
  padding-left: 2rem;
}
.footer-video {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 2 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.13);
  margin-top: 3rem; /* mobile: 1rem less than desktop */
}
@media (min-width: 768px) {
  .footer-video {
    margin-top: 4rem;
  }
}
.footer-hello {
  font-size: 3.5rem;
  letter-spacing: 2px;
}
/* Dead-centers the "Say hello" block within its column, which
   itself sits directly between the video and form columns, and
   drops it down to match the video's lower start. */
.footer-hello-col {
  padding-right: 0;
  margin-top: 2rem;
}
.footer-hello-col .ika-divider {
  width: 120px;
}
.social-icon {
  width: 68px;
  height: 68px;
  object-fit: contain;
  vertical-align: middle;
}
.social-icon-sm {
  width: 40px;
  height: 40px;
}
.ika-contact-form .form-label {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 11px;
  font-weight: 700;
  color: #444;
}
.ika-contact-form .form-control {
  border: none;
  border-bottom: 1.5px solid #333;
  border-radius: 0;
  background: transparent;
  padding: 8px 0;
}
.ika-contact-form .form-control:focus {
  border-bottom-color: var(--ika-teal);
  box-shadow: none;
}
.btn-ika-submit {
  background-color: var(--ika-slate);
  border-color: var(--ika-slate);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 30px;
  padding: 10px 34px;
}
.btn-ika-submit:hover {
  background-color: var(--ika-ink);
  border-color: #fff;
  color: #fff;
}
/* "Projects in the Reel" button — hover uses the same coral as the
   "Full Picture Starts Here" heading instead of the default
   near-black hover shared by the form-submit buttons. */
.pct-projects-btn:hover {
  background-color: var(--ika-coral);
  border-color: var(--ika-coral);
}
/* The extra .btn class matches (and beats, via source order)
   Bootstrap's own higher-specificity `:not(.btn-check)+.btn:active`
   rule, which otherwise sets border-color to an unset custom
   property that falls back to the near-black body text color while
   the button is pressed/focused. */
.btn-ika-submit.btn:active,
.btn-ika-submit.btn:focus {
  border-color: #fff;
}

/* Connect page's full contact form — horizontal slide-to-submit
   button, same interaction/JS as the footer's vertical one, just
   sliding left-to-right instead of top-to-bottom. */
.connect-form-submit {
  position: relative;
  padding-left: 3rem;
  padding-right: 3rem;
  min-width: 16rem;
  letter-spacing: 6px;
  margin-top: 4.5rem; /* mobile: a touch lower than the desktop value below */
}
.connect-form-submit-track {
  display: inline-block;
}
/* The chevron is the drag handle — grab it and slide it right
   across the button to submit. Positioned over the left side of
   the label at rest; JS moves it via translateX as the user drags. */
.connect-form-submit-arrow {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translate(0, -50%);
  display: flex;
  color: var(--ika-teal);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.connect-form-submit.is-sliding .connect-form-submit-arrow {
  cursor: grabbing;
}
/* Override .btn-ika-submit:hover's near-black fill — this button
   stays the same grey on hover, no color change. */
.connect-form-submit:hover {
  background-color: var(--ika-slate);
  border-color: var(--ika-slate);
  color: #fff;
}

/* Footer contact form — fields on the left, a full-height
   vertical submit button on the right (rotated text). */
.footer-form {
  display: flex;
  align-items: stretch;
  gap: 14px;
  max-width: 26rem;
  margin-left: auto;
}
.footer-form-fields {
  flex: 1 1 auto;
  min-width: 0;
}
.footer-form-submit {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  /* Now that the label (.footer-form-submit-track) is positioned
     absolutely (see its own rule below), it no longer contributes to
     this button's own shrink-to-fit width — nothing in-flow does,
     since the arrow and the visually-hidden span were already
     absolute too. Without an explicit width the button would
     collapse to just its padding+border. 44px covers padding+border
     (23px) plus the label's actual rendered thickness (~19.5px). */
  width: 44px;
  padding: 18px 10px;
  white-space: nowrap;
  /* Mobile: .footer-form sits flush against the column's right edge
     (margin-left:auto with no matching right margin), which left the
     button only ~12px off the viewport edge — nudge it back in
     further. .footer-form-fields is flex:1 1 auto with min-width:0,
     so it simply shrinks to absorb the extra margin; the button's
     own size is unaffected. Reset at 768+, where the wider column
     gives the button more natural breathing room already. */
  margin: 0 44px 0 0;
  letter-spacing: 5px;
  border: 1.5px solid #fff;
  transition: border-color 0.2s ease;
}
/* Override .btn-ika-submit:hover's near-black fill — this button
   doesn't change color on hover, only while actually being slid.
   The extra .btn class here matches (and beats, via source order)
   Bootstrap's own higher-specificity `:not(.btn-check)+.btn:active`
   rule, which otherwise sets border-color to an unset custom
   property that falls back to the near-black body text color while
   the button is pressed/held during a slide. */
.footer-form-submit:hover,
.footer-form-submit.btn:active,
.footer-form-submit.btn:focus {
  background-color: var(--ika-slate);
  border-color: #fff;
  color: #fff;
}
/* Keeps each letter upright (not rotated), just stacked top-to-bottom. */
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
/* The static "SUBMIT" label the handle slides past.
   Positioned absolutely and centered by transform, same trick as the
   arrow below — not left in normal flow. Chrome's flex/block sizing
   for an orthogonal (vertical-rl) child is unreliable here: the
   *button*'s own shrink-to-fit width gets computed from the label's
   horizontal, un-rotated metrics (letter-spacing included), which
   has no reason to match the label's real vertical-mode width, and
   when the two disagree — often — the label ends up pinned to the
   left edge of that mismatched box instead of centered (confirmed:
   even explicit justify-content:center on a flex button did nothing
   for this specific child, so it's not just a missing text-align).
   Absolute + translateX(-50%) sidesteps the whole mismatch by
   centering the label directly off the button's own width. top:18px
   matches the original padding-top so the label sits where it did
   in normal flow. */
.footer-form-submit-track {
  display: block;
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
}
/* The chevron is the drag handle — grab it and slide it down the
   track to submit. Positioned over the top of the label at rest;
   JS moves it via translateY as the user drags. */
.footer-form-submit-arrow {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  color: var(--ika-teal);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
/* While actually being slid: fill turns white, the "SUBMIT"
   lettering turns grey/slate (the arrow stays teal). The extra
   .btn class matches the specificity of the :hover/:active/:focus
   rule above so this wins during a real mouse-held drag (which
   triggers :active the whole time), rather than losing to it. */
.footer-form-submit.btn.is-sliding {
  background-color: #fff;
  border-color: var(--ika-slate);
  color: var(--ika-slate);
}
.footer-form-submit.is-sliding .footer-form-submit-arrow {
  cursor: grabbing;
}
.ika-copyright {
  padding: 0 0 4px;
  margin-top: 22px; /* mobile: 2rem more than desktop */
  font-size: 13px;
  color: #666;
}
.ika-copyright a { color: var(--ika-teal); }
@media (min-width: 768px) {
  .ika-copyright {
    margin-top: -10px;
  }
  .footer-form-submit {
    margin-right: 0;
  }
}

/* Floating "Connect with Us" CTA
   375: compact pill (small video + short label), capped to the
        viewport width so it can never run off-screen.
   768+: grows to the full-size video + label version. */
.kale-cta-btn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  background: transparent;
  border-radius: 55px;
  padding: 6px 16px 6px 6px;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.4s ease;
}
.kale-cta-btn.kale-cta-visible {
  opacity: 1;
  pointer-events: auto;
}
.kale-cta-btn:hover { transform: translateY(-2px); }
.kale-cta-btn video {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.kale-cta-btn span {
  font-family: 'Oooh Baby', cursive;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ika-slate);
  white-space: normal;
}
@media (min-width: 768px) {
  .kale-cta-btn { bottom: 24px; right: 24px; padding: 8px 20px 8px 8px; gap: 12px; }
  .kale-cta-btn video { width: 65px; height: 65px; }
  .kale-cta-btn span { font-size: 1.5rem; white-space: nowrap; }
}

/* ------------------------------------------------------------
   Privacy Policy page
   Already fluid (min-height:85vh, flex-centered) — no
   breakpoint needed.
   ------------------------------------------------------------ */
.pp-hero {
  background-image: url('../../images/kale-privacy-policy.webp');
  background-size: cover;
  background-position: center;
  min-height: 85vh;
  padding: 0 0 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-hero-content {
  margin-top: 20rem;
}
/* Mobile: scales with viewport width (measured against the actual
   rendered text) so "Privacy Policy" always stays on one line
   instead of wrapping at the old fixed 90px. Restored to that
   original fixed size at 768+ below, where there's enough width
   for it to fit on one line already. */
.pp-hero-title {
  font-size: clamp(2.5rem, 15vw, 4rem);
  letter-spacing: 2px;
}
@media (min-width: 768px) {
  .pp-hero-title {
    font-size: 90px;
    letter-spacing: 4px;
  }
}
.pp-content {
  padding: 170px 0 70px;
}
/* Extra breathing room between the "Third Party Information"
   heading and its underline (the shared .ika-divider's default 8px
   top margin sits too tight against this page's heading). */
.pp-divider {
  margin-top: 20px;
}
/* Narrower than the page's 860px container so the paragraph reads
   as a tighter, more readable block instead of stretching edge to
   edge under the heading. */
.pp-paragraph {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------
   Connect page
   background-attachment stays "scroll" at every width — fixed
   backgrounds are unreliable/janky on mobile Safari, and using
   "fixed" only at 768px+ changed the reference frame for
   background-position (viewport instead of the element), which
   cropped the top of the image differently than on mobile.
   Keeping it consistent everywhere avoids that mismatch.
   ------------------------------------------------------------ */
.connect-hero {
  background-image: url('../../images/me-bowtie-connect.webp');
  background-attachment: scroll;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #fcf5f0;
  min-height: 85vh;
  padding: 0 0 65px;
  display: flex;
  align-items: center;
}

.connect-content {
  padding-top: clamp(2.5rem, 8vw, 5rem);
}
.connect-hero-text {
  max-width: 480px;
  /* Mobile: nudge down so the text sits over his torso/chest
     instead of his face/neck. */
  transform: translateY(22vh);
}
@media (min-width: 768px) {
  .connect-hero-text {
    transform: none;
    margin-left: -64px;
  }
}
@media (min-width: 1200px) {
  .connect-hero-text {
    /* Wide enough for "Connect with Us" to fit on one line —
       only turned on at this wider breakpoint, since a box wide
       enough to fit the text on one line reaches back over the
       man's face at 768-1199px (his position in the photo scales
       with viewport width, so there's no fixed box width that
       avoids him AND fits the text on one line down there). */
    max-width: 650px;
  }
  .connect-hero-text .ika-hero-title {
    white-space: nowrap;
  }
}
.connect-form-narrow {
  margin-top: 40px;
}
.connect-form-narrow .connect-form-submit {
  margin-bottom: 40px;
}
.connect-mark-title {
  font-size: clamp(3rem, 7vw, 5.5rem);
  margin-top: 3rem; /* mobile: nudge down a little */
}
@media (min-width: 992px) {
  .connect-mark-title {
    /* Smaller ceiling than mobile so "Make your Mark" reliably
       fits on one line within its column instead of wrapping. */
    font-size: clamp(2.5rem, 4.5vw, 4.25rem);
    white-space: nowrap;
    margin-top: -1rem;
  }
  .connect-form-narrow {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .connect-form-submit {
    margin-top: 3rem; /* back to the original desktop value */
  }
}

/* ------------------------------------------------------------
   Homepage — hero logo position
   375: nudged up 17vh within the hero.
   768+: nudged up 20vh (matches the reference screenshot's
        upper-third placement on a full-size viewport).
   1440: unchanged from 768 — vh scales with viewport already.
   ------------------------------------------------------------ */
.hero-logo-shift {
  transform: translateY(-17vh);
}
@media (min-width: 768px) {
  .hero-logo-shift { transform: translateY(-20vh); }
}

/* "Your Personal Brand Advocate" — fluid type, no breakpoints
   needed: clamp() scales it continuously from 375 to 1440+. */
.pba-title {
  font-size: clamp(2rem, 7vw, 75px);
  margin-top: clamp(2rem, 8vw, 100px);
}

/* ------------------------------------------------------------
   Homepage — newspaper stack section
   375: image centered, width 90% of viewport.
   768/1440: image keeps centering, width caps at min(90%,700px)
        so it never grows unreasonably large — no media query
        needed at all.
   ------------------------------------------------------------ */
.np-section {
  justify-content: center;
  /* Pull the image up toward the "Your Personal Brand Advocate"
     title above instead of the default flex-centering (which,
     since content is shorter than the 70vh min-height, otherwise
     leaves a large, title-independent gap up top). */
  align-items: flex-start;
  /* .ika-bg-section's inherited min-height: 70vh forces this section
     taller than the (shorter) image + padding actually need — with
     align-items: flex-start that leftover height becomes dead space
     below the image instead of above it, pushing the "Full Picture
     Starts Here" title on the section below it back down. Shrink to
     fit content on mobile; restored to 70vh at 768+ below, where the
     original layout is unaffected. */
  min-height: 0;
  padding-top: clamp(1rem, 4vw, 40px);
  /* No bottom padding of its own — the 4rem gap before the title is
     set as a single value via .kam-card-slot's margin-top instead, so
     there's one clear source of truth for that spacing rather than
     two values that have to be balanced against each other. Restored
     to the original at 768+ below. */
  padding-bottom: 0;
  margin-bottom: 0;
}
.np-stack-img {
  display: block;
  width: min(96%, 950px);
  height: auto;
}
/* "Kale and me" section — less top padding so it sits closer to
   the newspaper stack image above it, and less bottom padding/margin
   (overriding .ika-bg-section's defaults) so the caption sits closer
   to "Pieces Coming Together" below it. */
.kam-section {
  /* Mobile: title card now renders first (order: -1, above the
     photo), directly under the newspaper image above — as tight as
     possible. Restored to the original, larger desktop value at
     768+ below. */
  padding-top: 0;
  padding-bottom: clamp(1rem, 3vw, 40px);
  margin-bottom: 0;
  /* .ika-bg-section vertically centers its content within a 70vh
     min-height box — with the title now first, that center-alignment
     was leaving a large gap above it. Pin content to the top instead;
     restored to the inherited center at 768+ below. */
  align-items: flex-start;
}

/* ------------------------------------------------------------
   Homepage — "kale and me" photo + card
   375: stacked column (photo, then card below), simple flex.
   768+: switches to a CSS Grid overlap — photo and card slot
        share the same grid cell, card aligned to the
        bottom-right corner of the photo (Grid overlay technique
        instead of a hand-tuned pixel transform).
   1440: unchanged from 768 — the grid cell just grows with the
        container.
   ------------------------------------------------------------ */
.kam-wrap {
  display: flex;
  flex-direction: column;
  /* Mobile: space between "Everything we create reflects that." and
     the kale-and-me photo below it. Has no visual effect at 768+,
     where .kam-wrap becomes a single-cell grid overlay instead (no
     explicit reset needed). */
  gap: 4rem;
}
/* Wraps the image + its bottom caption together so the caption can
   be pinned to the image's own bottom edge regardless of layout
   (stacked on mobile, grid-overlaid on desktop) and sized off the
   image's actual rendered width via container query units. */
.kam-img-frame {
  position: relative;
  container-type: inline-size;
}
.kam-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 25px;
}
/* Caption sits right under the image and scrolls as a continuous
   marquee — solves the "long sentence, one line" problem at any
   screen width without needing to shrink to fit, since it never has
   to fit all at once. */
.kam-caption {
  margin: 10px 0 0;
  font-family: 'Oooh Baby', cursive;
  font-weight: 700;
  color: var(--ika-coral);
  /* Only the horizontal scroll needs clipping — words magnifying as
     they cross the center need vertical room to grow into. */
  overflow-x: hidden;
  overflow-y: visible;
  padding: 0.55em 0;
  white-space: nowrap;
}
.kam-caption-track {
  display: inline-flex;
  /* The track holds two identical copies of the caption back-to-back,
     each with its own trailing spacer baked into its padding — so the
     two copies are exactly the same width and a -50% translate always
     lands the second copy pixel-perfect where the first one started.
     No initial offset, so there's no pause/jump once per cycle: it's
     one continuous, uninterrupted scroll. */
  animation: kam-marquee 14s linear infinite;
}
.kam-caption-item {
  padding-right: 3em;
}
/* Each letter gets its own copy of this same pulse, phase-shifted by
   site.js (via animation-delay, computed from that exact letter's
   measured position on the track) so the peak always lands at the
   instant it's crossing the caption's horizontal center — a "being
   read aloud" magnify effect that travels with the scroll. The rise
   is slow (spans a wide chunk of the cycle) so adjacent letters —
   whose crossing times differ by only fractions of a second — pop up
   looking synced, like the whole word grew at once; the fall is much
   quicker, short enough that same tiny per-letter time gap becomes
   visible, so the word collapses back down in a per-letter cascade
   instead of shrinking as one block. Falls back to plain static text
   if JS never runs (no .kam-letter spans created). */
.kam-letter {
  display: inline-block;
  position: relative;
  transform-origin: center bottom;
  animation: kam-letter-pulse 14s ease-in-out infinite;
}
@keyframes kam-letter-pulse {
  /* Mostly-vertical growth (minor horizontal) — a uniform scale
     would push into neighboring letters/words whenever two magnify
     windows land close together, since transform never reserves
     extra layout space. Letters are packed much tighter in time than
     words were, so this window is narrow — roughly one word's worth
     of letters (~5-6 * the average per-letter time gap), not a whole
     sentence's worth. */
  0%, 43%, 54%, 100% { transform: scale(1, 1); z-index: 0; }
  49%, 51% { transform: scale(1.25, 2); z-index: 2; }
}
@keyframes kam-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .kam-letter {
    animation: none;
  }
  .kam-caption-track {
    animation: none;
  }
  .kam-caption-item:nth-child(2) {
    display: none;
  }
}
.kam-card-slot {
  width: 100%;
  /* Mobile: card (title/underline/lead lines) sits above the photo
     instead of below it — reset back to source order at 768+, where
     layout switches to the grid overlay and this stacking order no
     longer applies. */
  order: -1;
  /* Centers the title (an inline-flex box, so it doesn't stretch to
     the card's full width on its own) along with the already-centered
     lead lines below it. */
  text-align: center;
  /* Space between the newspaper image above and the title. Reset at
     768+, where this sits in its normal flex-end slot instead. */
  margin-top: 4rem;
}
/* .ika-bg-card's max-width (420px) is narrower than the container at
   Bootstrap's sm breakpoint and up (container caps at 540px from
   576px onward) — without this the card would hug the slot's left
   edge instead of sitting under the full-width photo above/below it.
   Reset at 768+, where flex-end positioning takes over instead. */
.kam-card-slot .ika-bg-card {
  margin-left: auto;
  margin-right: auto;
}
/* Wraps the "Full Picture Starts Here" heading + its underline so
   the underline can center under the actual rendered text width
   rather than the full (wider, empty-on-the-right) card column —
   the h2 is a block that spans the whole card even though the text
   itself doesn't fill it, so centering against the card was
   noticeably off from centering under the visible words. Shrinking
   this wrapper to inline-flex makes it hug the heading's true
   width, and align-items centers the underline within that. */
.kam-title-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.kam-title-group h2 {
  font-family: 'Oooh Baby', cursive;
  /* Fluid so "Full Picture Starts Here" fits on one line even on the
     narrowest phones; tapers up to the same fixed 3rem desktop has
     always used once the viewport is wide enough that 7.5vw alone
     would exceed it (~640px), so desktop is unaffected. */
  font-size: clamp(1.6rem, 7.5vw, 3rem);
  white-space: nowrap;
}
/* Lengthen the underline beneath "Full Picture Starts Here" —
   overrides the --left variant's left-alignment. */
.kam-divider {
  width: 250px;
  margin-left: auto;
  margin-right: auto;
}
/* The three short lead lines, centered directly under the title
   instead of staggered. */
.kam-line {
  display: block;
  text-align: center;
  white-space: nowrap;
}
.kam-line-2,
.kam-line-3 {
  margin-top: 14px;
}
@media (min-width: 768px) {
  .kam-wrap {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  .kam-img-frame,
  .kam-card-slot {
    grid-column: 1;
    grid-row: 1;
  }
  /* Restore the original desktop gap above the section, and its
     vertical centering (mobile tightens/top-aligns these above, now
     that the title renders first). */
  .kam-section {
    padding-top: clamp(2rem, 6vw, 80px);
    align-items: center;
  }
  /* Restore the original newspaper-section bottom gap and min-height
     (mobile shrinks both above so the title sits closer beneath it). */
  .np-section {
    min-height: 70vh;
    padding-bottom: clamp(1rem, 4vw, 40px);
  }
  /* Desktop: sits in normal flow below the image, with room to
     breathe before it. Font size scales off container query units
     (cqw = % of .kam-img-frame's own rendered width) for a size
     that tracks the image's actual width at any breakpoint. */
  .kam-caption {
    margin: clamp(16px, 3cqw, 32px) 0 0;
    font-size: clamp(20px, calc(3.3cqw - 4px), 60px);
  }
  .kam-card-slot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: clamp(1.5rem, 4vw, 3rem);
    /* Trimmed toward 0 (from clamp(0.5rem, 2vw, 1rem)) to reclaim a
       little extra room on the right for .kam-line-3's overhang. */
    padding-right: clamp(0.25rem, 1vw, 0.5rem);
    position: relative;
    z-index: 2;
    order: 0; /* back to source order — mobile's above-the-photo stacking doesn't apply here */
    text-align: left; /* back to source alignment — desktop's flex-end + negative margins already position the title */
    margin-top: 0; /* back to source position — mobile's pull-up above the photo doesn't apply here */
  }
  .kam-card-slot .ika-bg-card {
    margin-left: 0;
    margin-right: 0; /* flex-end on the slot positions the card at desktop, not auto margins */
  }
  /* At 3rem the heading is wider than the card column and was
     starting to push past the real viewport edge at narrower
     desktop widths (forcing a horizontal scrollbar) — shift it left
     to compensate rather than shrink the requested size. The lines
     below get the same shift so they stay centered under it. */
  .kam-title-group {
    margin-left: -60px;
  }
  .kam-line {
    margin-left: -60px;
  }
  /* Nudge the heading/underline/paragraph down from dead-center,
     and narrow the card so the paragraph wraps tighter — since
     the slot is right-aligned, narrowing it also shifts the
     whole card further right.
     (.ika-bg-section .ika-bg-card also sets max-width at equal
     specificity to a bare .kam-card, so match it with .ika-bg-card
     here too to win on source order.) */
  .ika-bg-card.kam-card {
    /* Pushed further down now that the caption moved out from under
       the image (it sits below it instead), freeing up more room
       inside the photo for the card to drop into. */
    transform: translateY(135px);
    max-width: 340px;
  }
  /* Keep the heading on a single line even though the card itself
     is narrower than the heading text — the card has no background
     box to clip against, so the line is free to run past the
     340px column. */
  .kam-card h2 {
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------
   Homepage — "Pieces Coming Together" section
   375/768/1440: intro text, then Flori teaser, stacked full-width
        via flex column at every breakpoint (previously switched to
        a side-by-side grid at 768+, but the intro block is meant
        to center across the section's full width, not sit in a
        left column beside the image). Clearly Organic Green lives
        in its own section below (.pct-clearly-section).
   ------------------------------------------------------------ */
.pct-section {
  position: relative;
  overflow: hidden;
  /* Bottom padding trimmed from the old clamp(3rem, 10vw, 7.5rem)
     — that was sized to lead into the footer when Clearly Organic
     Green's row lived in this same section. Now it only needs to
     separate this section from .pct-clearly-section below, so it
     matches .pct-container's own row gap instead. */
  padding: clamp(1.5rem, 4vw, 60px) 0 clamp(2rem, 6vw, 3rem);
}
/* Background photo, capped to the same band height as
   .pct-clearly-bg below (the Clearly Organic Green section's
   looping video) so the two sections' backgrounds match, and
   vertically centered through this section the same way. */
.pct-bg {
  position: absolute;
  /* Mobile: pushed down an extra fixed amount (on top of the 62%
     mark) so there's visible white space between the intro paragraph
     above and this background band, rather than the two touching.
     Restored to the plain 62% at 768+ below. */
  top: calc(62% + 4.5rem);
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  /* Slightly taller band than before so object-fit: cover's crop
     factor is driven a little less by width — reveals a bit more
     of the clip's top and bottom (a gap-free "zoom out") instead
     of cropping in as tight as the shorter band did. */
  height: clamp(280px, 50vw, 510px);
  object-fit: cover;
  z-index: 0;
}
.pct-section .container {
  position: relative;
  z-index: 1;
}
/* Centers the title, its underline, and both paragraphs below it. */
.pct-intro-col {
  text-align: center;
}
.pct-intro-col h2 {
  font-family: 'Oooh Baby', cursive;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
}
/* Shrinks to hug the heading's actual text width (h2 is otherwise a
   block spanning the full, wider column) so the underline — which
   defaults to centered via .ika-divider's own margin — lines up
   under the visible words instead of the column's center. */
.pct-title-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
/* Lengthen the underline beneath "Pieces Coming Together". */
.pct-divider {
  width: 300px;
}
/* Single stacked column at every width — intro block on top, Flori
   puzzle image below — rather than the old side-by-side grid, so
   the title/paragraphs center across the section's full width
   instead of being confined to a left column. */
.pct-container {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 6vw, 3rem);
}
@media (min-width: 768px) {
  .pct-container {
    gap: clamp(2rem, 4vw, 3rem);
  }
}
/* Caps the intro block to a readable line-length and centers that
   narrower block within the section's full width (auto margins on
   a width-capped block) — otherwise it stretches edge-to-edge, so
   text-align:center alone only centers each line within that wide
   box, not the block itself. */
.pct-intro-col {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
/* Flori Concepts Designs teaser — just the puzzle collage now (the
   "Flori Concepts Designs" script-heading overlay was removed). */
.pct-flori-wrap {
  display: flex;
  flex-direction: column;
  text-align: center;
}
/* Shrink the puzzle collage itself, centered within its column, and
   nudge it down within the wrap. (.project-teaser img sets
   width:100% at class+tag specificity, which beats a bare
   .pct-flori-img class — so match it with the compound
   .pct-flori-wrap .pct-flori-img here instead.) */
.pct-flori-wrap .pct-flori-img {
  /* Mobile: small nudge down from the intro text above it (on top
     of .pct-container's own 2rem gap between the two, so the total
     gap stays modest). Restored to the original desktop sizing at
     768+ below. */
  width: 45%;
  margin: 3.5rem -1.5rem 0 auto;
}
@media (min-width: 768px) {
  /* .pct-container's columns are a 5fr:7fr split (wider than
     .pct-clearly-grid's even 1fr:1fr), so the same width % would
     render bigger here than on the Clearly puzzle image — knock it
     down to match Clearly's actual rendered size instead of just
     matching the percentage. Positive top margin (replacing the old
     negative pull-up, which existed to align the removed title
     overlay with the intro column) moves it down instead. */
  .pct-flori-wrap .pct-flori-img {
    width: 33%;
    margin-top: clamp(0.25rem, 1.5vw, 0.75rem);
    margin-left: auto;
    margin-right: 0;
  }
  /* Restore the plain 62% mark (mobile adds a fixed offset above to
     create a gap under the intro paragraph, which has less need to
     breathe at desktop's wider, shorter-wrapping line lengths). */
  .pct-bg {
    top: 62%;
  }
}

/* Clearly Organic Green section — split out from .pct-section so
   it's its own standalone section rather than a grid row sharing
   the "Pieces Coming Together" intro/Flori section above it. No
   top padding: .pct-section's own bottom padding already carries
   the gap up to here. Bottom padding matches the old .pct-section
   value that used to lead into the footer, since this section now
   plays that role instead.
   375: title stacked above the image via a Grid area (no flex
        column-reverse hack needed).
   768+: switches to two Grid columns, image | title, side by
        side, matching the original "beside, not overlaid"
        composition. */
.pct-clearly-section {
  position: relative;
  overflow: hidden;
  padding: 0 0 clamp(3rem, 10vw, 7.5rem);
}
/* Looping background video — same object-fit: cover treatment as
   .ika-hero's video, but capped to a shorter band and centered
   vertically through the section instead of stretching the full
   height (inset:0 previously made it span top-to-bottom). */
.pct-clearly-bg {
  position: absolute;
  top: 44%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  /* Slightly taller band than before so object-fit: cover's crop
     factor is driven a little less by width — reveals a bit more
     of the clip's top and bottom (a gap-free "zoom out") instead
     of cropping in as tight as the old, shorter band did. */
  height: clamp(240px, 44vw, 460px);
  object-fit: cover;
  z-index: 0;
}
.pct-clearly-section .container {
  position: relative;
  z-index: 1;
}
.pct-clearly-grid {
  display: grid;
  grid-template-areas: "title" "image";
  gap: 1rem;
  align-items: center;
  text-align: center;
}
.pct-clearly-title-col { grid-area: title; }
.pct-clearly-img-col { grid-area: image; }
/* Client logo replacing the old "Clearly Organic Green" script
   heading — sized/centered the same way the text heading was. */
.pct-clearly-logo {
  width: clamp(260px, 38vw, 440px);
  height: auto;
  margin: 0 auto;
}
/* Shrink the puzzle collage, centered within its column. (Same
   specificity issue as .pct-flori-wrap .pct-flori-img above —
   .project-teaser img sets width:100% at class+tag specificity,
   which beats a bare .pct-clearly-img class, so match it with the
   compound .pct-clearly-img-col .pct-clearly-img here instead.) */
.pct-clearly-img-col .pct-clearly-img {
  /* Mobile: shrunk down from the original 79% so it reads smaller
     next to the (now bigger) Flori puzzle image above it. Restored
     to 79% at 768+ below. */
  width: 55%;
  /* Shifted left (was centered via auto/auto) — right margin dropped
     to 0 so the image hugs the left side of its column, then pulled
     further left past the column's own edge with a negative margin.
     Restored to centered at 768+ below, where it sits in its own
     grid column beside the title instead. */
  margin: 1.5rem auto 0 -2.5rem;
  /* drop-shadow (not box-shadow) follows the puzzle pieces' actual
     alpha-channel silhouette instead of the image's rectangular
     bounding box, which is mostly transparent. */
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.3));
}
@media (min-width: 768px) {
  .pct-clearly-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "image title";
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .pct-clearly-img-col .pct-clearly-img {
    width: 79%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ------------------------------------------------------------
   404 page (404.html)

   The clip is a white-background studio render, so the section
   stays white and the video reads as part of the page rather
   than as a boxed-in player — no border, no shadow, no radius.
   375: video first, copy stacked underneath, everything
        centered.
   768/1440: same stack, just wider — the video caps out well
        before the container does so it never dwarfs the copy.
   ------------------------------------------------------------ */
.nf-section {
  background-color: #fff;
  min-height: calc(100vh - var(--ika-navbar-height));
  display: flex;
  align-items: center;
  padding: 1.5rem 0 2.5rem;
}
.nf-video {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 0 auto;
}
.nf-copy {
  /* Pulled up into the clip's own bottom whitespace so the heading
     sits close to the mascot's feet rather than a screen away from
     them. That whitespace is only ~10% of the video's own height
     (measured off the poster frame), and the video shrinks a lot
     more on narrow phones than this pull ever did — so the pull is
     kept small enough to clear the narrowest video (a 320px-wide
     phone renders it at ~167px tall, ~17px of that whitespace)
     rather than the desktop-sized video, or the title lands on top
     of the mascot's feet instead of the blank space below them. */
  margin-top: -0.5rem;
}
.nf-kicker {
  color: var(--ika-coral);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .nf-kicker {
    font-size: 1.5rem;
  }
}
.nf-title {
  font-size: clamp(2.5rem, 11.5vw, 4rem);
  letter-spacing: 1px;
  margin-bottom: 0;
}
.nf-divider {
  width: min(320px, 80%);
  margin-top: 14px;
  margin-bottom: 2rem;
}
.nf-body {
  color: var(--ika-slate);
  /* Only the paragraph is line-length capped — the heading is left
     free to run the full container width so it stays on one line at
     desktop instead of breaking after "is". */
  max-width: 540px;
  margin: 0 auto 2rem;
}
.nf-btn:hover {
  background-color: var(--ika-coral);
  border-color: var(--ika-coral);
}
@media (min-width: 768px) {
  .nf-video {
    max-width: 620px;
  }
  .nf-copy {
    /* Desktop video is taller (max-width 620px), so its ~10%
       whitespace band is bigger too, but stay under it. */
    margin-top: -1.5rem;
  }
  .nf-body {
    /* Widened from the 540px mobile cap: at 540px the first sentence
       wraps early on its own before reaching the forced <br> in the
       markup (d-none d-md-block, after "all."), splitting the
       paragraph into three lines instead of the intended two. 580px
       is just past that sentence's measured width. */
    max-width: 580px;
  }
  .nf-title {
    font-size: 76px;
    letter-spacing: 2px;
  }
}