/* ==========================================================================
   SOMANÚ — site styles

   TEXT STYLES — set on the HTML elements themselves, used the same way on
   every page. Two fonts, six sizes.

     Style     Element        Font                Size (mobile → desktop)
     H1        h1             Poppins Bold        36 → 52px   one per page, the page title
     H2        h2             Poppins Bold        28 → 36px   section titles
     H3        h3             Raleway SemiBold    20px        titles inside a section
     Lead      .lead          Raleway Regular     20px        the sentence right under an H1/H2
     Quote     .quote         Raleway Italic      22 → 26px   short brand statements, never next to an image
     Body      p, li          Raleway Regular     18px        line length max 65 characters
     Small     .small, nav    Raleway Medium      16px        labels, captions, navigation, links

   LAYOUT PATTERNS — every section is one of these five:
     A  Page intro   H1 + lead (+ body, link) on the left, one portrait image right.
     B  Split        one image left, H2 + body (+ link) right. Nothing else.
     C  Content      H2 (+ lead), then lists/columns on the grid. No image.
     D  Statement    one quote (+ link) on its own. No image.
     E  Gallery      images only.
   Images only ever appear in A, B or E, always 4:5 portrait in A and B.
   ========================================================================== */

/* Fonts ----------------------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-variable-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Tokens ---------------------------------------------------------------- */
:root {
  --ivory: #F7F2EE;
  --blush: #E5D5CF;
  --navy: #09192B;
  --ink: #1E2A38;         /* body text: 13:1 on ivory, 10:1 on blush */
  --muted: #485261;       /* captions: 7.4:1 on ivory, 5.6:1 on blush */
  --line: rgba(9, 25, 43, 0.18);

  --font-title: "Poppins", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Raleway", "Helvetica Neue", Arial, sans-serif;

  --fs-h1:    clamp(2.25rem, 1.85rem + 1.6vw, 3.25rem);
  --fs-h2:    clamp(1.75rem, 1.55rem + 0.8vw, 2.25rem);
  --fs-quote: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  --fs-h3:    1.25rem;
  --fs-body:  1.125rem;
  --fs-small: 1rem;

  --max: 1280px;
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --edge: max(var(--pad), calc((100vw - var(--max)) / 2));
  --header-h: 5rem;
  --section: clamp(5rem, 3rem + 6vw, 8.5rem);
  --gap: clamp(1.5rem, 1rem + 2.5vw, 4rem);
  /* spacing scale */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: clamp(3rem, 2rem + 3vw, 5rem);
}

/* Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--blush); color: var(--navy); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--navy); color: var(--ivory); padding: 0.6rem 1rem; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Text styles ------------------------------------------------------------ */
h1, h2 {
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.1; }
h2 { font-size: var(--fs-h2); line-height: 1.2; }
h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--navy);
}
p, li { max-width: 65ch; }
.lead {
  font-size: var(--fs-h3);
  line-height: 1.5;
  color: var(--navy);
}
.quote {
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: 1.4;
  color: var(--navy);
  text-wrap: balance;
}
.small {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}
.prose p + p { margin-top: 1em; }

/* Vertical rhythm inside a text block: every element gets the same gap,
   with fixed exceptions so headings sit close to what they introduce. */
.flow > * + * { margin-top: var(--s3); }
.flow > h1 + .lead, .flow > h2 + .lead { margin-top: var(--s2); }
.flow > h3 + * { margin-top: var(--s2); }
.flow > .arrow-link { margin-top: var(--s4); }

/* Links ------------------------------------------------------------------ */
.arrow-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--navy);
}
.arrow-link__arrow { display: inline-block; transition: transform 0.3s ease; }
.arrow-link:hover .arrow-link__arrow { transform: translateX(0.3em); }

/* Header ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ivory);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: var(--header-h);
  padding-inline: var(--edge);
}
.site-header__logo { display: block; flex: none; }
.site-header__logo img { height: 2.6rem; width: auto; }

.site-nav ul { display: flex; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.site-nav a {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--navy);
  text-decoration: none;
  padding-block: 0.7rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--navy); }
.site-nav__meta { display: none; }

.menu-toggle {
  display: none;
  min-height: 44px;
  align-items: center;
  gap: 0.75rem;
  background: none;
  border: 0;
  padding: 0.5rem 0;
  color: var(--navy);
  font: 400 var(--fs-small) / 1 var(--font-body);
  cursor: pointer;
}
.menu-toggle__icon { position: relative; width: 26px; height: 9px; }
.menu-toggle__icon::before, .menu-toggle__icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease;
}
.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after { bottom: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: 4px; transform: rotate(20deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { bottom: 4px; transform: rotate(-20deg); }

@media (max-width: 1179px) {
  .menu-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--ivory);
    padding: clamp(1.5rem, 5vh, 3.5rem) var(--pad) 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  .site-nav.is-open { visibility: visible; opacity: 1; transition: opacity 0.3s ease; }
  .site-nav ul { flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
  .site-nav li { border-bottom: 1px solid var(--line); }
  .site-nav a {
    display: block;
    padding: 1.1rem 0;
    font-size: var(--fs-h3);
    line-height: 1.3;
    border: 0;
  }
  .site-nav__meta { display: block; margin-top: 2.5rem; font-family: var(--font-body); font-size: var(--fs-small); color: var(--muted); }
  .site-nav__meta a { display: inline; font: inherit; padding: 0; text-decoration: underline; }
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */
.section { padding-block: var(--section); }
.section:not(.band) + .section:not(.band) { padding-top: 0; }
.section--intro { padding-top: var(--s5); }
.band--blush { background: var(--blush); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s5);
}

/* A — Page intro: text cols 1–7, image cols 8–12 */
.intro { align-items: center; }
.intro > .intro__text { grid-column: 1 / 8; }
.intro > .intro__media { grid-column: 8 / 13; }

/* B — Split: image cols 1–5, text cols 7–12 */
.split { align-items: center; }
.split > .split__media { grid-column: 1 / 6; }
.split > .split__text { grid-column: 7 / 13; }

/* Two equal columns on the same lines as the split */
.col-left { grid-column: 1 / 6; }
.col-right { grid-column: 7 / 13; }

.media { overflow: hidden; background: var(--blush); aspect-ratio: 4 / 5; }
.media picture { display: contents; }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* C — Content blocks ----------------------------------------------------- */
.section-head { margin-bottom: var(--s5); }

.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s2);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
}
.row > .row__title { grid-column: 1 / 6; }
.row > .row__body { grid-column: 7 / 13; }

.rule-list li { padding-block: 0.7rem; border-top: 1px solid var(--line); }
.rule-list li:last-child { border-bottom: 1px solid var(--line); }
.rule-list--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.rule-list--cols li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }
.plain-list li { padding-block: 0.2rem; }

.columns-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s5); }
.columns-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s4); }
.columns-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s5); }
.topline { border-top: 1px solid var(--navy); padding-top: var(--s3); }
.columns-4 .rule-list li:first-child { border-top: 0; }

.inline-list { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }

/* Before / Now / Next */
.journey { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.journey::before { content: ""; position: absolute; left: 0; right: 0; top: 2.5rem; height: 1px; background: var(--navy); }
.journey::after {
  content: ""; position: absolute; right: 1px; top: calc(2.5rem - 5px); width: 10px; height: 10px;
  border-top: 1px solid var(--navy); border-right: 1px solid var(--navy); transform: rotate(45deg);
}
.journey__step { padding-right: var(--gap); }
.journey__step + .journey__step { padding-left: var(--gap); border-left: 1px solid var(--line); }
.journey__step h3 { height: 2.5rem; }
.journey__step ul { padding-top: var(--s3); }
.journey__step li { padding-block: 0.2rem; }

.brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.brands li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-block: 0.9rem; border-top: 1px solid var(--line);
}

.details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.details > div { padding-block: var(--s3); border-top: 1px solid var(--line); }
.details dt { margin-bottom: 0.25rem; }
.details dd { overflow-wrap: anywhere; }
.details a { text-underline-offset: 0.2em; }

/* D — Statement */
.statement { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }
.statement .quote { max-width: 32ch; }

/* E — Gallery */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.gallery figure { aspect-ratio: 4 / 3; }
.gallery--4 { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(200px, 21vw, 320px)); }
.gallery--4 figure { aspect-ratio: auto; }
.gallery--4 figure:nth-child(1) { grid-column: 1 / 7; grid-row: 1 / 3; }
.gallery--4 figure:nth-child(2) { grid-column: 7 / 13; grid-row: 1; }
.gallery--4 figure:nth-child(3) { grid-column: 7 / 10; grid-row: 2; }
.gallery--4 figure:nth-child(4) { grid-column: 10 / 13; grid-row: 2; }

/* Closing call to action, same on every page */
.cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s5);
  padding-block: var(--s5) var(--section);
  border-top: 1px solid var(--line);
}

/* Footer ---------------------------------------------------------------- */
.site-footer { background: var(--blush); color: var(--navy); }
.site-footer__inner { row-gap: var(--s4); align-items: end; padding-block: var(--s5) var(--s4); }
.site-footer__brand { grid-column: 1 / 6; }
.site-footer__brand img { width: min(240px, 100%); }
.site-footer__line { grid-column: 7 / 10; }
.site-footer__links { grid-column: 10 / 13; display: flex; gap: var(--s4); justify-content: flex-end; font-size: var(--fs-small); font-weight: 600; }
.site-footer__links a { display: inline-block; padding-block: 0.6rem; text-underline-offset: 0.25em; }
.site-footer__legal { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--muted); padding-top: var(--s3); border-top: 1px solid var(--line); }

/* Responsive ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brands, .details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 959px) {
  :root { --header-h: 4.25rem; }
  .site-header__logo img { height: 2.15rem; }
  .grid { row-gap: var(--s4); }
  .grid > *, .row > * { grid-column: 1 / -1 !important; }
  .media { aspect-ratio: auto; width: 100%; height: min(125vw, 70svh); }
  .site-footer__links { justify-content: flex-start; }
}

@media (max-width: 719px) {
  .rule-list--cols, .columns-2, .columns-3, .columns-4, .brands, .details { grid-template-columns: 1fr; }
  .rule-list--cols li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

  .journey { grid-template-columns: 1fr; padding-left: 2rem; }
  .journey::before { left: 0; right: auto; top: 0.5rem; bottom: 0; width: 1px; height: auto; }
  .journey::after { left: -5px; right: auto; top: auto; bottom: 1px; transform: rotate(135deg); }
  .journey__step, .journey__step + .journey__step { padding: 0 0 var(--s4); border-left: 0; }
  .journey__step h3 { height: auto; }
  .journey__step ul { padding-top: var(--s2); }

  .gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .gallery--4 figure:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; height: auto; }
  .gallery--4 figure:nth-child(1), .gallery--4 figure:nth-child(2) { grid-column: 1 / -1; aspect-ratio: 4 / 3; }

  .cta { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}
.note { margin-top: var(--s4); }