/* ===========================================================================
   Seb Sports & Brand Marketing - 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, statistics, highlight        */
  --dark:        #3c3c4e;  /* dark sections                               */
  --light:       #efece5;  /* light bands, athlete cards, text on dark    */
  --ink:         #1b1b1e;  /* body text on light                          */
  --paper:       #faf8f4;  /* page and full-width sections                */
  --white:       #fff;     /* true white, where it has to be white        */

  --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(--paper);
  -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(--paper); 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; }
/* language switch, at the end of the menu: quiet, but a real link (Google
   wants the alternates linked, not only declared in hreflang) */
.nav__lang {
  margin-left: 4px;
  padding: 5px 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.55);
  letter-spacing: 0.1em;
  font-size: 12px !important;
}

.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: 412px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  background: var(--paper);
}
/* Built by tools/hero_map_a.py, not cropped by CSS: the marker positions are
   calculated against this exact canvas and the hero's cover scaling, so that
   none of them lands behind the headline. Re-run that script after any change
   to the hero's height or the headline's length. The blurred photograph this
   replaced is still at ../img/hero-home.webp. */
.hero__bg {
  position: absolute;
  inset: 0;
}
/* The map is an <img> in the HTML rather than a CSS background, so the browser
   finds it in the first bytes of the page and fetches it at high priority: it
   is the largest thing above the fold (the LCP element), and as a background
   it was only discovered once the stylesheet had arrived. object-fit/position
   reproduce the previous center / cover exactly. */
.hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* The headline is near-black, so the photograph is washed back far enough to
   keep it readable - the same treatment the Wix original used. The photo is a
   bright one and its blur still runs from L=27 to L=255, so the wash is
   stronger than Wix's and carries a gradient behind the text block. Measured
   on the rendered page the headline sits at 4.3-4.4:1, comfortably past the
   3:1 WCAG asks of large text. Wix shipped 3.55:1 here, and the previous
   build put white text on this wash at 1.35:1, which is why BRANDS was
   effectively invisible. Pushing further flattens the photograph. */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.7) 58%, rgba(255, 255, 255, 0.52) 100%);
}
.hero__inner {
  position: relative;
  width: 100%;
  padding-top: 74px;
}
.hero__text { padding-inline: 41px; }

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

/* BRANDS carries the repositioning, so it keeps its emphasis - in a deepened
   brand blue rather than the accent. White measured 1.35:1 on this wash and was
   invisible; the accent itself only reaches 3.01:1, right on the large-text
   floor. This sits at 4.8:1. */
.hero h1 em { font-style: normal; color: #363f8f; }

.hero__tagline {
  margin-top: 17px;
  margin-left: 9px;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.25em;
  color: var(--white);
}
/* the markets, stated in the hero - the reach is a differentiator and was
   only visible far down the page */
.hero__markets {
  margin-top: 14px;
  margin-left: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #43434c;
}

/* French runs longer than English. Measured at 1280 wide: the second line of
   the French headline reached x=940 at 56px and covered the United States
   marker (x=921), and the tagline wrapped. 52px brings the headline back to
   ~885px, clear of the marker; the tagline is tightened to stay on one line.
   Re-measure if the French headline changes: tools/hero_map_a.py prints the
   marker positions. */
@media (min-width: 861px) {
  html[lang="fr"] .hero h1 { font-size: 52px; }
  html[lang="fr"] .hero__tagline { font-size: 18px; letter-spacing: 0.2em; }
}
/* On a phone the English headline is three lines at 34px; "BÂTIR DES MARQUES."
   is two characters longer and became four, which the 360px band clips. */
@media (max-width: 560px) {
  html[lang="fr"] .hero h1 { font-size: 30px; }
}

.hero__tagline span {
  background: var(--blue-accent);
  padding: 1px 0 2px 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* =========================================================================
   Who we are
   ========================================================================= */
/* =========================================================================
   Positioning statement - the one line that says what the business is, given
   a band of its own between the hero and WHO WE ARE rather than buried in a
   paragraph where nobody reads it.
   ========================================================================= */
.creed {
  background: var(--paper);
  padding: 58px 0 54px;
  border-bottom: 1px solid rgba(27, 27, 30, 0.10);
}
.creed__line {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.24;
  color: var(--ink);
  max-width: 46ch;
}
.creed__line br { display: block; }

@media (max-width: 860px) {
  .creed { padding: 40px 0 38px; }
  .creed__line { font-size: 25px; }
}

.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: 16.5px; line-height: 1.68; max-width: 72ch; }
.who__body p + p { margin-top: 18px; }
.who__body strong { font-weight: 700; }
.who__intro { font-size: 17px !important; line-height: 1.6 !important; }
.who__intro strong { color: var(--ink); }

/* A statement of where the work has been done, not a boast about its size -
   so it is set quietly, as a footing line under the two columns. */
.who__proof {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(27, 27, 30, 0.2);
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  color: #43434c;
}

.method { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: m; display: grid; gap: 16px; }
.method li {
  counter-increment: m;
  position: relative;
  padding-left: 44px;
  font-size: 15.5px;
  line-height: 1.6;
}
.method li::before {
  content: counter(m, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue-accent);
}
.who__close { margin-top: 28px; font-size: 16.5px !important; line-height: 1.65 !important; }

/* the opening sentence carries the positioning - give it weight */
.who__lead {
  font-size: 23px;
  line-height: 1.35;
  font-weight: 700;
  max-width: 820px;
}

/* =========================================================================
   Credibility band - a KPI row of stat tiles, not a chart. Values use the
   text tokens; the accent appears only as the rule above each figure.
   ========================================================================= */
.stats {
  background: var(--light);
  border-top: 1px solid rgba(27, 27, 30, 0.12);
  padding: 44px 0 48px;
}
.stats__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.stat { display: flex; flex-direction: column; }
.stat__value {
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--blue-accent);
  padding-top: 14px;
  border-top: 4px solid var(--blue-accent);
}
.stat__label {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  max-width: 21ch;
}

/* =========================================================================
   Services
   ========================================================================= */
.services {
  background: var(--dark);
  color: var(--light);
  padding-top: 29px;
  padding-bottom: 110px;
}
.services .sec-title { color: var(--white); margin-top: 6px; }
/* Six services in a 3x2 grid. The original had three, absolutely positioned
   at the coordinates Wix happened to leave them; an even grid reads as a
   deliberate offer rather than three things that fitted. */
/* Two labelled groups: a brand reads "For brands" before sport is mentioned
   at all, which is the point of the division. */
.services__group { margin-top: 46px; }
.services__group--second { margin-top: 58px; }
.services__label {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
  padding-bottom: 10px;
  border-bottom: 3px solid var(--blue-accent);
}
.services__note { margin-top: 12px; font-size: 15px; line-height: 1.5; opacity: 0.78; }

.services__grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 56px;
  row-gap: 46px;
}
.services__col h4 {
  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(--paper);
  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__intro {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--light);
}

/* Four across instead of two. The roster used to occupy 48% of the homepage,
   which made an agency that does six things look like an athlete agency.
   Each tile opens in place - <details>, so it works with JavaScript off. */
.athletes__grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}

.athlete {
  background: var(--light);
  color: var(--ink);
}
.athlete > summary {
  display: block;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.athlete > summary::-webkit-details-marker { display: none; }
.athlete > summary:focus-visible {
  outline: 2px solid var(--blue-accent);
  outline-offset: 2px;
}
.athlete__photo {
  display: block;
  width: 100%;
  /* height:auto is required - the img's height attribute is a presentational
     hint in the UA stylesheet and would otherwise beat aspect-ratio */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.athlete__name {
  display: block;
  padding: 12px 16px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.athlete__sport {
  display: block;
  padding: 2px 16px 34px;
  font-size: 13px;
  line-height: 1.3;
}
/* the open/closed affordance */
.athlete > summary::after {
  content: '';
  position: absolute;
  left: 16px;
  bottom: 14px;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--blue-accent);
  border-bottom: 2px solid var(--blue-accent);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.athlete[open] > summary::after { transform: rotate(-135deg); bottom: 10px; }

.athlete__body { padding: 0 16px 18px; }

.athlete__facts {
  margin: 0;
  padding-left: 16px;
  list-style: disc;
  font-size: 13px;
  line-height: 1.45;
}
.athlete__facts li + li { margin-top: 5px; }

.athlete__ambition { margin-top: 14px; font-size: 13px; line-height: 1.45; }
.athlete__ambition b { font-weight: 700; }

.athlete__social {
  margin-top: 16px;
  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(--paper);
  padding-top: 62px;
  padding-bottom: 0;
}
.clients__title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
/* Scopes the wall honestly: some of these relationships were held agency-side
   or rights-holder-side rather than by this business. */
.clients__note {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: #56565e;
}
.clients__mosaic { margin-top: 38px; }

/* =========================================================================
   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(--paper);
  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(--paper); padding-top: 18px; padding-bottom: 80px; }
.casework .sec-title { color: var(--dark); margin-top: 12px; }
.casework__mosaic { margin-top: 33px; }

/* One line of text under a page title - the case-studies lead and the 404 */
.page-lead {
  max-width: 660px;
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.page-lead + .page-lead { margin-top: 10px; }
.page-lead a { color: var(--blue-accent); }

/* 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: 1000px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
}

@media (max-width: 900px) {
  .athletes__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .stats__row { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .stat__value { font-size: 38px; }
}

@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; }
  /* cover-cropping a world map into a phone-width box leaves one marker and no
     continents; contained along the bottom keeps the whole graphic legible
     under the headline instead */
  .hero__bg img { object-fit: contain; object-position: center bottom; }
  .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__grid { grid-template-columns: 1fr; row-gap: 34px; margin-top: 40px; }

  .who__body { margin-top: 32px; margin-right: 0; }
  .who__lead { font-size: 17px; }
  .work__mosaic, .clients__mosaic, .casework__mosaic { margin-top: 32px; }

  .athletes__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
  .stats { padding: 32px 0 34px; }

  .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; }
}