/* ==========================================================================
   KOSO MEDIA SAS, koso.media
   Hand-written CSS. No build step, no CDN, no external requests.
   Every font is self-hosted; every image is local. This site has to survive
   unattended into 2027, so it has no dependency that can fail on its own.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts: self-hosted, SIL Open Font License
   Roboto / Poppins / Heebo mirror the original Wix faces.
   Jost stands in for Brandon Grotesque (commercial, not licensable to serve).
   Kiona is NOT webfonted, because it is unlicensed for web use, so the wordmark and
   the hero K ship as the rasterised brand PNGs instead.
   -------------------------------------------------------------------------- */
@font-face { font-family: "Roboto"; src: url("/fonts/roboto-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/roboto-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/roboto-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/roboto-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Heebo"; src: url("/fonts/heebo-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap; }

/* --------------------------------------------------------------------------
   Palette, sampled from the live Wix site 2026-08-11
   -------------------------------------------------------------------------- */
:root {
  --bg:          #FFFEFC;  /* warm off-white page background */
  --green-deep:  #1C534A;  /* nav links, contact headings */
  --green-mid:   #2A7C6F;  /* wordmark, intro line, footer */
  --mint:        #37BD9B;  /* solution band, why-us columns, active nav */
  --slate:       #373B4D;  /* form labels and input rules */
  --gold:        #FCB400;  /* call-to-action buttons */
  --ink:         #0E2925;  /* promise headings */
  --near-white:  #F6FDFB;  /* step numerals */
  --black:       #000000;

  --shell:  980px;  /* original Wix content column */
  --gutter: 24px;

  /* Height of the sticky header at this breakpoint. Anchor offsets read from
     this, so the two can never drift apart. Overridden in the media queries
     below, where the header wraps and grows. */
  --header-h: 77px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--black);
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* The Wix original lays content on a 980px column with no side padding at
   desktop. Adding the gutter to max-width keeps the *content* at 980px so
   every x-position matches, while still giving small screens breathing room. */
.shell {
  width: 100%;
  max-width: calc(var(--shell) + (2 * var(--gutter)));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   Anchor targets
   The header is sticky, so a plain jump to #why-us puts the section's top edge
   at y=0 and the header then sits on top of it, swallowing the heading. Every
   scroll target reserves the header's height plus a little air, so the section
   lands just below the bar instead of behind it.
   -------------------------------------------------------------------------- */
#top, #our-solution, #apply, #why-us, #contact, #main {
  scroll-margin-top: calc(var(--header-h) + 8px);
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--green-deep); color: #fff;
  padding: 12px 20px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  height: 77px;
  display: flex; align-items: center;
}
.site-header__inner {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 12px;
}
.wordmark { flex: none; }
/* 236px is the wordmark's measured ink width on the live Wix header. */
.wordmark img { width: 236px; height: auto; }

.nav { display: flex; align-items: center; gap: 0; margin-left: 9px; }
.nav a {
  font-family: "Roboto", sans-serif;
  font-weight: 700; font-size: 21px; line-height: 47px;
  color: var(--green-deep);
  text-decoration: none;
  padding-inline: 12px;
  border-right: 1px solid rgba(28, 83, 74, 0.25);
  white-space: nowrap;
}
.nav a:last-child { border-right: 0; }
.nav a:hover, .nav a:focus-visible { color: var(--mint); }
.nav a[aria-current="page"] { color: var(--mint); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Poppins", sans-serif; font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none; cursor: pointer;
  border: 0;
}
.btn--nav {
  margin-left: auto; flex: none;
  background: var(--gold); color: #fff;
  font-size: 20px;
  width: 171px; height: 47px;
  border-radius: 7px;
  white-space: nowrap;
}
.btn--nav:hover, .btn--nav:focus-visible { background: #e8a600; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 983px;
  background: var(--black);
  display: flex; align-items: flex-start; justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Scrim holding the white hero copy legible over the photograph. The studio
   shot has large blown-out areas behind the body line, so a flat wash is not
   enough: this darkens the vertical band the copy sits in and eases off at the
   edges, keeping the picture open while the text stays readable. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.30) 0%,
      rgba(0, 0, 0, 0.46) 38%,
      rgba(0, 0, 0, 0.46) 72%,
      rgba(0, 0, 0, 0.28) 100%);
}
.hero__inner {
  position: relative; z-index: 1;
  padding: 169px var(--gutter) 80px;
  max-width: 860px;
}
/* Sized and spaced so the hero title lands 396px into the hero, matching the
   live site. The logo K's proportions differ from Kiona's glyph, so the gap
   below it is tuned to the title position rather than to the mark's own box. */
.hero__k {
  height: 105px; width: auto;
  margin: 0 auto 122px;
}
.hero__title {
  font-family: "Roboto", sans-serif;
  font-weight: 500; font-size: 28px; line-height: 36.4px;
  letter-spacing: 0.28px;
  color: var(--bg);
  margin: 0;
}
.hero__body {
  font-weight: 300; font-size: 28px; line-height: 36.4px;
  letter-spacing: 0.28px;
  color: var(--bg);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Intro line
   -------------------------------------------------------------------------- */
.intro { padding: 156px 0 68px; }
.intro p {
  font-family: "Jost", sans-serif;
  font-weight: 300; font-size: 40px; line-height: 54px;
  color: var(--green-mid);
  text-align: center;
  max-width: 918px; margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Promises: photo left, four blocks right
   -------------------------------------------------------------------------- */
/* Self-hosted Roboto Light sets marginally wider than the Wix-served face, so
   the promise copy runs a line longer. Gap and bottom padding are trimmed to
   land the next band on the original's y-position instead. */
.promises { padding-bottom: 87px; }
/* Measured off the live site: 450px photo, 117px gap, 312px text column.
   The text column width is load-bearing; widen it and the copy under-wraps
   and the photo overhangs it (the failure gotcha 20 documents). */
.promises__grid {
  display: grid;
  grid-template-columns: 450px 312px;
  justify-content: start;
  column-gap: 117px;
  align-items: start;
}
.promises__photo {
  width: 450px; height: 952px;
  object-fit: cover;
}
.promises__list { display: grid; row-gap: 20px; }
/* The original absolutely-positions these headings, so they sit on one line and
   overflow the 312px copy column into the right-hand slack. Reproduced. */
.promise__title {
  display: flex; align-items: baseline; gap: 8px;
  font-family: "Roboto", sans-serif;
  font-weight: 700; font-size: 30px; line-height: 30px;
  color: var(--ink);
  margin: 0 0 8px;
  white-space: nowrap;
}
.promise__title .tick { font-size: 30px; line-height: 30px; }
.promise p {
  font-weight: 300; font-size: 18px; line-height: 30.6px;
  color: var(--black);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Our Solution: mint band
   -------------------------------------------------------------------------- */
.solution {
  background: var(--mint);
  padding: 63px 0 160px;
  color: #fff;
}
.solution__heading {
  font-family: "Roboto", sans-serif;
  font-weight: 700; font-size: 46px; line-height: 1.1;
  letter-spacing: 13.8px;
  color: #fff;
  text-align: center;
  max-width: 816px;      /* wraps to two lines exactly as the original does */
  margin: 0 auto 118px;
}
.solution__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 5px;
}
/* Two classes, not one: `.step p` below is (0,1,1) and would otherwise win the
   cascade and render these numerals at 18px. They are meant to be huge. */
.step .step__num {
  font-family: "Heebo", sans-serif;
  font-weight: 700; font-size: 70px; line-height: 84px;
  color: var(--near-white);
  text-align: center;
  max-width: none;
  margin: 0 0 13px;
}
.step__title {
  font-family: "Roboto", sans-serif;
  font-weight: 700; font-size: 25px; line-height: 37.5px;
  letter-spacing: 2.5px;
  color: #FFFFFE;
  text-align: center;
  margin: 0 0 14px;
}
.step p {
  font-weight: 500; font-size: 18px; line-height: 31.5px;
  color: #fff;
  text-align: center;
  max-width: 253px; margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Apply: form left, photo right
   -------------------------------------------------------------------------- */
.apply { padding: 77px 0 128px; background: var(--bg); }
.apply__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 452px;
  column-gap: 80px;
  align-items: start;
}
/* The original indents the form block inside its column: labels at x262,
   heading a further 53px in. Reproduced rather than left flush. */
.apply__form-col { padding-left: 112px; }
.apply__heading {
  font-family: "Roboto", sans-serif;
  font-weight: 700; font-size: 46px; line-height: 63.25px;
  color: var(--black);
  margin: 0 0 40px 53px;
}
.apply__photo { width: 452px; height: 585px; object-fit: cover; margin-top: 130px; }

.field { margin-bottom: 26px; }
.field__row { display: grid; grid-template-columns: 150px 150px; gap: 30px; }
.field label, .fieldset__legend {
  display: block;
  font-family: "Roboto", sans-serif;
  font-weight: 700; font-size: 14px; line-height: 14px;
  color: var(--slate);
  margin-bottom: 8px;
}
.field input[type="text"],
.field input[type="email"] {
  width: 100%; height: 36px;
  background: var(--bg);
  border: 2px solid var(--slate);
  border-radius: 0;
  color: var(--black);
  font-family: "Roboto", sans-serif; font-size: 14px; font-weight: 400;
  padding: 0 8px;
}
.field input:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
.field--wide input { max-width: 330px; }

.radios { border: 0; padding: 0; margin: 0 0 30px; }
.radios label {
  display: flex; align-items: center; gap: 10px;
  font-weight: 400; font-size: 14px; line-height: 33px;
  color: var(--slate);
  margin-bottom: 0;
}
.radios input { accent-color: var(--mint); width: 15px; height: 15px; }

.btn--submit {
  background: var(--gold); color: var(--bg);
  font-family: "Roboto", sans-serif; font-weight: 700;
  font-size: 26px; line-height: 31.2px; letter-spacing: normal;
  width: 284px; height: 48px;
  border-radius: 0;
}
.btn--submit:hover, .btn--submit:focus-visible { background: #e8a600; }

/* Confirmation shown in place of the form after a successful submission. */
.apply__note {
  font-family: "Roboto", sans-serif;
  font-weight: 400; font-size: 22px; line-height: 32px;
  color: var(--green-deep);
  border-left: 3px solid var(--mint);
  padding: 4px 0 4px 18px;
  max-width: 330px;
  margin: 24px 0 0;
}
.apply__note[hidden] { display: none; }

/* Honeypot: off-screen, not display:none (bots skip hidden inputs) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.form-success {
  border: 2px solid var(--mint);
  padding: 28px 30px;
  max-width: 480px;
}
.form-success h3 {
  font-family: "Roboto", sans-serif; font-weight: 700; font-size: 26px;
  color: var(--green-deep); margin: 0 0 8px;
}
.form-success p { font-size: 17px; line-height: 25px; margin: 0; }

/* --------------------------------------------------------------------------
   Why Us: four mint columns
   -------------------------------------------------------------------------- */
.whyus { background: var(--mint); color: #fff; }
.whyus__heading {
  font-family: "Roboto", sans-serif;
  font-weight: 700; font-size: 46px; line-height: 1.1;
  letter-spacing: 6.9px;
  color: var(--bg);
  text-align: center;
  margin: 0; padding: 62px 0 32px;
}
.whyus__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.whyus__col { padding: 0 40px; text-align: center; }

/* The gap the Wix original left between the WHY US? heading and the column
   titles was holding an icon. Same four marks, drawn inline. */
.whyus__icon {
  display: block;
  width: 96px; height: 96px;
  margin: 0 auto 55px;
  fill: none;
  stroke: var(--bg);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.whyus__col h3 {
  font-family: "Roboto", sans-serif;
  font-weight: 700; font-size: 23px; line-height: 23px;
  color: var(--bg);
  margin: 0 0 52px;
}
.whyus__col p {
  font-weight: 300; font-size: 18px; line-height: 31.5px;
  color: #fff; margin: 0;
}
/* Deliberately roomier than the Wix original. V's call: the copy in these
   columns runs longer than the original's, and 13px of clearance made the
   button look crammed against the last line. */
.whyus__cta { text-align: center; padding: 86px 0 112px; }
.btn--cta {
  background: var(--gold); color: #fff;
  font-size: 20px;
  width: 310px; height: 71px;
  border-radius: 0;
}
.btn--cta:hover, .btn--cta:focus-visible { background: #e8a600; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact { padding: 80px 0 96px; color: var(--green-deep); }
.contact__heading {
  font-family: "Roboto", sans-serif;
  font-weight: 700; font-size: 56px; line-height: 1.1;
  color: var(--green-deep);
  text-align: center;
  margin: 0 0 66px;
}
.contact__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 8px; row-gap: 40px;
}
.contact__grid h3 {
  font-weight: 300; font-size: 26px; line-height: 1.2;
  color: var(--green-deep);
  margin: 0 0 26px;
}
.contact__grid p, .contact__hours {
  font-weight: 300; font-size: 16px; line-height: 28.8px;
  color: var(--green-deep);
  margin: 0;
}
.contact__hours { display: grid; grid-template-columns: 103px auto; }
.contact__grid a { text-decoration: none; }
.contact__grid a:hover { text-decoration: underline; }

/* Stands in for the email address that used to sit here in plain text. */
.contact__cta {
  display: inline-block;
  margin-top: 4px;
  font-weight: 400;
  color: var(--green-mid);
  border-bottom: 1px solid rgba(42, 124, 111, 0.45);
}
.contact__cta:hover, .contact__cta:focus-visible {
  color: var(--mint); border-bottom-color: var(--mint); text-decoration: none;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { padding: 0 0 34px; }
.site-footer p {
  font-weight: 700; font-size: 14px; line-height: 25.06px;
  color: var(--green-mid);
  text-align: center;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --header-h: 119px; }   /* header wraps: brand+button row, then nav */
  .site-header { height: auto; padding: 12px 0; }
  .site-header__inner { flex-wrap: wrap; gap: 12px 0; }
  .nav { margin-left: 0; order: 3; width: 100%; flex-wrap: wrap; justify-content: center; }
  .nav a { font-size: 18px; line-height: 36px; padding-inline: 12px; }
  .btn--nav { margin-left: auto; }
  .wordmark img { width: 200px; }

  .promises__grid { grid-template-columns: 380px 1fr; column-gap: 60px; }
  .promises__photo { width: 380px; height: 800px; }
}

@media (max-width: 880px) {
  .hero { min-height: 660px; }
  .hero__k { width: 64px; margin-bottom: 48px; }
  .hero__title, .hero__body { font-size: 22px; line-height: 30px; }

  .intro p { font-size: 28px; line-height: 40px; }

  .promises__grid { grid-template-columns: 1fr; row-gap: 48px; justify-items: center; }
  .promises__photo { width: 100%; max-width: 450px; height: auto; aspect-ratio: 450 / 952; }
  .promises__list { max-width: 450px; row-gap: 40px; }
  .promise__title { white-space: normal; }

  .solution__heading { font-size: 32px; letter-spacing: 7px; margin-bottom: 64px; }
  .solution__grid { grid-template-columns: 1fr; row-gap: 56px; justify-items: center; }
  .step { max-width: 320px; }
  .step__num { text-align: center; }

  .apply__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .apply__photo { width: 100%; max-width: 452px; height: auto; aspect-ratio: 452 / 585; margin-top: 0; }
  .apply__note { margin-top: 40px; width: 100%; max-width: 284px; }

  .whyus__heading { font-size: 32px; letter-spacing: 5px; padding: 48px 0 24px; }
  .whyus__grid { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
  .whyus__icon { width: 72px; height: 72px; margin-bottom: 28px; }
  .whyus__col h3 { margin-bottom: 24px; }
  .whyus__cta { padding: 56px 0 64px; }

  .contact__heading { font-size: 40px; margin-bottom: 56px; }
  .contact__grid { grid-template-columns: 1fr; text-align: left; }
}

@media (max-width: 520px) {
  :root { --header-h: 150px; }   /* nav wraps onto a second line */
  .wordmark img { width: 162px; }
  .btn--nav { width: 128px; height: 42px; font-size: 15px; letter-spacing: 0.5px; }
  .nav a { font-size: 16px; padding-inline: 9px; }

  .hero__title, .hero__body { font-size: 19px; line-height: 27px; }
  .intro p { font-size: 22px; line-height: 32px; }
  .promise__title { font-size: 24px; line-height: 26px; }

  .field__row { grid-template-columns: 1fr; gap: 0; }
  .field__row .field { margin-bottom: 26px; }
  .btn--submit { width: 100%; max-width: 284px; }

  .whyus__grid { grid-template-columns: 1fr; }
  .btn--cta { width: 100%; max-width: 310px; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}