/* The homepage's Services section (index.html: the .svc rules, its dialog and the reveal contract), after the marquee
   on the brands page. The homepage's tokens are set on the section, the dialog and the follower themselves, so this
   page's older :root values (styles.css) never reach them; the rules below are the homepage's, verbatim. */
.svc, .svc-dialog, .svc__follower {
  --font-sans: 'Archivo', 'Switzer Fallback', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Archivo Black', 'Arial Black', 'Archivo', sans-serif;
  --w-display: 300;
  --w-text: 400;
  --w-ui: 500;
  --fs-display: clamp(80px, 16.667vw, 240px);
  --fs-h2: clamp(24px, 4.667vw, 56px);
  --fs-body-lg: clamp(18px, 2vw, 24px);
  --fs-body: clamp(16px, 1.667vw, 20px);
  --fs-small: 14px;
  --lh-display: .92;
  --lh-h2: 1.15;
  --lh-body-lg: 1.33;
  --lh-body: 1.45;
  --lh-small: 1.7;
  --ls-display: -.055em;
  --ls-h2: -.025em;
  --ls-body-lg: -.03em;
  --ls-body: -.02em;
  --ls-small: -.01em;
  --measure-lead: 480px;
  --container: 1256px;
  --ink: #24363f;
  --bg: #fff;
  --ink-64: color-mix(in srgb, var(--ink) 64%, transparent);
  --ink-24: color-mix(in srgb, var(--ink) 24%, transparent);
  --pad-x: max(16px, 2.7211vw);
  --pad-y: max(16px, 2.1769vw);
  --in-y: 12px; --in-blur: 8px;
  --out-y: 12px; --out-blur: 8px;
  /* the homepage's body type, which these rows inherit there */
  font-family: var(--font-sans);
  font-weight: var(--w-display);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--ink);
}
/* in the page flow like the proof and the marquee: over the fixed hero, on white */
.svc { z-index: 25; background: var(--bg); }

/* type roles and the one button, as the homepage sets them; :where() keeps them at the homepage's weight, so the
   section's own rules below (the title's size, the phone description) still win */
:where(.svc, .svc-dialog) .t-display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 400; }
:where(.svc, .svc-dialog) .t-h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 400; text-wrap: balance; }
:where(.svc, .svc-dialog) .t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); letter-spacing: var(--ls-body-lg); font-weight: var(--w-display); text-wrap: pretty; }
:where(.svc, .svc-dialog) .t-small { font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--ls-small); font-weight: var(--w-text); }
:where(.svc, .svc-dialog) .is-demoted { color: var(--ink-64); }
.svc-dialog .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .01em;
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.svc-dialog .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .svc-dialog .btn:hover { background: var(--pop, var(--pop-pink)); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
}

/* the reveal contract: services.js writes --in 0 to 1 on each [data-reveal] as it scrolls in */
.svc [data-reveal] {
  opacity: calc(var(--in, 1) * (1 - var(--out, 0)));
  translate: 0 calc((1 - var(--in, 1)) * var(--in-y) - var(--out, 0) * var(--out-y));
}
.svc [data-reveal].is-anim { filter: blur(calc((1 - var(--in, 1)) * var(--in-blur) + var(--out, 0) * var(--out-blur))); }
.svc [data-reveal].is-hidden { visibility: hidden; }

/* ── services: rows with a cursor-following still (Osmo preview follower) ── */
.svc{ position:relative; padding:calc(var(--pad-y) * 4) var(--pad-x) }
.svc__title{ text-align:center; margin:0 0 clamp(40px, 6vw, 96px); font-size:min(var(--fs-display), 160px) }
.svc__list{ list-style:none; margin:0 auto; padding:0; max-width:var(--container); display:flex; flex-flow:column }
.svc__item{ border-top:1px solid var(--ink-24); transition:opacity .2s }
.svc__item:last-child{ border-bottom:1px solid var(--ink-24) }
.svc__inner{
  display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:clamp(24px, 4vw, 56px); align-items:start;
  width:100%; padding:clamp(28px, 4vw, 56px) 0; text-align:left;
  background:none; border:0; color:inherit; font:inherit; cursor:pointer; touch-action:manipulation;
}
.svc__num{ font-family:var(--font-display); font-size:calc(var(--fs-display) * .5); line-height:.9; letter-spacing:var(--ls-display); color:var(--ink) }
.svc__body{ display:grid; gap:12px; padding-top:.35em }
.svc__desc{ max-width:var(--measure-lead); display:block }
.svc__visual{ display:none; position:absolute; aspect-ratio:2 / 3; width:18em; overflow:hidden }
.svc__visual picture{ display:block; width:100%; height:100% }
.svc__visual img{ display:block; width:100%; height:100%; object-fit:cover }
.svc__follower{ position:fixed; inset:0 auto auto 0; z-index:20; width:18em; aspect-ratio:2 / 3; pointer-events:none; display:flex; justify-content:center; align-items:center }
.svc__follower-inner{
  position:relative; width:100%; height:100%; z-index:1; overflow:hidden;
  background:transparent;
  opacity:0; transform:scale(0);
  transition:opacity .08s ease, transform .22s cubic-bezier(.65, .1, 0, 1);
}
.svc__follower [data-follower-visual]{ display:block; position:absolute; inset:0; width:100%; height:100%; z-index:0 }
.svc__follower-label{ position:absolute; z-index:3; opacity:0; transform:translate(0, 100%); transition:opacity .08s ease, transform .22s cubic-bezier(.65, .1, 0, 1) }
.svc__follower-chip{ display:inline-block; padding:8px 14px; background:#fff; color:var(--ink); border:2px solid var(--ink); border-radius:0; box-shadow:3px 3px 0 var(--ink) }
@media (hover: hover) and (pointer: fine) and (min-width: 768px){
  body:has([data-follower-collection]:hover) .svc__follower-inner{ opacity:1; transform:scale(1) }
  body:has([data-follower-collection]:hover) .svc__follower-label{ opacity:1; transform:translate(0, 0) }
  body:has(.svc__item:hover) .svc__item:not(:hover) .svc__inner{ opacity:.5; transition:opacity .2s }
  .svc__item:hover .svc__num{ color:var(--pop, var(--pop-pink)); -webkit-text-stroke:2px var(--ink); paint-order:stroke fill }
}
/* the dialog: house card, still left, copy right */
.svc-dialog{ border:0; padding:0; background:transparent; max-width:none; max-height:none; width:100%; height:100%; inset:0; overflow:auto }
.svc-dialog::backdrop{ background:rgb(255 255 255 / .7) }
.svc-dialog__card{
  position:relative; box-sizing:border-box; width:min(960px, calc(100% - 2 * var(--pad-x))); margin:8vh auto;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(20px, 3vw, 40px); align-items:center;
  padding:clamp(20px, 3vw, 40px); background:#fff; border:2px solid var(--ink); border-radius:0; box-shadow:6px 6px 0 var(--ink);
}
.svc-dialog__media{ aspect-ratio:4 / 3; overflow:hidden; border-radius:0 }
.svc-dialog__media img{ display:block; width:100%; height:100%; object-fit:cover }
.svc-dialog__text{ display:grid; gap:16px; justify-items:start }
.svc-dialog__text h3{ margin:0 }
.svc-dialog__text p{ margin:0; max-width:var(--measure-lead) }
.svc-dialog__text .btn{ margin-top:8px }
.svc-dialog__close{ position:absolute; top:12px; right:12px; z-index:2; width:44px; height:44px; display:grid; place-items:center; background:#fff; border:2px solid var(--ink); cursor:pointer; color:var(--ink) }
.svc-dialog__media img{ object-position:50% 30% }
.svc-dialog__close span{ grid-area:1 / 1; display:block; width:24px; height:3px; background:currentColor; transform:rotate(45deg) }
.svc-dialog__close span:last-child{ transform:rotate(-45deg) }
@media (max-width: 767px){
  .svc__inner{ grid-template-columns:minmax(0, 1fr); row-gap:12px; padding:24px 0 }
  .svc__visual{ display:block; position:relative; width:100%; border-radius:0; order:-1 }
  .svc__follower{ display:none }
  .svc-dialog__card{ grid-template-columns:minmax(0, 1fr); margin:4vh auto }
}

/* services: no hover on touch, so the photo sits in the row as a thumbnail */
@media (max-width: 767px){
  .svc__inner{ grid-template-columns:minmax(0, 1fr) 96px; grid-template-areas:"num vis" "body vis"; column-gap:16px; row-gap:8px; padding:22px 0; align-items:start }
  .svc__num{ grid-area:num; font-size:28px }
  .svc__body{ grid-area:body; gap:6px; padding-top:0 }
  .svc__desc{ font-size:var(--fs-body); line-height:var(--lh-body); letter-spacing:var(--ls-body) }
  .svc__visual{ grid-area:vis; display:block; position:relative; width:100%; aspect-ratio:3 / 4; order:0 }
}
@media (min-width: 768px) and (hover: none), (min-width: 768px) and (pointer: coarse){
  .svc__inner{ grid-template-columns:auto minmax(0, 1fr) clamp(120px, 15vw, 180px) }
  .svc__visual{ display:block; position:relative; width:100%; aspect-ratio:3 / 4 }
}

@media (prefers-reduced-motion: reduce){
  /* keep the fades, drop the travel and the blur */
  .svc [data-reveal]{ translate:none }
  .svc [data-reveal].is-anim{ filter:none }
  .svc-dialog .btn{ transition:none }
}