/* ==========================================================================
   FiguFoto - brochure site
   Tokens taken from figufoto-colour-tokens.json
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts, served from this site rather than Google Fonts.
   No visitor IP reaches a third party, so nothing here needs disclosing in
   privacy.html. Latin subset only: covers Italian accents, curly quotes,
   dashes and the euro sign. 52 KB for all five faces.
   font-display: swap means text paints immediately in the fallback and
   re-renders when the real face lands, rather than being invisible first.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Figtree";
  src: url("assets/figtree-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("assets/figtree-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("assets/figtree-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Blue */
  --blu-figurine: #2b438d;
  --blu-foto: #247fda;
  --blu-chiaro: #4e9be9;
  /* Not in figufoto-colour-tokens.json. Taken from the language-switch export;
     it is Blu Chiaro at about 24% over white. */
  --blu-tint: #d4e7f9;

  /* Yellow */
  --crema-chiara: #fbebcb;
  --crema: #f5d9a0;
  --sabbia: #fbd17e;
  --miele: #f5bc4d;
  --miele-profondo: #d8920b;
  --miele-scuro: #9c6b14;

  /* Red */
  --rosso-chiaro: #f8d3c6;
  --rosso-crema: #efbcab;
  --rosso-sabbia: #e9a18c;
  --rosso-bustina: #e8503a;
  --rosso-profondo: #c33a24;
  --rosso-scuro: #9e2d18;

  /* Neutral */
  --cream: #faf6ef;
  --ink: #16204a;
  --slate: #5c6680;
  --paper: #e8e2d6;
  --white: #ffffff;

  /* Type */
  --font-display: "Poppins", "Trebuchet MS", sans-serif;
  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --content: 1060px;
  --gutter: 24px;
  --radius: 8px;
  --header-h: 89px; /* 88px bar + 1px bottom border */
  --shadow-card: 0 4px 12px rgba(22, 32, 74, 0.08);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* The site is a fixed 1440px block centred on the page.
   Everything outside it is the Paper ground set on <body>. */
.site {
  max-width: 1440px;
  margin-inline: auto;
  background: var(--cream);
  position: relative;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Shared building blocks
   -------------------------------------------------------------------------- */

/* --content is the 1060px content column from Figma. The gutter is added on
   top so the column itself measures 1060 and starts at x=190 in the block. */
.wrap {
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: 56px;
}

/* Anchor targets have to clear the sticky header. A section's own 56px top
   padding already sits above its rule, so the offset is the header height
   plus the 24px gap we want, minus that padding: the rule then lands exactly
   24px below the header instead of underneath it. */
.section[id] {
  scroll-margin-top: calc(var(--header-h) + 24px - 56px);
}

.section--cream {
  background: var(--cream);
}

/* Two cream sections in a row read as one surface, so their facing 56px
   paddings stack into 112px of dead space. Figma separates these with a
   single 56px frame gap, so the second section trims its own top padding. */
.section--cream + .section--cream {
  padding-top: 16px;
}

/* Section headers: rule, eyebrow, title, optional lede */
.sec-head {
  border-top: 2px solid var(--miele-scuro);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 40px;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.6px;
  line-height: 1.65;
  text-transform: uppercase;
  color: var(--miele-scuro);
}

.sec-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.42px;
  color: var(--ink);
}

.sec-lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate);
  max-width: 726px;
}

.card {
  border-radius: var(--radius);
}

.card-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  color: var(--blu-figurine);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:focus-visible {
  outline: 3px solid var(--blu-foto);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--miele);
  color: var(--ink);
}

.btn--primary:hover {
  background: var(--miele-profondo);
}

.btn--ghost {
  border-color: var(--blu-figurine);
  color: var(--blu-figurine);
  background: transparent;
}

.btn--ghost:hover {
  background: rgba(43, 67, 141, 0.06);
}

.btn__icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header__inner {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.logo img {
  height: 41px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

/* Holds everything on the right of the logo, so the header stays a two-part
   space-between even though it now has a nav, a switch and a burger. Must not
   be positioned: the open mobile nav is absolute against the sticky header. */
.site-header__right {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* --------------------------------------------------------------------------
   Language switch
   64x24 pill split into two halves. The half for the language you are already
   reading is tinted and inert; the other half is the link. Built from text
   rather than the two SVG exports so it stays selectable, scales with the
   reader's font size, and needs no second asset for the hover.
   -------------------------------------------------------------------------- */

.lang {
  display: flex;
  flex: none;
  width: 64px;
  height: 24px;
  border: 1px solid var(--blu-figurine);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden; /* clips the hover fill to the rounded corners */
}

.lang__item {
  flex: 1;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0.6px;
  text-indent: 0.6px; /* offsets the trailing letter-space so the pair sits centred */
  text-transform: uppercase;
  color: var(--blu-figurine);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.lang__item + .lang__item {
  border-left: 1px solid var(--blu-figurine);
}

.lang__item[aria-current] {
  background: var(--blu-tint);
}

a.lang__item:hover,
a.lang__item:focus-visible {
  background: var(--blu-figurine);
  color: var(--white);
}

a.lang__item:focus-visible {
  outline: 3px solid var(--blu-foto);
  outline-offset: 3px;
}

/* Mobile menu trigger. Hidden until the nav stops fitting on one row. */
.burger {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.burger img {
  width: 26px;
  height: 26px;
}

.burger:focus-visible {
  outline: 3px solid var(--blu-foto);
  outline-offset: 2px;
}

/* Sits below the header (z-index 20) so the open card stays fully lit while
   the page behind it dims. */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: rgba(22, 32, 74, 0.34);
}

body.nav-open {
  overflow: hidden;
}

.nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  padding: 3px 0;
  border-radius: 4px;
  /* Insurance. .nav is a non-wrapping flex row, but its items can still be
     squeezed narrower than their text, which makes a label break onto a second
     line and doubles the header height. Whatever font actually loads, a label
     now stays on one line. */
  white-space: nowrap;
  transition: color 0.18s ease;
}

.nav a:hover {
  color: var(--blu-figurine);
}

.nav a:focus-visible {
  color: var(--blu-figurine);
  outline: 3px solid var(--blu-foto);
  outline-offset: 3px;
}

/* Hover swaps the icon for a filled copy of itself. The two files are
   stacked rather than swapped by URL so both load with the page: a
   background-image swap would not fetch the filled version until the first
   hover, which shows as a blink. Identical geometry means the strokes sit
   exactly on top of each other, so only the fill appears to fade in. */
.nav .ico {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  flex: none;
}

.nav .ico img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.18s ease;
}

.nav .ico__hover {
  opacity: 0;
}

/* Both images fade, so the outline version is gone by the time the filled one
   is solid. Leaving it underneath would fringe the edges of a filled icon. */
.nav a:hover .ico img:first-child,
.nav a:focus-visible .ico img:first-child {
  opacity: 0;
}

.nav a:hover .ico__hover,
.nav a:focus-visible .ico__hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Figma: headline text box starts 37px below the section top, and the
   columns are top-aligned rather than centred. */
.hero {
  position: relative;
  background: var(--cream);
  padding-block: 37px 24px;
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.hero__title {
  position: relative;
  isolation: isolate;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -1.12px;
  color: var(--ink);
  margin-bottom: 1.02em; /* Figma: body text starts at y 215 */
}

.hero__title em {
  font-style: normal;
  color: var(--blu-foto);
  display: block;
}

/* Painted band behind the headline.
   Anchored to the headline, not the section, so it cannot drift when the
   hero grid changes height. Figma at a 56px headline: text box starts at
   (190, 37.06); the 1121.33 x 197.49 band starts at (97, -0.15). The
   difference expressed in em keeps the two locked together at any size. */
.hero__brush {
  position: absolute;
  left: -1.661em;
  top: -0.664em;
  width: 20.024em;
  height: auto;
  max-width: none;
  z-index: -1;
  pointer-events: none;
}

.hero__body {
  font-size: 18px;
  line-height: 1.6;
  max-width: 525px; /* Figma: 190 -> 715 */
  margin-bottom: 28px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Album mock-up */
.album {
  border: 8px solid var(--white);
  border-radius: var(--radius);
  background: linear-gradient(to bottom, var(--white), rgba(255, 255, 255, 0));
  box-shadow: var(--shadow-card);
  transform: rotate(-3deg);
  margin-top: 23px; /* Figma: rotated album bbox starts at y 47 */
  padding: 0;
  overflow: hidden;
}

.album__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 24px;
}

.sticker {
  aspect-ratio: 1086 / 1448;
  border: 2px solid #b0cce8;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}

.sticker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sticker--empty {
  display: grid;
  place-items: center;
  background: #f0f2f3;
  border: 2px dashed var(--blu-foto);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -1.12px;
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   What we make
   -------------------------------------------------------------------------- */

.what {
  position: relative;
}

/* --------------------------------------------------------------------------
   Doodles
   Each one is a child of the element it decorates and sits at its natural
   pixel size, so it never scales with the viewport and cannot drift when the
   layout reflows. Offsets are derived from the Figma section coordinates and
   are measured from each anchor's padding box (the border box less any
   border), so a negative value means the doodle deliberately overhangs.
   -------------------------------------------------------------------------- */

.doodle {
  position: absolute;
  z-index: 2;
  max-width: none;
  pointer-events: none;
  user-select: none;

  /* One knob for the whole set. Every size and offset below is written
     against it, so changing it at a breakpoint shrinks the doodles and pulls
     their offsets in by the same proportion: a doodle that overhangs its
     anchor by a third of its own width still does, at any scale. Figma
     numbers stay legible as the literal in each calc. */
  --doodle-scale: 1;
}

/* Section header, top right. Figma: x 1152-1197, y 19-64 (2px border-top).
   The vertical position is a fixed 7px at every width, deliberately not
   scaled: the ball has to clear two fixed things, the rule above it and the
   section title below, and the gap between those does not change with the
   viewport. Figma's y of 17 put it on top of the title once the title wrapped
   to two lines. Only the size still scales. */
.doodle--football {
  right: calc(53px * var(--doodle-scale));
  top: 7px;
  width: calc(45px * var(--doodle-scale));
  height: calc(45px * var(--doodle-scale));
}

/* Main card, top-right corner. Figma: x 787-844, y 145-212 in a card at
   x 190-872, y 125-477. */
.doodle--medal {
  right: calc(28px * var(--doodle-scale) - 5px);
  top: calc(20px * var(--doodle-scale));
  width: calc(58px * var(--doodle-scale));
  height: calc(67px * var(--doodle-scale));
}

/* Shout box, left edge, vertically centred so it tracks the box as the text
   wraps to more lines. Figma: x 263-294, centred on the box's own centre. */
.doodle--star-1 {
  left: calc(-3px * var(--doodle-scale));
  top: 50%;
  transform: translateY(calc(-50% + 4px * var(--doodle-scale)));
  width: calc(31px * var(--doodle-scale));
  height: calc(31px * var(--doodle-scale));
}

/* Shout box, bottom-right corner, overhanging the frame. Figma: x 807-829. */
.doodle--star-2 {
  right: calc(-18px * var(--doodle-scale));
  bottom: calc(-11px * var(--doodle-scale));
  width: calc(22px * var(--doodle-scale));
  height: calc(26px * var(--doodle-scale));
}

/* Paper note, bottom-left, hanging below the card. Figma: x 912-937,
   y 274-298 in a note at x 896-1250, y 125-289. */
.doodle--star-rect {
  left: calc(16px * var(--doodle-scale));
  bottom: calc(-9px * var(--doodle-scale));
  width: calc(25px * var(--doodle-scale));
  height: calc(24px * var(--doodle-scale));
}

/* Sabbia note, top-right, hanging above the card. Figma: x 1189-1237,
   y 294-335 in a note at x 896-1250, y 312-476. */
.doodle--camera {
  right: calc(13px * var(--doodle-scale));
  top: calc(-19px * var(--doodle-scale));
  width: calc(48px * var(--doodle-scale));
  height: calc(42px * var(--doodle-scale));
}

/* Outside the content column at the grid's bottom-left. Needs room beyond the
   column, so it is hidden once the window is too narrow to spare it. */
.doodle--basketball {
  left: -111px;
  top: 100%;
  width: 55px;
  height: 55px;
}

@media (max-width: 1180px) {
  .doodle--basketball {
    display: none;
  }
}

/* Anchors */
.sec-head,
.what__grid,
.what__main,
.what__shout,
.what__note {
  position: relative;
}

.what > .wrap,
.project > .wrap {
  position: relative;
  z-index: 1;
}

.what__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 682fr) minmax(0, 354fr);
  gap: 24px;
  align-items: start;
}

.what__main {
  background: rgba(245, 217, 160, 0.8);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 352px;
  justify-content: center;
}

.what__main p {
  font-size: 18px;
  line-height: 1.6;
}

/* Hand-drawn cream frame from Figma. Used as a 9-slice border-image so the
   corners keep their drawn shape and only the edges tile as the box resizes.
   The artwork's fill and outline are the same cream, so `fill` supplies the
   panel background too and no background-color is needed. */
.what__shout {
  border: 26px solid transparent;
  border-image: url("assets/memories-container.svg") 26 fill round;
  padding: 0 37px; /* Figma: 490px text column inside a 615px frame */
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.26px;
  color: var(--rosso-scuro);
}

.what__side {
  display: grid;
  gap: 24px;
}

.what__note {
  border-radius: var(--radius);
  padding: 24px;
  min-height: 164px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
}

.what__note--paper {
  background: var(--paper);
}

.what__note--sabbia {
  background: var(--sabbia);
}

/* --------------------------------------------------------------------------
   The project
   -------------------------------------------------------------------------- */

.project {
  position: relative;
}

/* Who goes in the album, as a scannable row rather than a comma string
   buried at the end of the lede. */
.roles {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -16px 0 32px;
}

.roles li {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 9px 15px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.project__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* CSS `border-style: dashed` gives no control over dash length, cap or join,
   so the outline is drawn as an SVG stroke instead. The SVG carries no
   viewBox, so it takes the pseudo-element's size and nothing is ever scaled:
   the stroke stays 2px and the dashes 6px at any card size.
   The ring sits OUTSIDE the fill: the pseudo-element is inset -2px and the
   rect path runs 1px inside it, so the 2px centred stroke spans exactly the
   band from the card's edge to 2px beyond it. rx is 9 = the card's 8px
   radius plus the 1px half-stroke. */
.pill {
  position: relative;
  border-radius: var(--radius);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pill::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background-repeat: no-repeat;
}

.pill--miele {
  background: var(--miele);
}

.pill--miele::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' rx='9' ry='9' fill='none' stroke='%23f5bc4d' stroke-width='2' stroke-dasharray='6 6' stroke-linecap='butt' stroke-linejoin='miter' style='width:calc(100%25 - 2px);height:calc(100%25 - 2px)'/%3E%3C/svg%3E");
}

.pill--rosso {
  background: var(--rosso-bustina);
}

.pill--rosso::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' rx='9' ry='9' fill='none' stroke='%23e8503a' stroke-width='2' stroke-dasharray='6 6' stroke-linecap='butt' stroke-linejoin='miter' style='width:calc(100%25 - 2px);height:calc(100%25 - 2px)'/%3E%3C/svg%3E");
}

.pill--rosso .card-title {
  color: var(--crema);
}

.pill--rosso p {
  color: var(--white);
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */

.how {
  background: var(--miele-scuro);
}

.how .eyebrow {
  color: var(--sabbia);
}

.how .sec-title {
  color: var(--white);
}

.how .sec-head {
  border-top: none;
  padding-top: 0;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.step {
  padding-right: 24px;
  border-right: 1px solid var(--miele);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.step:not(:first-child) {
  padding-left: 24px;
}

.step:last-child {
  border-right: none;
  padding-right: 0;
}

.step__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--sabbia);
}

.step__title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  color: var(--white);
}

.step p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--crema-chiara);
}

/* --------------------------------------------------------------------------
   Examples
   -------------------------------------------------------------------------- */

.examples__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  padding-block: 24px 0;
}

.shot {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.shot__frame {
  border: 8px solid var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  background: var(--white);
}

.shot__frame img {
  width: 100%;
  height: auto;
}

.shot figcaption {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

.shot--tilt-left {
  transform: rotate(-4deg);
}

.shot--tilt-right {
  transform: rotate(4deg);
}

/* --------------------------------------------------------------------------
   Not only sports clubs
   -------------------------------------------------------------------------- */

.audience {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.audience .card {
  background: var(--white);
  border: 1px solid var(--paper);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
}

.faq > div {
  border-top: 1px solid var(--paper);
  padding-block: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq h3 {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  color: var(--blu-figurine);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact {
  background: var(--crema-chiara);
}

.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 48px;
  align-items: start;
}

.contact .sec-head {
  border-top: none;
  padding-top: 0;
  margin-bottom: 16px;
}

.contact__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.76px;
  margin-bottom: 18px;
}

.contact__body {
  font-size: 18px;
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: 24px;
}

.contact__stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.26px;
}

.contact__card {
  background: var(--white);
  border: 1px solid var(--paper);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* align-self stops the column flex container stretching the img to full
   width, which would let the SVG centre its artwork inside that wide box. */
.contact__card img.mark {
  align-self: flex-start;
  height: 26px;
  width: auto;
}

.contact__card p {
  line-height: 1.65;
}

.contact__card .lead {
  font-weight: 600;
}

.contact__details {
  border-top: 1px solid var(--paper);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact__details b {
  font-weight: 600;
}

.contact__details a {
  text-decoration: none;
}

.contact__details a:hover {
  text-decoration: underline;
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact__actions .btn {
  min-height: 46px;
  font-size: 15px;
}

.btn--blue {
  background: var(--blu-figurine);
  color: var(--white);
}

.btn--blue:hover {
  background: #22366f;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--blu-figurine);
  color: var(--cream);
  padding-block: 44px;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}

.site-footer img {
  height: 26px;
  width: auto;
  margin-bottom: 28px;
}

.site-footer p {
  font-size: 14px;
  line-height: 1.55;
}

.site-footer a {
  color: var(--sabbia);
  font-size: 14px;
}

.site-footer .legal {
  color: var(--blu-chiaro);
  margin-top: 20px;
}

.site-footer__right {
  align-self: center;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .album {
    max-width: 520px;
    margin-inline: auto;
  }

  .what__grid {
    grid-template-columns: 1fr;
  }

  .what__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project__grid {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 0;
  }

  /* In two columns the roles change: every even step ends its row, and every
     odd step starts one, so it must lose the 24px left padding that the
     4-column rule gives to everything after the first. */
  .step:nth-child(2n) {
    border-right: none;
    padding-right: 0;
  }

  .step:nth-child(2n + 1) {
    padding-left: 0;
  }

  .examples__grid {
    gap: 48px;
  }

  .audience,
  .faq {
    grid-template-columns: 1fr;
  }

  .contact__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Mobile menu
   The breakpoint is set by the content, not by a device: below 760px the nav
   labels wrap to two lines, and from ~800px the logo and nav are close enough
   to look accidental. 860 leaves headroom for a fallback font, which measures
   wider than Figtree and would otherwise wrap sooner.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  :root {
    --header-h: 73px; /* 72px bar + 1px border */
  }

  .site-header__inner {
    min-height: 72px;
  }

  /* The nav leaves the flow here, so this row holds only the switch and the
     burger. The switch stays out of the menu on purpose: someone who landed
     in the wrong language should not have to open a menu to get out of it. */
  .site-header__right {
    gap: 14px;
  }

  .burger {
    display: grid;
  }

  /* The card is a child of the sticky header, so it inherits the header's
     z-index 20 and paints above the scrim at 15 without any extra stacking.
     width:auto is load-bearing: with left+right set, a leftover width:100%
     would win and push the card off the right edge. */
  .nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 12px;
    right: 12px;
    width: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 8px;
    background: var(--white);
    border: 1px solid var(--paper);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(22, 32, 74, 0.16);
  }

  .nav.is-open {
    display: flex;
  }

  .nav a {
    font-size: 17px;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 8px;
  }

  .nav a + a {
    border-top: 1px solid var(--paper);
  }

  .nav .ico {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 720px) {
  .section {
    padding-block: 40px;
  }

  .what__side,
  .examples__grid,
  .faq {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .step {
    border-right: none;
    padding-inline: 0;
    border-left: 1px solid var(--miele);
    padding-left: 20px;
  }

  /* :nth-child(2n + 1) from the two-column block above out-specifies a bare
     .step, so the odd steps need naming again here to get the indent back. */
  .step:not(:first-child),
  .step:nth-child(2n + 1) {
    padding-left: 20px;
  }

  .what__shout {
    padding-inline: 4px;
  }

  .shot--tilt-left,
  .shot--tilt-right {
    transform: none;
  }

  .album {
    transform: none;
  }

  .contact__inner {
    grid-template-columns: 1fr;
  }

  .btn {
    width: 100%;
  }

  /* Shown at 70% rather than hidden. Because the offsets scale too, the
     overhangs shrink with the artwork instead of staying at their desktop
     size, which is what would push them past the screen edge. */
  .doodle {
    --doodle-scale: 0.7;
  }

  /* Hand nudges for the phone only, on top of the scaled position. The
     literal px are deliberate: they are a fixed correction at this width,
     not something to scale. Desktop keeps its Figma coordinates untouched. */
  .doodle--medal {
    top: calc(20px * var(--doodle-scale) - 10px);
  }

  /* Centred here to match the two notes beside it, which are centred at every
     width. The padding is symmetric on purpose: it reserves the channel the
     medal needs in the top-right corner, and keeping it equal on both sides is
     what lets the centred text stay optically centred in the card. A
     right-only channel would pull the text 20px off centre. Measured across
     320-720 in both languages: the first line always clears the medal, worst
     case 23px. */
  .what__main > p:not(.what__shout) {
    padding-inline: 40px;
    text-align: center;
  }

  .doodle--star-1 {
    left: calc(-3px * var(--doodle-scale) - 15px);
  }
}

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

  .btn,
  .nav a,
  .nav .ico img {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Privacy page
   Namespaced .policy so it cannot collide with the footer's .legal line.
   Reuses the site tokens, header and footer; only the reading column and the
   legal-document furniture are new.
   -------------------------------------------------------------------------- */

.policy-head {
  background: var(--cream);
  padding-block: 56px 40px;
}

.policy-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.76px;
  color: var(--ink);
  margin-block: 8px 16px;
}

.policy-head__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--slate);
  max-width: 640px;
  margin-bottom: 20px;
}

.policy-head__date {
  display: inline-block;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* A legal document is read, not scanned, so the column is capped near 70
   characters rather than filling the 1060px grid. */
.policy__body {
  max-width: 726px;
}

.policy__sec {
  border-top: 1px solid var(--paper);
  padding-top: 28px;
  margin-top: 28px;
}

.policy__sec:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.policy__sec h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.36px;
  color: var(--ink);
  margin-bottom: 18px;
}

/* Same numeral treatment as the "How it works" steps. */
.policy__num {
  flex: none;
  font-size: 20px;
  color: var(--miele-scuro);
  font-variant-numeric: tabular-nums;
}

.policy__sec h3 {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--blu-figurine);
  margin-top: 26px;
  margin-bottom: 10px;
}

.policy__sec p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 14px;
}

.policy__sec a {
  color: var(--blu-foto);
  text-underline-offset: 3px;
}

.policy__sec a:hover {
  text-decoration: none;
}

/* Legal-basis note: quieter than the body copy it qualifies. */
.policy__basis {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin-bottom: 18px !important;
}

.policy__basis b {
  color: var(--miele-scuro);
  font-weight: 600;
}

.policy__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.policy__list li {
  position: relative;
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.7;
}

.policy__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--miele);
}

/* Controller details, styled like the contact card on the home page. */
.policy__card {
  background: var(--white);
  border: 1px solid var(--paper);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.policy__card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.policy__card dt {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  min-width: 118px;
}

.policy__card dd {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
}

.policy__card a {
  color: var(--blu-foto);
  text-decoration: none;
}

.policy__card a:hover {
  text-decoration: underline;
}

.policy__back {
  border-top: 1px solid var(--paper);
  padding-top: 28px;
  margin-top: 32px;
  font-weight: 600;
}

.policy__back a {
  color: var(--blu-figurine);
  text-decoration: none;
}

.policy__back a:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .policy-head {
    padding-block: 32px 28px;
  }

  .policy__sec h2 {
    font-size: 21px;
    gap: 10px;
  }

  .policy__sec p,
  .policy__list li {
    font-size: 16px;
  }

  .policy__card dt {
    min-width: 0;
    width: 100%;
  }
}