/* Built By M · V4 · one stylesheet for every page. Tokens first, then
   chrome, then sections in page order. Design record: v4/DESIGN.md */

@font-face { font-family: "General Sans"; src: url(/assets/fonts/site/general-sans-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(/assets/fonts/site/general-sans-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(/assets/fonts/site/general-sans-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ground: #efefed;
  --surface: #f8f8f7;
  --white: #ffffff;
  --ink: #111111;
  --muted: #5c5c59;
  --line: rgb(17 17 17 / 0.1);
  --line2: rgb(17 17 17 / 0.18);
  --accent: #ff5b2e;
  --night: #111111;
  --night2: #1b1b1b;
  --on-night: #f2f2f0;
  --night-muted: #a3a3a0;
  --tile: #dcdcd9;

  --gut: clamp(16px, 4vw, 48px);
  --max: 1360px;
  --hd: 76px;
  --r-card: 22px;
  --r-media: 12px;
  --r-tile: 7px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-io: cubic-bezier(0.83, 0, 0.17, 1);

  --t-h1: clamp(2.65rem, 1.1rem + 4.7vw, 5.6rem);
  --t-h2: clamp(2.05rem, 1.25rem + 2.6vw, 3.8rem);
  --t-h3: clamp(1.4rem, 1.2rem + 0.75vw, 1.9rem);
  --t-l: clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem);
  --t-b: clamp(1rem, 0.97rem + 0.15vw, 1.0938rem);
  --d0: 0s;

  --shadow: 0 1px 0 rgb(255 255 255 / 0.7) inset, 0 18px 40px -26px rgb(17 17 17 / 0.4);
}
html.pt-in { --d0: 0.42s; }

/* ------------------------------------------------------------- base --- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 16px); }
html:not(.lenis) { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100svh; background: var(--ground); color: var(--ink);
  font: 400 var(--t-b) / 1.5 "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-kerning: normal; overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
p { margin: 0 0 1em; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
main:focus { outline: none; }
.wrap { width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
svg path, svg rect { vector-effect: non-scaling-stroke; }

/* construction rails: the two lines the M is laid between */
@media (min-width: 1100px) {
  body::before { content: ""; position: fixed; z-index: 0; top: 0; bottom: 0; left: 50%; translate: -50% 0; width: min(100vw - 2 * var(--gut) + 56px, var(--max) + 56px); border-inline: 1px solid var(--line); pointer-events: none; }
}
main, .ft { position: relative; z-index: 1; }

.skip { position: fixed; z-index: 100; left: 12px; top: 12px; translate: 0 -160%; background: var(--ink); color: var(--ground); padding: 0.8rem 1.1rem; border-radius: 999px; font-weight: 500; text-decoration: none; transition: translate 0.3s var(--ease); }
.skip:focus { translate: 0 0; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* ------------------------------------------------------------- type --- */
.h2 { font-size: var(--t-h2); font-weight: 600; line-height: 1; letter-spacing: -0.043em; margin: 0 0 1rem; text-wrap: balance; }
.h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 0.75rem; text-wrap: balance; }
.sh { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); }
.sh__p { color: var(--muted); font-size: var(--t-l); line-height: 1.42; margin: 0; max-width: 38rem; text-wrap: pretty; }
.sh--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; max-width: none; }
.sh--row > div:first-child { max-width: 44rem; }

/* tags and chips */
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line2); font-size: 0.75rem; font-weight: 500; line-height: 1; white-space: nowrap; letter-spacing: 0; }
.tag--client { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: 0.8125rem; font-weight: 500; padding: 6px 11px; border-radius: 999px; background: var(--ground); line-height: 1.1; }

/* ---------------------------------------------------------- buttons --- */
.btn {
  --b-bg: var(--ink); --b-fg: var(--ground); --c-bg: var(--accent); --c-fg: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  height: 54px; padding: 0 8px 0 24px; border-radius: 999px; border: 0;
  background: var(--b-bg); color: var(--b-fg); font-size: 1rem; font-weight: 500; line-height: 1; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer; isolation: isolate;
  box-shadow: 0 10px 26px -14px rgb(17 17 17 / 0.55);
  transition: background-color 0.35s var(--ease-soft), color 0.35s var(--ease-soft), box-shadow 0.4s var(--ease-soft), scale 0.25s var(--ease-soft);
}
.btn { overflow: clip; }
.btn::before { content: ""; position: absolute; z-index: -1; right: 8px; top: 50%; width: 48px; height: 38px; margin-top: -19px; border-radius: 10px; background: var(--c-bg); scale: 0.5; opacity: 0; transition: scale 0.6s var(--ease), opacity 0.2s; }
.btn--sm::before { width: 40px; height: 30px; margin-top: -15px; border-radius: 8px; }
.btn__l { display: inline-grid; overflow: clip; line-height: 1.25; }
.btn__l > span, .btn__l::after { grid-area: 1 / 1; transition: translate 0.55s var(--ease); }
.btn__l::after { content: attr(data-l); content: attr(data-l) / ""; translate: 0 110%; }
.btn__c { display: grid; place-items: center; width: 48px; height: 38px; border-radius: 10px; background: var(--c-bg); color: var(--c-fg); overflow: clip; flex: none; transition: background-color 0.35s, color 0.35s; }
.btn__c svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn:active { scale: 0.97; }
.btn--accent { --b-bg: var(--accent); --b-fg: var(--ink); --c-bg: var(--ink); --c-fg: var(--accent); box-shadow: 0 10px 26px -14px rgb(255 91 46 / 0.7); }
.btn--line { --b-bg: transparent; --b-fg: var(--ink); --c-bg: var(--ink); --c-fg: var(--ground); box-shadow: inset 0 0 0 1px var(--line2); }
.btn--sm { height: 44px; padding-left: 18px; gap: 10px; font-size: 0.9375rem; }
.btn--sm .btn__c { width: 40px; height: 30px; border-radius: 8px; }
.btn--sm .btn__c svg { width: 15px; height: 15px; }
.btn--full { width: 100%; height: 58px; }
.btn--full:hover::before, .btn--full:focus-visible::before { scale: 32 !important; }
@keyframes travel { 0% { translate: 0 0; } 42% { translate: 160% 0; } 43% { translate: -160% 0; } 100% { translate: 0 0; } }
@keyframes travelDown { 0% { translate: 0 0; } 42% { translate: 0 160%; } 43% { translate: 0 -160%; } 100% { translate: 0 0; } }
@media (hover: hover) {
  .btn:hover { color: var(--c-fg); }
  .btn:hover::before { opacity: 1; scale: 14; }
  .btn:hover .btn__c { background: var(--c-fg); color: var(--c-bg); }
  .btn:hover .btn__l > span { translate: 0 -110%; }
  .btn:hover .btn__l::after { translate: 0 0; }
  .btn:hover .btn__c svg { animation: travel 0.6s var(--ease) both; }
  .btn:hover .btn__c svg[data-down], .btn:hover .btn__c svg:has(path[d^="M12 4v15"]) { animation-name: travelDown; }
  .btn--line:hover { box-shadow: inset 0 0 0 1px var(--ink), 0 12px 28px -18px rgb(17 17 17 / 0.4); }
  .btn--ink:hover { box-shadow: 0 16px 34px -14px rgb(17 17 17 / 0.6); }
}
.btn:focus-visible { color: var(--c-fg); }
.btn:focus-visible::before { opacity: 1; scale: 14; }
.btn:focus-visible .btn__c { background: var(--c-fg); color: var(--c-bg); }
.btn:focus-visible .btn__l > span { translate: 0 -110%; }
.btn:focus-visible .btn__l::after { translate: 0 0; }

/* ----------------------------------------------------------- header --- */
.hd { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: var(--hd); transition: translate 0.55s var(--ease), background-color 0.35s, box-shadow 0.35s; }
.hd::before { content: ""; position: absolute; inset: 0; background: rgb(239 239 237 / 0.82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); opacity: 0; transition: opacity 0.35s; }
.hd.is-solid::before { opacity: 1; }
.hd.is-away { translate: 0 -105%; }
.hd__in { position: relative; height: 100%; display: flex; align-items: center; gap: 28px; }
.hd__logo { display: block; color: var(--ink); flex: none; margin-right: auto; padding: 8px 0; border-radius: 4px; }
.hd__logo svg path, .ft__logo svg path { transition: fill 0.35s, translate 0.45s var(--ease); }
@media (hover: hover) { .hd__logo:hover svg path:nth-child(-n+4):not(:first-child) { fill: var(--accent); translate: 360px 0; } .ft__logo:hover svg path:nth-child(-n+4):not(:first-child) { fill: var(--accent); } }
.hd__logo:focus-visible svg path:nth-child(-n+4):not(:first-child) { fill: var(--accent); }
.hd__logo svg { height: 21px; width: auto; }
.hd__nav { display: flex; gap: 30px; }
.nv { position: relative; font-size: 0.9688rem; font-weight: 500; text-decoration: none; padding: 6px 0; background: linear-gradient(currentColor 0 0) left 100% / 0% 1.5px no-repeat; transition: background-size 0.45s var(--ease); }
.nv[aria-current="page"] { background-size: 100% 1.5px; }
@media (hover: hover) { .nv:hover { background-size: 100% 1.5px; } }
.nv:focus-visible { background-size: 100% 1.5px; }
.hd__menu { display: none; align-items: center; gap: 10px; height: 44px; padding: 0 7px 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--ground); font-size: 0.9375rem; font-weight: 500; cursor: pointer; }
.hd__menu-i { position: relative; width: 38px; height: 30px; border-radius: 8px; background: var(--accent); }
.hd__menu-i i { position: absolute; left: 12px; right: 12px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: top 0.35s var(--ease), rotate 0.35s var(--ease); }
.hd__menu-i i:first-child { top: 12px; }
.hd__menu-i i:last-child { top: 17px; }
.hd__menu[aria-expanded="true"] .hd__menu-i i { top: 14.2px; rotate: 45deg; }
.hd__menu[aria-expanded="true"] .hd__menu-i i:last-child { rotate: -45deg; }

.menu { position: fixed; z-index: 60; inset: 0; background: var(--ground); padding-top: var(--hd); overflow-y: auto; overscroll-behavior: contain; }
.menu[hidden] { display: none; }
.menu__in { display: grid; gap: 28px; padding-block: 20px calc(32px + env(safe-area-inset-bottom)); }
.menu__main { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.menu__main li { border-bottom: 1px solid var(--line); }
.menu__main a { display: block; padding: 10px 0; font-size: clamp(2.2rem, 9vw, 3.6rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.04em; text-decoration: none; }
.menu.is-open .menu__main li { animation: lay 0.7s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
.menu__k { color: var(--muted); font-size: 0.8125rem; font-weight: 500; margin: 0 0 6px; }
.menu__side ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 2px; }
.menu__side a { font-size: 1.0625rem; font-weight: 500; text-decoration: none; display: inline-block; padding: 4px 0; }
.menu__cta { justify-self: start; }
html.menu-open { overflow: clip; }

/* -------------------------------------------------- page transition --- */
/* five columns rise in M order (outer pair, inner pair, centre): their
   leading edge is the letter */
.pt { position: fixed; z-index: 95; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); pointer-events: none; }
.pt i { background: var(--night); translate: 0 101%; margin-right: -1px; }
html.pt-in .pt i { translate: 0 0; animation: ptOut 0.62s var(--ease-io) both; }
html.pt-in .pt i:nth-child(1), html.pt-in .pt i:nth-child(5) { animation-delay: 0.06s; }
html.pt-in .pt i:nth-child(2), html.pt-in .pt i:nth-child(4) { animation-delay: 0.12s; }
html.pt-in .pt i:nth-child(3) { animation-delay: 0.18s; }
@keyframes ptOut { from { translate: 0 0; } to { translate: 0 -101%; } }

/* ----------------------------------------------------------- reveal --- */
@keyframes lay { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes settle { from { translate: 0 24px; } to { translate: 0 0; } }
@keyframes layTile { from { opacity: 0; translate: 0 34%; } to { opacity: 1; translate: 0 0; } }
.js [data-r] { opacity: 0; translate: 0 24px; transition: opacity 0.6s var(--ease-soft), translate 0.9s var(--ease); transition-delay: var(--rd, 0s); }
.js [data-r].in, .no-r [data-r] { opacity: 1; translate: 0 0; }
.js .in1, .js .in2, .js .in3 { animation: settle 1s var(--ease) both; }
.js .in1 { animation-delay: calc(var(--d0) + 0.28s); }
.js .in2 { animation-delay: calc(var(--d0) + 0.4s); }
.js .in3 { animation-delay: calc(var(--d0) + 0.55s); }
.js .hl { animation: settle 1.1s var(--ease) both; }
.js .hl:nth-child(1) { animation-delay: calc(var(--d0) + 0.04s); }
.js .hl:nth-child(2) { animation-delay: calc(var(--d0) + 0.11s); }
.js .hl:nth-child(3) { animation-delay: calc(var(--d0) + 0.18s); }

/* ============================================================= HOME === */
.hero { position: relative; z-index: 3; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--hd) + clamp(24px, 5vh, 64px)) 0 clamp(40px, 7vh, 88px); }
.hero__g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: center; width: min(100% - 2 * var(--gut), var(--max)); }
.hero__t { grid-column: 1 / span 5; container-type: inline-size; }
.hero__t .hero__h { font-size: min(var(--t-h1), 15.4cqi); }
.hero__h, .sp-h__h { font-size: var(--t-h1); font-weight: 600; line-height: 0.96; letter-spacing: -0.048em; margin: 0 0 clamp(20px, 2.4vw, 30px); margin-left: -0.04em; }
.hl { display: block; }
.hero__p { font-size: var(--t-l); line-height: 1.42; color: var(--muted); max-width: 34rem; margin: 0 0 30px; text-wrap: pretty; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__trust { display: flex; align-items: center; gap: 14px; margin-top: clamp(32px, 5vh, 52px); }
.hero__faces { display: flex; flex: none; }
.hero__faces img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ground); box-shadow: 0 4px 10px -4px rgb(17 17 17 / 0.4); }
.hero__faces img + img { margin-left: -12px; }
.hero__trust p { margin: 0; font-size: 0.9063rem; line-height: 1.4; color: var(--muted); max-width: 22rem; }
.hero__trust a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line2); transition: text-decoration-color 0.3s; }
@media (hover: hover) { .hero__trust a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; } }
.hero__m { grid-column: 6 / span 7; margin: 0; }
.hero__cap { margin-top: clamp(14px, 1.6vw, 22px); font-size: 0.9063rem; color: var(--muted); text-align: right; }
.hero__cap span { color: var(--ink); font-weight: 500; }

/* the M */
.mm { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(4px, 0.55vw, 9px) clamp(6px, 0.9vw, 14px); }
.mm__t { position: relative; z-index: 5; grid-row: var(--r); grid-column: var(--c); display: block; aspect-ratio: 16 / 9; border-radius: var(--r-tile); overflow: clip; background: var(--tile); transform-origin: 0 0; box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 12px 26px -16px rgb(17 17 17 / 0.45); outline-offset: 3px; }
.mm__t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: scale 0.7s var(--ease); }
.mm__t img + img { opacity: 0; }
.mm__n { position: absolute; z-index: 2; left: 5px; bottom: 5px; max-width: calc(100% - 10px); padding: 4px 8px; border-radius: 999px; background: var(--ink); color: var(--ground); font-size: 0.6875rem; font-weight: 500; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; translate: 0 6px; transition: opacity 0.3s, translate 0.45s var(--ease); pointer-events: none; }
.mm__t--you { display: grid; place-items: center; background: var(--accent); text-decoration: none; transform-origin: 50% 50%; box-shadow: 0 14px 30px -14px rgb(255 91 46 / 0.75); }
.mm__you { font-size: clamp(0.625rem, 0.5rem + 0.45vw, 0.9375rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; text-align: center; color: var(--ink); transition: scale 0.45s var(--ease); }
.js .mm__t { animation: layTile 0.85s var(--ease) backwards; animation-delay: calc(var(--d0) + 0.12s + var(--o) * 52ms); }
.mm__t.is-flying { pointer-events: none; box-shadow: 0 22px 46px -22px rgb(17 17 17 / 0.5); }
@keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
.mm__t--you .mm__you { animation: breathe 3.2s ease-in-out 2s infinite; }
@media (hover: hover) {
  .mm__t:not(.is-flying):hover { translate: 0 -4px; z-index: 6; box-shadow: 0 0 0 2px var(--ink), 0 20px 36px -18px rgb(17 17 17 / 0.55); }
  .mm__t:hover img { scale: 1.07; }
  .mm__t:hover .mm__n { opacity: 1; translate: 0 0; }
  .mm__t--you:hover { background: var(--ink); }
  .mm__t--you:hover .mm__you { color: var(--accent); scale: 1.1; animation: none; }
}
.mm__t { transition: translate 0.45s var(--ease), box-shadow 0.35s, background-color 0.3s; }
.mm__t:focus-visible .mm__n { opacity: 1; translate: 0 0; }

/* the work */
.wk { position: relative; z-index: 1; padding-block: clamp(40px, 6vw, 96px) clamp(40px, 4.5vw, 64px); }
.cm { padding-block: clamp(56px, 7vw, 112px); }
.pr { padding-block: clamp(48px, 5.5vw, 88px); }
.fr { padding-block: clamp(48px, 5vw, 80px); }
.ab { padding-block: clamp(56px, 7vw, 112px); }
.fq { padding-block: clamp(48px, 5.5vw, 88px); }
.flt { display: flex; gap: 4px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.flt__b { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 0.9375rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color 0.35s var(--ease-soft), color 0.35s; }
.flt__b span { opacity: 0.6; margin-left: 3px; font-variant-numeric: tabular-nums; }
.flt__b[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
@media (hover: hover) { .flt__b[aria-pressed="false"]:hover { color: var(--ink); background: var(--ground); } .flt__b[aria-pressed="true"]:hover { background: #2b2b2b; } .flt__b:hover span { opacity: 1; } }
.wk__g { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 22px); }
.wc[hidden] { display: none; }
.wc__a { display: block; height: 100%; padding: 7px 7px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; transition: translate 0.5s var(--ease), box-shadow 0.5s var(--ease), background-color 0.3s; }
.wc__m { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-media); overflow: clip; background: var(--tile); }
.wc__m img, .wc__m video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: scale 0.8s var(--ease); }
.wc__m video { opacity: 0; transition: opacity 0.4s, scale 0.8s var(--ease); }
.wc__m video.is-on { opacity: 1; }
html.has-morph .wk__g [data-land] img { opacity: 0; }
html.has-morph .wk__g .wc.is-landed [data-land] img { opacity: 1; }
.wc__b { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 13px 7px 2px; }
.wc__n { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.wc__s { display: block; margin: 0 7px; font-size: 0.8438rem; color: var(--muted); line-height: 1.35; }
@media (hover: hover) {
  .wc__a:hover { translate: 0 -4px; background: var(--white); box-shadow: 0 24px 44px -26px rgb(17 17 17 / 0.45); }
  .wc__a:hover .wc__m img, .wc__a:hover .wc__m video { scale: 1.04; }
}
.wc__a:focus-visible { background: var(--white); }
.wc.is-in { animation: lay 0.7s var(--ease) both; animation-delay: var(--rd, 0s); }

/* compare */
.cm__t { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: clip; table-layout: fixed; }
.cm__t thead th, .cm__t thead td { padding: 20px 26px; text-align: left; font-size: 0.9375rem; font-weight: 500; vertical-align: middle; }
.cm__t thead td { width: 20%; }
.cm__t thead .cm__a { color: var(--muted); }
.cm__t thead .cm__b { background: var(--ink); color: var(--ground); }
.cm__logo svg { height: 17px; width: auto; color: var(--ground); fill: currentColor; }
.cm__t tbody th { padding: 22px 26px; text-align: left; font-weight: 500; vertical-align: top; border-top: 1px solid var(--line); }
.cm__t tbody td { padding: 22px 26px 22px 62px; position: relative; vertical-align: top; border-top: 1px solid var(--line); line-height: 1.45; }
.cm__t td.cm__a { color: var(--muted); }
.cm__t tbody td.cm__b { background: var(--white); font-weight: 500; }
.cm__i { position: absolute; left: 26px; top: 22px; display: grid; place-items: center; width: 26px; height: 22px; border-radius: 6px; }
.cm__i svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cm__i--no { background: #e3e3e0; color: var(--muted); }
.cm__i--yes { background: var(--accent); color: var(--ink); }
.cm__t tbody tr.in .cm__i--yes { animation: pop 0.6s var(--ease) 0.25s both; }
@keyframes pop { from { scale: 0.4; } to { scale: 1; } }
.cm__go { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 30px; }
.cm__go p { margin: 0; color: var(--muted); font-size: 0.9375rem; }

/* process: a staircase of four blocks, launch at the top */
.pr__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; }
.pr__s { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 24px 26px; margin-bottom: calc(var(--s) * 52px); }
.pr__s:last-child { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.pr__s:last-child p { color: var(--night-muted); }
.pr__s:last-child .chips li { background: var(--night2); color: var(--on-night); }
.pr__n { display: block; font-size: clamp(2.4rem, 1.6rem + 2vw, 3.4rem); font-weight: 600; line-height: 1; letter-spacing: -0.05em; color: #8a8a86; font-variant-numeric: tabular-nums; }
.pr__s:last-child .pr__n { color: var(--accent); }
.pr__t { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; margin: 34px 0 10px; }
.pr__s p { color: var(--muted); font-size: 0.9688rem; line-height: 1.5; margin: 0 0 20px; }

/* industries: index list with a floating preview */
.fr { position: relative; }
.ab, .cs-p { overflow-x: clip; }
.fr__l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line2); }
.fr__l li { border-bottom: 1px solid var(--line2); }
.fr__a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 60px; align-items: center; gap: 24px; padding: clamp(18px, 2.2vw, 28px) 0; text-decoration: none; isolation: isolate; }
.fr__a::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * clamp(12px, 1.4vw, 22px)); border-radius: 16px; background: var(--surface); opacity: 0; scale: 0.98 0.9; transition: opacity 0.35s, scale 0.5s var(--ease); }
.fr__thumb { display: none; }
.fr__n { font-size: clamp(1.75rem, 1rem + 2.6vw, 3.4rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.045em; transition: translate 0.55s var(--ease); }
.fr__w { color: var(--muted); font-size: 0.9375rem; }
.fr__go { display: grid; place-items: center; width: 60px; height: 44px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line2); overflow: clip; transition: background-color 0.35s, color 0.35s; }
.fr__go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .fr__a:hover::before { opacity: 1; scale: 1; }
  .fr__a:hover .fr__n { translate: 14px 0; }
  .fr__a:hover .fr__go { background: var(--ink); color: var(--ground); }
  .fr__a:hover .fr__go svg { animation: travel 0.6s var(--ease) both; }
}
.fr__a:focus-visible .fr__go { background: var(--ink); color: var(--ground); }
.pv { position: fixed; z-index: 20; left: 0; top: 0; width: clamp(240px, 24vw, 360px); aspect-ratio: 16 / 9; border-radius: 14px; overflow: clip; pointer-events: none; opacity: 0; visibility: hidden; translate: -50% -50%; box-shadow: 0 30px 60px -28px rgb(17 17 17 / 0.55); background: var(--tile); }
.pv img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* about */
.ab__g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: center; }
.ab__t { grid-column: 1 / span 6; }
.ab__t > p { color: var(--muted); font-size: 1.0625rem; max-width: 36rem; }
.ab__t > p:first-of-type { color: var(--ink); font-size: var(--t-l); line-height: 1.42; }
.ab__f { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 36px 0 0; max-width: 40rem; }
.ab__f div { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-top: 1px solid var(--line2); padding-top: 14px; }
.ab__f dt { color: var(--muted); font-size: 0.875rem; line-height: 1.3; }
.ab__f dd { margin: 0 0 4px; font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.ab__ph { grid-column: 8 / span 5; position: relative; margin: 0; height: clamp(440px, 42vw, 620px); }
.ab__p { position: absolute; top: 47%; left: 50%; width: 44%; border-radius: 24px; overflow: clip; box-shadow: 0 0 0 1px rgb(17 17 17 / 0.12), 0 34px 60px -30px rgb(17 17 17 / 0.5); background: var(--tile); transition: translate 0.8s var(--ease), rotate 0.8s var(--ease); }
.ab__p img { width: 100%; }
.ab__p--0 { translate: -112% -48%; rotate: -7deg; }
.ab__p--1 { translate: -50% -54%; z-index: 2; }
.ab__p--2 { translate: 12% -48%; rotate: 7deg; }
@media (hover: hover) {
  .ab__ph:hover .ab__p--0 { translate: -122% -50%; rotate: -10deg; }
  .ab__ph:hover .ab__p--2 { translate: 22% -50%; rotate: 10deg; }
}
.ab__ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 0.875rem; color: var(--muted); }

/* faq */
.fq__g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: start; }
.fq__side { grid-column: 1 / span 4; position: sticky; top: calc(var(--hd) + 28px); }
.fq__side .sh__p { margin-bottom: 26px; }
.fq__l { grid-column: 6 / span 7; }
.fq__i { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; margin-bottom: 10px; overflow: clip; transition: background-color 0.3s; }
.fq__i[open] { background: var(--white); }
.fq__i summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 20px 20px 24px; cursor: pointer; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; border-radius: 18px; }
.fq__i summary::-webkit-details-marker { display: none; }
.fq__x { display: grid; place-items: center; flex: none; width: 42px; height: 34px; border-radius: 9px; background: var(--ground); transition: rotate 0.45s var(--ease), background-color 0.3s; }
.fq__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.fq__i[open] .fq__x { rotate: 45deg; background: var(--accent); }
@media (hover: hover) { .fq__i:not([open]) summary:hover .fq__x { background: var(--ink); color: var(--ground); } }
.fq__a { padding: 0 24px 24px; color: var(--muted); max-width: 42rem; }
.fq__a p { margin: 0; }
.fq__a a { color: var(--ink); }

/* contact */
.ct { padding-block: clamp(72px, 9vw, 136px); }
.ct__g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: start; }
.ct__side { grid-column: 1 / span 5; }
.ct__h { font-size: clamp(2.9rem, 1.3rem + 5vw, 6.2rem); font-weight: 600; line-height: 0.94; letter-spacing: -0.052em; margin: 0 0 22px; margin-left: -0.04em; }
.ct__p { font-size: var(--t-l); line-height: 1.42; color: var(--muted); max-width: 30rem; }
.ct__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 30px; padding: 18px 18px 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; max-width: 30rem; }
.ct__k { width: 100%; margin: 0; color: var(--muted); font-size: 0.8125rem; font-weight: 500; }
.ct__addr { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line2); transition: text-decoration-color 0.3s; }
@media (hover: hover) { .ct__addr:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; } }
.ct__copy { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ground); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.ct__copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
@media (hover: hover) { .ct__copy:hover { background: var(--ink); color: var(--ground); } }
.ct__facts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.ct__facts li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.ct__facts svg { width: 28px; height: 22px; padding: 4px 7px; border-radius: 6px; background: var(--accent); fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ct__card { grid-column: 7 / span 6; background: var(--night); color: var(--on-night); border-radius: 26px; padding: clamp(20px, 2.6vw, 34px); box-shadow: 0 40px 80px -48px rgb(17 17 17 / 0.7); }
.cf { display: grid; gap: 20px; }
.cf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf__f { display: grid; gap: 8px; }
.cf__f > span, .cf__set legend { font-size: 0.875rem; font-weight: 500; color: var(--night-muted); }
.cf__f i { font-style: normal; font-weight: 400; }
.cf input:not([type="radio"]):not([type="checkbox"]), .cf textarea { width: 100%; min-height: 52px; padding: 14px 16px; border-radius: 12px; border: 1px solid #2e2e2e; background: var(--night2); color: var(--on-night); font-size: 1rem; line-height: 1.4; transition: border-color 0.3s, background-color 0.3s; }
.cf textarea { resize: vertical; min-height: 116px; }
.cf input::placeholder, .cf textarea::placeholder { color: #7c7c78; }
@media (hover: hover) { .cf input:not([type]):hover, .cf input[type="email"]:hover, .cf textarea:hover { border-color: #4a4a4a; } }
.cf input:focus-visible, .cf textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.cf [aria-invalid="true"] { border-color: var(--accent) !important; }
.cf__set { border: 0; padding: 0; margin: 0; min-width: 0; }
.cf__set legend { padding: 0; margin-bottom: 10px; }
.cf__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cf__chip { position: relative; }
.cf__chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cf__chip span { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid #333; font-size: 0.9375rem; font-weight: 500; transition: background-color 0.3s, color 0.3s, border-color 0.3s, scale 0.25s var(--ease-soft); }
@media (hover: hover) { .cf__chip:hover span { border-color: #6a6a6a; } }
.cf__chip input:checked + span { background: var(--on-night); color: var(--night); border-color: var(--on-night); }
.cf__chip input:active + span { scale: 0.96; }
.cf__chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf__go { margin-top: 6px; }
.cf__msg { margin: 12px 2px 0; min-height: 1.4em; font-size: 0.9375rem; color: var(--night-muted); }
.cf__msg.is-ok { color: var(--on-night); }

/* ----------------------------------------------------------- footer --- */
.ft { background: var(--night); color: var(--on-night); border-radius: 28px 28px 0 0; padding-top: clamp(64px, 8vw, 112px); overflow: clip; }
.ft__top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid #2a2a2a; }
.ft__big { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 4.4rem); font-weight: 600; line-height: 0.98; letter-spacing: -0.048em; margin: 0; max-width: 13ch; }
.ft__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding-block: clamp(40px, 5vw, 64px); }
.ft__k { color: var(--night-muted); font-size: 0.8125rem; font-weight: 500; margin: 0 0 14px; }
.ft__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ft__col--work ul { grid-template-columns: 1fr 1fr; column-gap: 24px; max-width: 28rem; }
.ft__col a, .ft__col li { font-size: 1rem; line-height: 1.5; text-decoration: none; }
.ft__col a { display: inline-block; padding: 3px 0; transition: color 0.25s; }
@media (hover: hover) { .ft__col a:hover { color: var(--accent); } }
.ft__logo { display: block; color: var(--on-night); padding-top: 8px; transition: color 0.4s; }
.ft__logo svg { width: 100%; height: auto; }

.ft__base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px; padding: 26px 0 calc(26px + env(safe-area-inset-bottom)); color: var(--night-muted); font-size: 0.875rem; }
.ft__base p { margin: 0; }
.ft__top-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; text-decoration: none; color: var(--on-night); transition: color 0.25s; }
.ft__top-link svg { width: 16px; height: 16px; rotate: -90deg; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .ft__top-link:hover { color: var(--accent); } }

/* ============================================================= CASE === */
.cs-h { padding-top: calc(var(--hd) + clamp(24px, 4vw, 56px)); }
.back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(24px, 3vw, 40px); padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 0.9063rem; font-weight: 500; text-decoration: none; transition: background-color 0.3s, color 0.3s; }
.back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.4s var(--ease); }
svg.flip { rotate: 180deg; }
@media (hover: hover) { .back:hover { background: var(--ink); color: var(--ground); } .back:hover svg { translate: -4px 0; } }
.cs-h__g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: end; }
.cs-h__g > div:first-child { grid-column: 1 / span 7; }
.cs-h__r { grid-column: 8 / span 5; }
.cs-h__k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 18px; color: var(--muted); font-size: 0.9375rem; }
.cs-h__n { font-size: clamp(3.2rem, 1rem + 8.4vw, 9.4rem); font-weight: 600; line-height: 0.88; letter-spacing: -0.058em; margin: 0 0 0 -0.05em; overflow-wrap: anywhere; }
.js .cs-h__n { animation: lay 1.1s var(--ease) both; animation-delay: calc(var(--d0) + 0.05s); }
.cs-h__l { font-size: var(--t-l); line-height: 1.38; margin: 0 0 22px; text-wrap: pretty; }
.cs-h__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.js .cs-h__r, .js .cs-h__k { animation: lay 1s var(--ease) both; animation-delay: calc(var(--d0) + 0.2s); }
.film { position: relative; margin-top: clamp(32px, 4.5vw, 64px); aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: clip; background: var(--tile); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgb(17 17 17 / 0.6); }
.js .film { animation: lay 1.2s var(--ease) both; animation-delay: calc(var(--d0) + 0.3s); }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film__p { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 56px; height: 44px; border: 0; border-radius: 11px; background: rgb(17 17 17 / 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: background-color 0.3s, scale 0.25s; }
.film__p:active { scale: 0.94; }
@media (hover: hover) { .film__p:hover { background: var(--accent); color: var(--ink); scale: 1.08; } }
.film__pi { position: relative; width: 14px; height: 14px; }
.film__pi::before, .film__pi::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; border-radius: 1px; background: currentColor; }
.film__pi::before { left: 1px; }
.film__pi::after { right: 1px; }
.film.is-paused .film__pi::before { left: 2px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.film.is-paused .film__pi::after { display: none; }
.film__cap { margin: 12px 0 0; font-size: 0.875rem; color: var(--muted); }
.film__cap a { color: var(--ink); text-underline-offset: 3px; }

.cs-o, .cs-a, .cs-g, .cs-p, .cs-f, .cta, .nx, .cs-b { padding-block: clamp(36px, 4.5vw, 72px); }
.cs-o { padding-top: clamp(64px, 8vw, 120px); }
.cs-o__g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); }
.cs-o__g > div:first-child { grid-column: 1 / span 3; }
.cs-o__t { grid-column: 4 / span 6; }
.cs-o__intro { font-size: var(--t-l); line-height: 1.42; }
.cs-o__t p:not(.cs-o__intro) { color: var(--muted); }
.cs-o__m { grid-column: 10 / span 3; margin: 0; }
.cs-o__m div { border-top: 1px solid var(--line2); padding: 12px 0 16px; }
.cs-o__m dt { color: var(--muted); font-size: 0.8125rem; font-weight: 500; }
.cs-o__m dd { margin: 2px 0 0; font-weight: 500; line-height: 1.4; }
.cs-a__l { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cs-a__l li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px 24px 26px; }
.cs-a__n { display: block; color: var(--muted); font-weight: 600; font-size: 1.125rem; font-variant-numeric: tabular-nums; margin-bottom: 26px; }
.cs-a__l h3 { font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; margin: 0 0 10px; }
.cs-a__l p { color: var(--muted); font-size: 0.9688rem; margin: 0; }

.cs-c { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: center; margin-block: clamp(40px, 5.5vw, 88px); }
.cs-c__m { grid-column: 1 / span 7; margin: 0; }
.cs-c__m img { width: 100%; border-radius: 18px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -44px rgb(17 17 17 / 0.6); }
.cs-c__m figcaption { margin-top: 10px; font-size: 0.8438rem; color: var(--muted); }
.cs-c__m figcaption a { color: var(--ink); text-underline-offset: 3px; }
.cs-c__t { grid-column: 9 / span 4; }
.cs-c__t p:not(.cs-c__k) { color: var(--muted); }
.cs-c__k { color: var(--muted); font-size: 0.8438rem; font-weight: 500; margin: 0 0 12px; }
.cs-c--r .cs-c__m { grid-column: 6 / span 7; grid-row: 1; }
.cs-c--r .cs-c__t { grid-column: 1 / span 4; grid-row: 1; }

.cs-b__in { background: var(--b-bg); color: var(--b-ink); border-radius: 26px; padding: clamp(24px, 4vw, 56px); box-shadow: 0 0 0 1px var(--line); }
.cs-b__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; }
.cs-b__head .h3 { margin: 0; }
.cs-b__head p { margin: 0; color: var(--b-muted); font-size: 0.9375rem; }
.cs-b__spec { font-family: var(--b-disp); font-weight: var(--b-w); letter-spacing: var(--b-tr); font-size: clamp(3.2rem, 1.4rem + 8vw, 10rem); line-height: 0.95; margin: clamp(28px, 4vw, 56px) 0 10px; overflow-wrap: anywhere; }
.cs-b__fam { font-family: var(--b-body); color: var(--b-muted); margin: 0 0 clamp(24px, 3vw, 40px); }
.cs-b__sw { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 10px; }
.cs-b__sw li { aspect-ratio: 5 / 4; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; font-size: 0.875rem; font-weight: 500; box-shadow: inset 0 0 0 1px rgb(128 128 128 / 0.22); font-family: "General Sans", sans-serif; }
.cs-b__sw li span + span { opacity: 0.8; font-variant-numeric: tabular-nums; }

.cs-g__l { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.cs-g__l img { width: 100%; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
.cs-p__g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: center; }
.cs-p__g > div { grid-column: 1 / span 4; }
.cs-p__g > div p { color: var(--muted); }
.cs-p__l { grid-column: 5 / span 8; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 24px); }
.cs-p__l li:nth-child(2) { translate: 0 -28px; }
.cs-p__l li.in:nth-child(2) { translate: 0 -28px; }
.cs-p__l img { width: 100%; border-radius: 22px; box-shadow: 0 0 0 1px rgb(17 17 17 / 0.12), 0 30px 60px -36px rgb(17 17 17 / 0.5); }
.cs-f__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); margin: 0; }
.cs-f__l div { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-top: 1px solid var(--line2); padding-top: 16px; }
.cs-f__l dt { color: var(--muted); max-width: 22rem; }
.cs-f__l dd { margin: 0 0 6px; font-size: clamp(2.8rem, 1.6rem + 3.6vw, 5rem); font-weight: 600; letter-spacing: -0.055em; line-height: 1; font-variant-numeric: tabular-nums; }
.cta__in { display: grid; justify-items: start; gap: 18px; background: var(--night); color: var(--on-night); border-radius: 26px; padding: clamp(32px, 5vw, 72px); background-image: radial-gradient(120% 140% at 100% 100%, rgb(255 91 46 / 0.16), transparent 55%); }
.cta__h { font-size: var(--t-h2); font-weight: 600; line-height: 1; letter-spacing: -0.045em; margin: 0; max-width: 15ch; text-wrap: balance; }
.cta__in p { margin: 0 0 8px; color: var(--night-muted); max-width: 32rem; }
.nx__a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: center; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; text-decoration: none; transition: background-color 0.35s, box-shadow 0.5s var(--ease); }
.nx__t { grid-column: 1 / span 5; padding: clamp(12px, 2vw, 28px); display: grid; gap: 8px; }
.nx__k, .nx__s { color: var(--muted); font-size: 0.9375rem; }
.nx__n { font-size: clamp(2.4rem, 1.2rem + 4vw, 5.4rem); font-weight: 600; line-height: 0.92; letter-spacing: -0.055em; transition: translate 0.6s var(--ease); }
.nx__m { grid-column: 6 / span 7; border-radius: 16px; overflow: clip; aspect-ratio: 16 / 9; }
.nx__m img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: scale 0.9s var(--ease); }
@media (hover: hover) {
  .nx__a:hover { background: var(--white); box-shadow: 0 30px 60px -40px rgb(17 17 17 / 0.5); }
  .nx__a:hover .nx__n { translate: 12px 0; }
  .nx__a:hover .nx__m img { scale: 1.04; }
}

/* =========================================================== SEARCH === */
.sp-h { padding: calc(var(--hd) + clamp(32px, 5vw, 72px)) 0 clamp(24px, 3vw, 40px); }
.sp-h__g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: center; }
.sp-h__t { grid-column: 1 / span 6; }
.sp-h__k { color: var(--muted); font-size: 0.9375rem; font-weight: 500; margin: 0 0 18px; }
.sp-h__p { font-size: var(--t-l); line-height: 1.42; color: var(--muted); max-width: 34rem; margin: 0 0 30px; text-wrap: pretty; }
.sp-h__m { grid-column: 7 / span 6; margin: 0; }
.sp-h__m img { width: 100%; border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgb(17 17 17 / 0.6); }
.sp-h__m figcaption, .nf figcaption { margin-top: 10px; font-size: 0.8438rem; color: var(--muted); text-align: right; }
.sp-h__m figcaption a { color: var(--ink); text-underline-offset: 3px; }
.sp-h__q { list-style: none; padding: 0; margin: clamp(32px, 4vw, 56px) 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-h__q li { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.9375rem; font-weight: 500; }
.sp-h__q svg { width: 22px; height: 18px; padding: 3px 5px; border-radius: 5px; background: var(--accent); fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sp-s { padding-block: clamp(44px, 5vw, 80px); }
.sp-s__g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: start; }
.sp-s__p { grid-column: 1 / span 7; font-size: var(--t-l); line-height: 1.5; margin: 0; }
.sp-s__f { grid-column: 9 / span 4; margin: 0; }
.sp-s__f div { border-top: 1px solid var(--line2); padding: 12px 0 16px; }
.sp-s__f dt { color: var(--muted); font-size: 0.8125rem; font-weight: 500; }
.sp-s__f dd { margin: 2px 0 0; font-weight: 500; line-height: 1.45; }
.sp-n { padding-top: clamp(24px, 3vw, 48px); }
.wk--rel { padding-top: clamp(44px, 5vw, 80px); }
.wk__g--rel { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.sp-i { margin-top: clamp(40px, 5vw, 64px); }
.sp-i ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line2); font-weight: 500; text-decoration: none; transition: background-color 0.3s, color 0.3s; }
.pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .pill:hover { background: var(--ink); color: var(--ground); } .pill:hover svg { animation: travel 0.6s var(--ease) both; } }

/* privacy */
.pv-h { padding: calc(var(--hd) + clamp(32px, 5vw, 72px)) 0 0; }
.pv-b { padding-block: clamp(24px, 3vw, 48px) clamp(72px, 9vw, 136px); }
.prose { max-width: 46rem; }
.prose h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; margin: 2.2em 0 0.6em; }
.prose p, .prose li { color: var(--muted); line-height: 1.6; }
.prose b { color: var(--ink); font-weight: 500; }
.prose ul { padding-left: 1.2em; display: grid; gap: 0.6em; }
.prose a { color: var(--ink); text-underline-offset: 3px; }

/* 404 */
.nf { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--hd) + 32px) 0 64px; }
.nf__g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: center; }
.nf__g > div:first-child { grid-column: 1 / span 6; }
.mm--empty { grid-column: 8 / span 5; }
.mm--empty .mm__t { box-shadow: none; }
.mm--empty .mm__t--gone { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line2); }
.js .mm--empty .mm__t--gone { animation: fall 1.2s var(--ease-io) calc(var(--d0) + 1.1s) both; }
@keyframes fall { from { background: var(--tile); translate: 0 0; rotate: 0deg; } 60% { background: var(--tile); translate: 0 160%; rotate: 14deg; opacity: 0; } 61% { background: transparent; translate: 0 0; rotate: 0deg; opacity: 0; } to { background: transparent; opacity: 1; } }

/* ======================================================== responsive == */
@media (max-width: 1099px) {
  .hd__nav { gap: 22px; }
  .hero { min-height: 0; }
  .hero__g { row-gap: clamp(36px, 6vw, 56px); }
  .hero__t, .hero__m { grid-column: 1 / -1; }
  .hero__m { max-width: 720px; }
  .hero__cap { text-align: left; }
  .wk__g { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr__l { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .pr__s { margin-bottom: 0; }
  .ab__t, .ab__ph { grid-column: 1 / -1; }
  .ab__ph { height: clamp(380px, 70vw, 560px); max-width: 640px; width: 100%; justify-self: center; }
  .fq__side, .fq__l { grid-column: 1 / -1; position: static; }
  .ct__side, .ct__card { grid-column: 1 / -1; }
  .cs-h__g > div:first-child, .cs-h__r { grid-column: 1 / -1; }
  .cs-o__g > div:first-child { grid-column: 1 / -1; }
  .cs-o__t { grid-column: 1 / span 8; }
  .cs-o__m { grid-column: 9 / span 4; }
  .cs-c__m, .cs-c--r .cs-c__m { grid-column: 1 / -1; grid-row: auto; }
  .cs-c__t, .cs-c--r .cs-c__t { grid-column: 1 / span 9; grid-row: auto; }
  .cs-p__g > div, .cs-p__l { grid-column: 1 / -1; }
  .nx__t, .nx__m { grid-column: 1 / -1; }
  .sp-h__t, .sp-h__m { grid-column: 1 / -1; }
  .sp-h__m { max-width: 760px; }
  .sp-s__p, .sp-s__f { grid-column: 1 / -1; }
  .nf__g > div:first-child, .mm--empty { grid-column: 1 / -1; }
  .mm--empty { max-width: 520px; }
}
@media (max-width: 899px) {
  .hd__nav { display: none; }
  .hd__menu { display: inline-flex; }
}
@media (max-width: 559px) {
  .hd__cta { display: none; }
}
@media (max-width: 699px) {
  :root { --hd: 68px; }
  .hd__logo svg { height: 18px; }
  .hero { padding-top: calc(var(--hd) + 28px); }
  .hero__p { margin-bottom: 24px; }
  .hero__btns .btn { flex: 1 1 auto; }
  .hero__trust { margin-top: 26px; }
  .sh--row { align-items: flex-start; }
  .flt { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .flt__b { flex: 1 0 auto; padding: 0 12px; }
  .wk__g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wc__a { padding: 5px 5px 12px; border-radius: 14px; }
  .wc__m { border-radius: 10px; }
  .wc__b { flex-direction: column; align-items: flex-start; gap: 6px; margin: 10px 5px 4px; }
  .wc__n { font-size: 0.9688rem; }
  .wc__s { margin: 0 5px; font-size: 0.8125rem; }
  .cm__t, .cm__t tbody, .cm__t tr, .cm__t th, .cm__t td { display: block; }
  .cm__t { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .cm__t thead { display: none; }
  .cm__t tbody tr { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: clip; margin-bottom: 10px; }
  .cm__t tbody th { border: 0; padding: 16px 18px 6px; font-size: 1.0625rem; }
  .cm__t tbody td { border: 0; padding: 8px 18px 14px 52px; }
  .cm__t tbody td.cm__b { padding-top: 14px; padding-bottom: 16px; border-top: 1px solid var(--line); }
  .cm__i { left: 18px; top: 8px; }
  .cm__t tbody td.cm__b .cm__i { top: 14px; }
  .cm__t td::before { content: attr(data-l); display: block; font-size: 0.75rem; font-weight: 500; color: var(--muted); margin-bottom: 2px; }
  .pr__l { grid-template-columns: 1fr; gap: 10px; }
  .pr__t { margin-top: 22px; }
  .fr__a { grid-template-columns: 84px minmax(0, 1fr) 40px; gap: 14px; }
  .fr__thumb { display: block; width: 84px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: clip; box-shadow: 0 0 0 1px var(--line); }
  .fr__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .fr__w { grid-column: 2; grid-row: 2; margin-top: -10px; font-size: 0.8438rem; }
  .fr__n { grid-column: 2; font-size: 1.5rem; }
  .fr__thumb { grid-row: 1 / span 2; }
  .fr__go { grid-column: 3; grid-row: 1 / span 2; width: 44px; height: 34px; border-radius: 9px; }
  .ab__f { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .ab__ph { height: 108vw; }
  .ab__p { width: 46%; border-radius: 18px; }
  .ab__p--0 { translate: -104% -48%; }
  .ab__p--2 { translate: 4% -48%; }
  .fq__i summary { font-size: 1.0313rem; padding: 18px 16px 18px 18px; }
  .fq__a { padding: 0 18px 20px; }
  .ct__card { border-radius: 22px; }
  .cf__row { grid-template-columns: 1fr; }
  .ct__mail { padding: 16px; }
  .ct__addr { font-size: 1.125rem; }
  .ft { border-radius: 22px 22px 0 0; }
  .ft__cols { grid-template-columns: 1fr 1fr; }
  .ft__col--work { grid-column: 1 / -1; }
  .cs-h__n { font-size: clamp(2.8rem, 15vw, 4.6rem); }
  .cs-h__btns .btn { flex: 1 1 auto; }
  .film { border-radius: 16px; aspect-ratio: 16 / 10; }
  .cs-o__t, .cs-o__m { grid-column: 1 / -1; }
  .cs-a__l { grid-template-columns: 1fr; gap: 10px; }
  .cs-c { margin-block: 40px; row-gap: 20px; }
  .cs-c__t, .cs-c--r .cs-c__t { grid-column: 1 / -1; }
  .cs-c__m img { border-radius: 12px; }
  .cs-g__l { grid-template-columns: 1fr; }
  .cs-g__l img { border-radius: 12px; }
  .cs-p__l { gap: 8px; }
  .cs-p__l li:nth-child(2), .cs-p__l li.in:nth-child(2) { translate: 0 -16px; }
  .cs-p__l img { border-radius: 14px; }
  .cs-f__l { grid-template-columns: 1fr; gap: 18px; }
  .cta__in { border-radius: 22px; }
  .nx__a { border-radius: 22px; padding: 8px; }
  .sp-h { padding-top: calc(var(--hd) + 32px); }
  .sp-h__q li { height: 36px; font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  html.pt-in .pt i { translate: 0 101%; }
  .js [data-r] { opacity: 1; translate: none; }
  .btn .btn__l::after { visibility: hidden; }
  .btn .btn__l > span { translate: none !important; }
  .nv, .fr__n, .nx__n { translate: none !important; }
  .mm__t:hover { translate: none !important; }
}

/* inline links in captions: underline at rest, thicker under the pointer */
.film__cap a, figcaption a, .hero__trust a, .prose a { text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness 0.2s, text-decoration-color 0.2s; }
@media (hover: hover) { .film__cap a:hover, figcaption a:hover, .prose a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--accent); } }
.film__cap a:focus-visible, figcaption a:focus-visible { text-decoration-thickness: 2px; }
/* the film: a responsive still under the video, so the first paint is an image */
.film > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.film video { position: relative; opacity: 0; transition: opacity 0.5s; }
.film video.is-on { opacity: 1; }
/* swatches: colour block, name and hex set under it in the panel's own ink */
.cs-b__sw li { aspect-ratio: auto; padding: 0; box-shadow: none; display: grid; gap: 4px; }
.cs-b__sw .cs-b__c { aspect-ratio: 5 / 4; border-radius: 14px; box-shadow: inset 0 0 0 1px rgb(128 128 128 / 0.25); margin-bottom: 6px; }
.cs-b__sw li span:not(.cs-b__c) { color: var(--b-ink); }
.cs-b__sw li span + span + span { color: var(--b-muted); opacity: 1; }

/* the M's stroke: drawn behind the tiles in the order the tiles are laid */
.mm { position: relative; }
.mm__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.mm__line path { fill: none; stroke: var(--ink); stroke-width: 4px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.85; }
.js .mm__line path { animation: draw 1.15s var(--ease-io) calc(var(--d0) + 0.1s) backwards; }
@keyframes draw { from { stroke-dashoffset: 1; } }
.mm--empty .mm__line path { stroke: var(--line2); opacity: 1; }
/* bigger hit areas for inline links, without moving the text */
.hero__trust a, .film__cap a, figcaption a { padding-block: 4px; }

/* the closing M: every tile laid, the middle one waiting for you */
.mm--mini { width: clamp(132px, 12vw, 172px); gap: 4px; margin-bottom: clamp(22px, 2.4vw, 32px); }
.mm--mini .mm__t { border-radius: 3px; box-shadow: none; animation: none; }
.mm--mini .mm__t--you { box-shadow: 0 6px 16px -6px rgb(255 91 46 / 0.8); animation: breathe 3.2s ease-in-out 1s infinite; }
.mm--mini .mm__line path { stroke-width: 1.5px; }
.js .in .mm--mini .mm__t:not(.mm__t--you), .js .ct__side.in .mm--mini .mm__t:not(.mm__t--you) { animation: layTile 0.7s var(--ease) backwards; animation-delay: calc(0.1s + var(--o) * 45ms); }
.js .ct__side.in .mm--mini .mm__line path { animation: draw 1s var(--ease-io) 0.05s backwards; }
.js .ct__side:not(.in) .mm--mini .mm__line path { animation: none; stroke-dashoffset: 1; }

/* process: four tiles, laid one per step */
.pr__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pr__m { display: grid; grid-template-columns: repeat(4, 14px); gap: 3px; margin-bottom: 6px; }
.pr__m i { height: 10px; border-radius: 3px; background: rgb(17 17 17 / 0.12); }
.pr__m i.on { background: var(--ink); }
.pr__m i.on:last-of-type { background: var(--accent); }
.pr__s:last-child .pr__m i { background: rgb(242 242 240 / 0.18); }
.pr__s:last-child .pr__m i.on { background: var(--on-night); }
.pr__s:last-child .pr__m i.on:last-of-type { background: var(--accent); }
.pr__s.in .pr__m i.on:last-of-type { animation: layTile 0.7s var(--ease) 0.35s backwards; }

/* inline links: underline at rest, an orange band rises behind the words */
.hero__trust a, figcaption a, .film__cap a, .prose a, .fq__a a, .ct__addr {
  text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) left 100% / 100% 0 no-repeat, linear-gradient(currentColor, currentColor) left 100% / 100% 1px no-repeat;
  transition: background-size 0.45s var(--ease); padding-block: 4px; color: var(--ink);
}
@media (hover: hover) { .hero__trust a:hover, figcaption a:hover, .film__cap a:hover, .prose a:hover, .fq__a a:hover, .ct__addr:hover { background-size: 100% 100%, 100% 1px; } }
.hero__trust a:focus-visible, figcaption a:focus-visible, .film__cap a:focus-visible, .prose a:focus-visible, .ct__addr:focus-visible { background-size: 100% 100%, 100% 1px; }
.prose a { display: inline; }

/* on dark grounds the accent buttons flood white, so the CTA only gets stronger */
.ft .btn--accent, .cta__in .btn--accent { --c-bg: var(--on-night); --c-fg: var(--ink); box-shadow: none; }
/* footer links: the same rising band as inline links */
.ft__col a { background: linear-gradient(var(--accent), var(--accent)) left 100% / 100% 0 no-repeat; transition: background-size 0.4s var(--ease), color 0.3s; }
@media (hover: hover) { .ft__col a:hover { color: var(--ink); background-size: 100% 100%; } }
.ft__col a:focus-visible { color: var(--ink); background-size: 100% 100%; }
.cs-a__l--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-a__l--1 { grid-template-columns: minmax(0, 40rem); }
/* phones: both hero buttons on one row so the M shows sooner */
@media (max-width: 699px) {
  .hero__btns { flex-wrap: nowrap; gap: 8px; }
  .hero__btns .btn { flex: 0 1 auto; height: 48px; padding-left: 16px; gap: 10px; font-size: 0.9375rem; }
  .hero__btns .btn .btn__c { width: 40px; height: 32px; border-radius: 8px; }
  .hero__btns .btn::before { width: 40px; height: 32px; margin-top: -16px; border-radius: 8px; }
  .hero__h { font-size: clamp(2.4rem, 11.4vw, 3rem); margin-bottom: 16px; }
  .hero__p { font-size: 1.0625rem; margin-bottom: 20px; }
  .hero__trust { margin-top: 20px; }
  .hero__g { row-gap: 28px; }
  .cs-a__l--2, .cs-a__l--1 { grid-template-columns: 1fr; }
}

/* reviews: one featured with its site tile, two beside it */
.rv { padding-block: clamp(48px, 5.5vw, 88px); }
.rv__g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); align-items: stretch; }
.rv__c { position: relative; margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(22px, 2.4vw, 34px); }
.rv__c--big { grid-column: 1 / span 7; background: var(--ink); color: var(--ground); border-color: var(--ink); }
.rv__side { grid-column: 8 / span 5; display: grid; gap: clamp(12px, 1.4vw, 20px); }
.rv__q { display: block; height: 0.5em; font-size: clamp(4rem, 3rem + 3vw, 6.5rem); font-weight: 600; line-height: 0.9; color: var(--accent); }
.rv__t { margin: 0; }
.rv__t p { margin: 0; font-size: 1.125rem; line-height: 1.45; letter-spacing: -0.012em; }
.rv__c--big .rv__t p { font-size: clamp(1.35rem, 1.05rem + 1vw, 2rem); line-height: 1.25; letter-spacing: -0.025em; font-weight: 500; }
.rv__by { display: flex; align-items: center; gap: 14px; }
.rv__site { flex: none; display: block; width: 72px; aspect-ratio: 16 / 9; border-radius: 7px; overflow: clip; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -10px rgb(17 17 17 / 0.5); transition: translate 0.45s var(--ease), box-shadow 0.35s; }
.rv__site img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (hover: hover) { .rv__site:hover { translate: 0 -3px; box-shadow: 0 0 0 2px var(--accent), 0 14px 24px -12px rgb(17 17 17 / 0.5); } }
.rv__c--big .rv__site { width: 112px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12); }
.rv__by > span { display: grid; gap: 2px; }
.rv__n { font-weight: 600; letter-spacing: -0.015em; }
.rv__r { font-size: 0.875rem; color: var(--muted); }
.rv__c--big .rv__r { color: var(--night-muted); }
.rv__ph { position: absolute; top: 16px; right: 16px; padding: 5px 10px; border-radius: 6px; background: var(--accent); color: var(--ink); font-size: 0.75rem; font-weight: 600; line-height: 1; }
@media (max-width: 899px) {
  .rv__c--big, .rv__side { grid-column: 1 / -1; }
}