* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
  /* page/text */
  --ink-dark: #111;          /* was #111 everywhere */
  --muted-dark: #333;        /* was #333 */

  --ink:   #f4f4f4; /* inverse of #111 */
  --muted: #e0e0e0; /* inverse of #333 */

  /* little pill / stars strip */
  --pill-border: gray;  /* was gray */
  --pill-bg: #f3f3f3;   /* was #f3f3f3 */
  --stars-gold: #F5C518;/* was #F5C518 */

  /* button */
  --btn-ink: #111;      /* was #111 */
  --btn-bg: #FFB703;    /* was #FFB703 */

  /* quotes ribbon */
  --quotes-bg: #e3e3e3; /* was #e3e3e3 */
}

body, html {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}

.landing-intro {
    /* background: #fff; */
    color: var(--ink);
    text-align: center;
    padding: 2rem 1rem;
    margin-bottom: 1rem;


    /* /1* exp *1/ */
    /* flex: 1;                 /1* fill the available height *1/ */
}
.landing-intro h1 {
    /* font-size: 2.5rem; */
    /* margin-bottom: 0.8rem; */

    /* max-width: 90%; */
    white-space: normal;          /* ensure wrapping even if HTML has spaces like   */
    text-wrap: balance;
    text-wrap: pretty;
    hyphens: auto;
    font-size: clamp(2.0rem, 5.4vw, 2.05rem); /* slightly smaller than before */
    line-height: 1.22;
    margin-bottom: 0.6rem;
}
.landing-intro h2 {
    font-size: 1.25rem;
    opacity: 0.8;
}

/* .hero-container { */
/*     background-color: #f3f3f3; */
/*     width: 100%; */
/*     margin-right: auto; */
/*     margin-left: auto; */
/*     overflow: hidden;            /1* clip rounded corners *1/ */
/* } */


.action-image__img {
  display: block;
  width: 700px;    /* whatever width you want */
  height: auto;    /* preserves the image’s ratio */
  max-width: 80%;
  border-radius: 12px;
  margin: 0 auto;
}

/* .action-image { */
/*     width: 700px; */
/*     /1* width: 100%;                /2* fill its parent *2/ *1/ */
/*     max-width: none;            /1* ignore any inherited max-width *1/ */
/*     height: 100%;                /1* or 100vh if you still want full viewport *1/ */
/*     background: url('/assets/images/compressed/tug-jump.jpeg') no-repeat center top; */
/*     background-size: contain; */
/*     position: relative; */
/*     margin-right: auto; */
/*     margin-left: auto; */
/*     display: flex; */
/*     align-items: center; */
/*     justify-content: center; */
/*     color: #fff; */
/*     border-radius: 12px; */
/*     /1* border: solid black 2px; *1/ */
/*     /1* box-shadow: ; *1/ */
/*     overflow: hidden; */
/* } */

.action-image-content {
    position: relative;
    text-align: center;
    max-width: 90%;
    padding: 1rem;
}

/* .header-hero { */
/*   position: relative; */
/*   overflow: hidden; */
/* } */

/* .header-hero::before { */
/*   content: ""; */
/*   position: absolute; */
/*   inset: 0; */
/*   background: url('/assets/images/hero-banner.png') no-repeat center top; */
/*   background-size: cover; */
/*   width: 900px; */
/*   border-radius: 12px; */
/*   height: auto; */
/*   opacity: 0.2; */
/*   z-index: 0; */
/*   margin-left: auto; */
/*   margin-right: auto; */
/* } */

/* .header-hero__content { */
/*   position: relative; */
/*   z-index: 1; */
/*   text-align: center;  /1* etc *1/ */
/* } */

.stars-container {
  display: inline-flex;             /* shrink-to-fit + easy centering */
  align-items: center;
  gap: .5rem;
  padding: .5rem .80rem;
  /* border: 1px solid gray; */
  /* background-color: #f3f3f3; */
  border: 1px solid var(--pill-border);
  background-color: var(--pill-bg);
  border-radius: 9999px;

  /* width: max-content;               /1* optional; inline-flex already shrink-wraps *1/ */
  flex-wrap: wrap;
  max-width: 100%;

  margin-inline: auto;              /* center the pill if it's on its own line */
  margin-bottom: 2rem;
  transition: transform 0.25s ease;
}

.stars-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.25s ease;
  width: max-content;            /* prevents stretching */
  margin-left: auto;
  margin-right: auto;
}

.stars-container:hover,
.stars-container:focus
/* .stars-link:hover, */
/* .stars-link:focus */ 
{
  transform: translateY(-2px) scale(1.03); /* slight lift + zoom */
  text-decoration: none;
}

.stars {
    /* display: inline-block; */
    display: block;
    /* margin-bottom: 0.5rem; */
    font-size: 1rem;
    /* color: #F5C518; /1* gold *1/ */
    color: var(--stars-gold);
    font-weight: 600;
    /* margin-top: 3rem; */
}

.stars span {
    margin-left: 0.5rem;
    font-size: 0.9rem;
    /* color: #333; */
    color: var(--muted-dark);
    opacity: 0.85;
}

.stars-link:hover .stars span {
  opacity: 1; /* make text fully visible on hover */
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.8rem;
}

h1 small {
    display: block;
    font-size: 1.5rem;
    font-weight: 400;
    font-style: italic;
    opacity: 0.85;
    margin-top: 0.2rem;
}

.weight-main {
    font-weight: 600; /* your “main” weight */
}

.weight-strong {
    font-weight: 800; /* heavier emphasis */
}

.weight-light {
    font-weight: 400; /* lighter emphasis */
    opacity: 0.95;    /* optional fade */
}

.weight-light i {
    font-style: italic; /* preserve italic on the last part */
}

.subtitle-container-new {
    max-width: 75ch;           /* comfortable measure for reading */
    margin-inline: auto;
    padding-inline: 1rem;      /* a bit of side breath on mobile */
    margin-left: auto;
    margin-right: auto;
}

.subtitle-container-new h2 {
    font-size: 0.8rem;
    color: var(--ink);
}

h2 {
    font-size: 1.25rem;
    font-weight: 400;
    opacity: 0.8;
    margin-bottom: 2rem;
}

.landing-intro h2{
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: balance;        /* better line breaks in modern browsers */
  text-wrap: pretty;         /* nicer rag (other engines) */
  hyphens: auto;             /* allows hyphenation (lang="nl" helps) */
  overflow-wrap: break-word; /* safety for long words/URLs */
}

/* @media (min-width: 1024px){ */
/*   .subtitle-container{ max-width: 60ch; } */
/* } */

.landing-arrow {
    width: 140px;
    margin-bottom: -1.2rem;
    margin-left: -5rem;
    margin-right: 1rem;
    background: transparent;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    /* color: #111; */
    /* background: #FFB703; */
    color: var(--btn-ink);
    background: var(--btn-bg);
    border: none;
    border-radius: 2rem;
    text-decoration: none;
    /* box-shadow: 0 4px 6px rgba(0,0,0,0.2); */
    /* transition: transform 0.2s ease, box-shadow 0.2s ease; */
}

/* .btn:hover { */
/*     transform: translateY(-6px); */
/*     box-shadow: 0 6px 8px rgba(0,0,0,0.25); */
/* } */

.note {
    margin-top: 1rem;
    margin-bottom: 3rem;
    font-size: 0.85rem;
    opacity: 0.5;
}

/* .note::before { */
/*     content: url('/assets/images/change.png'); */
/*     margin-right: 8px; */
/*     width: 50%; */
/*     height: auto; */
/* } */

.landing-review-quotes {
    display: flex;
    flex-direction: row;    /* use row, not column */
    gap: 1.5rem;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;

    /* margin-top: 2rem; */
    /* trying to push it down: */
    margin-top: auto;        

    /* position: absolute; */
    /* left: 50%; */
    /* bottom: 1rem; */
    /* /1* transform: translateX(-50%); *1/ */
    /* gap: 1.5rem; */
    z-index: 200000;

    flex-wrap: nowrap;      /* keep them in one line */
    overflow-x: auto;       /* scroll if too wide */
    /* max-width: 80%; */
    padding: 0 1rem;
    /* background-color: #e3e3e3; */
    /* background-color: var(--quotes-bg); */

    padding-inline: 0.5rem;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;


    /* EXPERIMENT: placing at bottom of hero-banner */
    position: absolute;
    left: clamp(8px, 4vw, 48px);
    right: clamp(8px, 4vw, 48px);
    bottom: clamp(8px, 2vh, 24px);

    display: flex;
    gap: 1.2rem;
    justify-content: center;
    align-items: flex-start;

    /* flex-wrap: wrap; */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    /* optional: subtle blur glass look */
    /* backdrop-filter: blur(4px); */
    /* background: color-mix(in oklab, #000 12%, transparent); */ 
    /* border-radius: 10px; padding: .4rem .6rem; */ 
}

/* quote styling */
.landing-review-quote-item {
    /* background: #fff; */
    /* border-left: 4px solid #FFB703; */
    padding: 1rem;
    min-width: 240px;
    /* font-style: italic; */
    margin: 0;
    font-size: 0.85rem;
    /* opacity: 0.5; */
    opacity: 0.85;
    /* color: var(--muted-dark); */
    color: var(--ink);

    max-width: 300px;
    text-wrap: balance;        /* better line breaks in modern browsers */
    text-wrap: pretty;         /* nicer rag (other engines) */


    /* EXPERIMENT: placing at bottom of hero-banner */
    margin: 0;
    font-size: clamp(.8rem, .9vw + .6rem, 1rem);
    opacity: .85;
    /* white-space: nowrap;          /1* keeps short quotes in a pill *1/ */
    flex: 0 0 auto;               /* don’t stretch */
}

.landing-review-quote-item footer {
  margin-top: 0.5rem;
  text-align: right;
  font-style: normal;
  font-weight: 600;
  /* color: #333; */
  /* color: var(--muted-dark); */
  color: var(--ink);
}

/* /1* new test: shapes *1/ */
/* .intro-shapes { */
/*   position: absolute; */
/*   inset: 0; */
/*   z-index: 0;                 /1* behind the content *1/ */
/*   pointer-events: none;       /1* never block clicks *1/ */
/* } */

/* .shape { */
/*   position: absolute; */
/*   display: block; */
/*   opacity: 0.35;              /1* subtle *1/ */
/*   filter: drop-shadow(0 12px 24px rgba(0,0,0,.08)); */
/*   transform: translateZ(0);   /1* avoid paint jitter *1/ */
/*   will-change: transform; */
/*   animation: shape-float 12s ease-in-out infinite; */
/* } */

/* .shape img { display: block; width: 100%; height: auto; } */

/* /1* Left shape — near top-left of the readable column *1/ */
/* .shape--left { */
/*   top: -40px; */
/*   left: max(0px, calc(50% - 680px)); /1* hugs container on huge screens, keeps off-edge on small *1/ */
/*   width: clamp(220px, 26vw, 380px); */
/*   transform: translateY(0) rotate(-4deg); */
/* } */

/* /1* Right shape — near bottom-right *1/ */
/* .shape--right { */
/*   right: max(0px, calc(50% - 700px)); */
/*   bottom: -30px; */
/*   width: clamp(240px, 28vw, 420px); */
/*   transform: translateY(0) rotate(6deg); */
/*   opacity: 0.30; */
/* } */

/* Small-caps eyebrow (overline) */
.eyebrow {
    font-variant-caps: all-small-caps;   /* real small-caps if font supports it */
    text-transform: none;                 /* let font-variant do the work */
    letter-spacing: .08em;
    font-size: clamp(.8rem, .7rem + .4vw, .95rem);
    line-height: 1.1;
    opacity: .9;
    /* margin: 0 0 .5rem 0; */
    margin-bottom: 2rem;
    color: var(--muted, #e3e3e3);

    text-wrap: balance;        /* better line breaks in modern browsers */
    text-wrap: pretty;         /* nicer rag (other engines) */
}

/* Gentle float */
@keyframes shape-float {
  0%   { transform: translateY(0)     rotate(var(--rot, 0deg)); }
  50%  { transform: translateY(-8px)  rotate(var(--rot, 0deg)); }
  100% { transform: translateY(0)     rotate(var(--rot, 0deg)); }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .shape { animation: none; }
}

/* /1* Tighter positions on tablets/phones *1/ */
/* @media (max-width: 1024px) { */
/*   .shape--left  { top: -24px;  left: 8px; } */
/*   .shape--right { right: 0;     bottom: -18px; } */
/* } */

/* /1* Very small screens: smaller + more transparent to keep text readable *1/ */
/* @media (max-width: 640px) { */
/*   .shape { opacity: 0.28; } */
/*   .shape--left  { width: clamp(180px, 40vw, 260px); } */
/*   .shape--right { width: clamp(190px, 44vw, 280px); } */
/* } */


/* @media (min-width: 768px) { */
/*     h1 { font-size: 3.5rem; } */
/*     h1 small { font-size: 2rem; } */
/*     h2 { font-size: 1.5rem; } */
/*     .btn { font-size: 1.1rem; padding: 1rem 2rem; } */

/*     /1* .quotes { *1/ */
/*     /1*     flex-direction: column; *1/ */
/*     /1*     align-items: center; *1/ */
/*     /1* } *1/ */
/* } */