/* ===========================================================================
   Seb Sports Management - sebsports.ch
   Rebuilt from the Wix original. All geometry below was measured from the
   live site at a 1265px viewport with a 980px content column at x=142.
   =========================================================================== */

/* --- fonts --------------------------------------------------------------- */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/raleway-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/raleway-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* --- design tokens ------------------------------------------------------- */
:root {
  --blue-bar:    #4b68c2;  /* header band, BACK TO WORK button            */
  --blue-accent: #4e5ac3;  /* section rules, highlight, VIEW MORE border  */
  --dark:        #3c3c4e;  /* dark sections                               */
  --light:       #dadada;  /* light sections and athlete cards            */
  --ink:         #1b1b1e;  /* body text on light                          */
  --white:       #fff;

  --col: 980px;            /* content column */
  --inset: 20px;           /* text inset inside the column */
}

/* --- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { border: 0; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--white); color: var(--ink); padding: 10px 16px;
}
.skip-link:focus { left: 0; }

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--blue-accent);
  outline-offset: 2px;
}

/* --- layout primitives --------------------------------------------------- */
.container {
  width: min(var(--col), 100%);
  margin-inline: auto;
}
.inset { padding-inline: var(--inset); }

/* The image mosaics span the full 980px column, while text is inset by 20px.
   Above 1000px the container is at its full width, so the mosaics pull back
   out of the inset; below that they stay inside it to keep a page gutter. */
@media (min-width: 1000px) {
  .work__mosaic,
  .clients__mosaic,
  .casework__mosaic { margin-inline: calc(var(--inset) * -1); }
}

/* Blue rule that sits above every section heading (51x12 in the original). */
.rule {
  width: 51px;
  height: 12px;
  background: var(--blue-accent);
}

.sec-title {
  font-size: 49px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: normal;
}

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  background: var(--blue-bar);
  height: 99px;
}
.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 14px;
}
.site-header__logo { display: block; }
.site-header__logo img { display: block; width: 146px; height: 80px; }

.nav { display: flex; align-items: center; gap: 20px; }
.nav a {
  display: block;
  padding: 8px 11px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover, .nav a[aria-current='page'] { text-decoration: underline; }

.nav-toggle {
  display: none;
  background: none; border: 0; padding: 10px; cursor: pointer;
  color: var(--white);
}
.nav-toggle svg { display: block; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative;
  height: 490px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  background: var(--light);
}
/* The Wix original renders this photo through a blur filter; reproduced here
   on a full-resolution source, scaled up slightly so the blur has no soft
   edge at the viewport boundary. */
.hero__bg {
  position: absolute;
  inset: -40px;
  background: url('../img/hero-home.webp') center 46% / cover no-repeat;
  filter: blur(14px) saturate(0.95) brightness(1.18);
  transform: scale(1.06);
}
/* The headline is near-black, so the photograph is washed back far enough to
   keep it readable - the same treatment the Wix original used. */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.42);
}
.hero__inner {
  position: relative;
  width: 100%;
  padding-top: 103px;
}
.hero__text { padding-inline: 41px; }

.hero h1 {
  font-size: 63px;
  font-weight: 700;
  line-height: 0.9;
  color: var(--ink);
  margin: 0;
}
.hero h1 .is-white { color: var(--white); }

.hero__tagline {
  margin-top: 17px;
  margin-left: 9px;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.25em;
  color: var(--white);
}
.hero__tagline span {
  background: var(--blue-accent);
  padding: 1px 0 2px 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* =========================================================================
   Who we are
   ========================================================================= */
.who {
  background: var(--light);
  padding-top: 18px;
  padding-bottom: 28px;
}
.who .sec-title { margin-top: 12px; }
.who__body { margin-top: 27px; max-width: 959px; margin-right: -19px; }
.who__body p { font-size: 14px; line-height: 1.4; }
.who__body p + p { margin-top: 20px; }
.who__body p + p.is-tight { margin-top: 0; }

/* =========================================================================
   Services
   ========================================================================= */
.services {
  background: var(--dark);
  color: var(--light);
  padding-top: 29px;
  padding-bottom: 110px;
}
.services .sec-title { color: var(--white); margin-top: 6px; }
.services__cols {
  position: relative;
  margin-top: 57px;
  min-height: 190px;
}
.services__col { position: absolute; top: 0; }
/* Column positions measured from the original layout. */
.services__col:nth-child(1) { left: 0;      width: 27.35%; }
.services__col:nth-child(2) { left: 37.24%; width: 23.98%; }
.services__col:nth-child(3) { left: 66.73%; width: 28.16%; }

.services__col h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: var(--light);
  margin-bottom: 17px;
}
.services__col p { font-size: 14px; line-height: normal; }

/* =========================================================================
   Our latest work
   ========================================================================= */
.work {
  background: var(--light);
  padding-top: 18px;
  padding-bottom: 90px;
}
.work .container { position: relative; }
.work .sec-title { margin-top: 12px; }
.work__mosaic { margin-top: 19px; }

/* In the original this button sits in the empty bottom-right corner of the
   mosaic, so it is placed rather than stacked underneath it. */
.btn-viewmore {
  position: absolute;
  top: 441px;
  left: 645px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 142px;
  height: 40px;
  background: var(--white);
  border: 1px solid var(--blue-accent);
  color: var(--blue-accent);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.btn-viewmore:hover { background: var(--blue-accent); color: var(--white); }
.btn-viewmore svg { width: 7px; height: 11px; }

/* =========================================================================
   Athletes
   ========================================================================= */
.athletes {
  background: var(--dark);
  padding-top: 22px;
  padding-bottom: 0;
}
.athletes .sec-title { color: var(--white); margin-top: 6px; }

.athletes__grid {
  width: 866px;
  max-width: 100%;
  margin: 23px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
}

.athlete {
  background: var(--light);
  display: flex;
  flex-direction: column;
  min-height: 824px;   /* every card is the same height in the original */
}
.athlete__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.athlete__body {
  padding: 13px 31px 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.athlete__name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
.athlete__sport { font-size: 20px; font-weight: 400; line-height: 1.4; }
.athlete__sport.is-bold { font-weight: 700; }

/* The bullet list is pulled out of the body padding on both sides so the
   fact lines get the same measure they have in the original (text starts at
   37px from the card edge and has ~355px to run in). */
.athlete__facts {
  margin: 20px -24px 0 -7px;
  padding-left: 13px;
  list-style: disc;
  font-size: 16px;
  line-height: 1.4;
}
.athlete__facts li { margin-bottom: 0; }

.athlete__ambition { margin-top: 28px; font-size: 16px; line-height: 1.4; }
.athlete__ambition b { font-weight: 700; }

.athlete__social {
  margin-top: auto;
  margin-left: -15px;
  padding: 28px 0 38px;
  display: flex;
  gap: 7px;
}
.athlete__social a { display: block; line-height: 0; }
.athlete__social img { width: 25px; height: 25px; display: block; }

/* =========================================================================
   Clients
   ========================================================================= */
.clients {
  background: var(--white);
  padding-top: 62px;
  padding-bottom: 0;
}
.clients__title {
  font-size: 30px;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}
.clients__mosaic { margin-top: 43px; }

/* =========================================================================
   Contact
   ========================================================================= */
.contact {
  background: var(--dark);
  color: var(--white);
  padding-top: 96px;
  padding-bottom: 40px;
}
.contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.contact .sec-title { color: var(--white); font-size: 35px; line-height: 1; }
.contact__details { margin-top: 42px; font-size: 16px; line-height: 1.4; }
.contact__details a { color: var(--white); }
.contact__details .is-strong { font-weight: 700; }
.contact__details .is-strong + .is-strong { margin-top: 0; }
.contact__meta { margin-top: 19px; }

/* --- contact form -------------------------------------------------------- */
.contact-form { margin-top: 16px; }
.contact-form__row { margin-bottom: 14px; }
.contact-form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--light);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid transparent;
  border-radius: 0;
  padding: 10px 12px;
}
.contact-form textarea { min-height: 116px; resize: vertical; }
.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown) {
  border-color: #c2504b;
}
/* honeypot - hidden from people, visible to naive bots */
.contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}
.btn-submit {
  appearance: none;
  border: 0;
  background: var(--blue-bar);
  color: var(--white);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 28px;
  cursor: pointer;
}
.btn-submit:hover { background: var(--blue-accent); }
.btn-submit[disabled] { opacity: 0.55; cursor: default; }

.form-status {
  margin-top: 12px;
  font-size: 14px;
  min-height: 20px;
}
.form-status.is-ok { color: #9fe0b0; }
.form-status.is-error { color: #ffb4ae; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  background: var(--dark);
  color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 46px 0 20px;
}
.site-footer p { font-size: 14px; line-height: 1.4; }

/* =========================================================================
   Case studies page
   ========================================================================= */
.casework { background: var(--white); padding-top: 18px; padding-bottom: 80px; }
.casework .sec-title { color: var(--dark); margin-top: 12px; }
.casework__mosaic { margin-top: 33px; }

/* 195x60 with the accent blue, matching the original. On the Wix site this
   button renders *underneath* the bottom-left image and is invisible at
   desktop width; here it sits below the mosaic - see REBUILD-NOTES.md. */
.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 195px;
  height: 60px;
  margin-top: 45px;
  margin-left: 11px;
  background: var(--blue-accent);
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
.btn-back:hover { background: var(--blue-bar); }

/* =========================================================================
   Responsive - the Wix original serves a separate mobile site; this is a
   single responsive layout that carries the same content and design.
   ========================================================================= */
/* Below the full-width column the mosaic no longer leaves a corner free, so
   the button returns to normal flow underneath it. */
@media (max-width: 999px) {
  .btn-viewmore {
    position: static;
    display: flex;
    margin: 28px 0 0 auto;
  }
}

@media (max-width: 900px) {
  .athletes__grid { width: 100%; gap: 40px; }
  .athlete { min-height: 0; }
  .athlete__social { padding-bottom: 28px; }
}

@media (max-width: 860px) {
  .site-header .container { padding-inline: 16px; }
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 99px;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--blue-bar);
    padding: 8px 0 16px;
  }
  .site-header { position: relative; }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 24px; }

  .hero { height: 420px; }
  .hero__inner { padding-top: 76px; }
  .hero__text { padding-inline: var(--inset); }
  .hero h1 { font-size: 44px; }
  .hero__tagline { font-size: 15px; letter-spacing: 0.18em; }

  .sec-title { font-size: 38px; }

  .services__cols { position: static; min-height: 0; margin-top: 56px; }
  .services__col { position: static; width: 100% !important; }
  .services__col + .services__col { margin-top: 34px; }

  .who__body { margin-top: 40px; }
  .work__mosaic, .clients__mosaic, .casework__mosaic { margin-top: 32px; }

  .athletes__grid { grid-template-columns: 1fr; gap: 32px; margin-top: 46px; }

  .contact { padding-top: 56px; }
  .contact__layout { grid-template-columns: 1fr; gap: 36px; }
  .contact .sec-title { font-size: 30px; }
  .clients__title { font-size: 22px; }
}

/* On a phone the measured desktop mosaics would scale down proportionally and
   leave the client logos around 70px wide - technically faithful, practically
   unreadable. Below 700px they become plain grids instead.
   The selectors carry an extra class so they outrank the generated
   "#id .mN" rules in mosaics.css without needing !important. */
@media (max-width: 700px) {
  #work-mosaic.mosaic,
  #case-mosaic.mosaic,
  #clients-mosaic.mosaic {
    aspect-ratio: auto;
    display: grid;
    gap: 5px;
  }
  #work-mosaic.mosaic > [class],
  #case-mosaic.mosaic > [class],
  #clients-mosaic.mosaic > [class] {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
  }
  #work-mosaic.mosaic,
  #case-mosaic.mosaic { grid-template-columns: repeat(2, 1fr); }
  #work-mosaic.mosaic img,
  #case-mosaic.mosaic img { aspect-ratio: 4 / 3; }

  #clients-mosaic.mosaic {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 14px;
    align-items: center;
    padding: 4px 0 8px;
  }
  #clients-mosaic.mosaic img { height: 52px; width: 100%; object-fit: contain; }
}

@media (max-width: 560px) {
  .hero { height: 360px; }
  .hero h1 { font-size: 34px; }
  .sec-title { font-size: 30px; }
  .btn-viewmore { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}