/* =====================================================================
   Malik design system
   Anton (display, caps) + Urbanist (body). Light grey page, ink, one
   pink accent (--accent, set on <html> from site.accent).
   ===================================================================== */

:root {
  --bg: #E4E4E4;          /* windswept beach */
  --ink: #1A1A19;         /* eerie black */
  --grey: #A9A9A6;        /* greyed display words */
  --muted: #5C5C59;       /* small secondary text (4.6:1 on --bg) */
  --soft: #C9C9C6;        /* light hairlines */
  --card: #F1F1F0;
  --white: #FFFFFF;
  --black: #000000;
  --accent: #F567D1;
  --yellow: #F2D33B; --green: #5CC23D; --red: #E5403A; --orange: #F08B2C;

  --g: clamp(16px, 2vw, 48px);                 /* side gutter */
  --sec: clamp(96px, 10.5vw, 200px);           /* space between sections */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --display: 'Anton', 'Impact', 'Arial Narrow Bold', sans-serif;
  --sans: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-tag: clamp(12px, .92vw, 16px);
  --fs-small: clamp(12px, .84vw, 14px);
  --fs-body: clamp(14px, 1vw, 16px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.5; font-weight: 500;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
main:focus { outline: none; }
.i { width: 1em; height: 1em; flex: none; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cta :focus-visible, .loader :focus-visible { outline-color: var(--accent); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -80px; z-index: 200; background: var(--ink); color: var(--bg); padding: 10px 14px; font-weight: 600; text-decoration: none; transition: transform .3s var(--ease); }
.skip:focus { top: 8px; }

.only-phone { display: none !important; }
.only-touch { display: none !important; }
@media (max-width: 600px) { .only-phone { display: revert !important; } .hide-phone { display: none !important; } .shead__hint.only-phone { display: flex !important; } }
@media (hover: none) { .only-touch { display: revert !important; } .shead__hint.only-touch { display: flex !important; } }

/* ------------------------------------------------------------------ tags */
.tag {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: var(--fs-tag); font-weight: 400; line-height: 1; letter-spacing: .01em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--bg); background: var(--ink); border: 1px solid var(--ink);
  padding: .26em .42em .2em; cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.tag::after { content: ""; position: absolute; inset: -12px -4px; }  /* bigger tap target */
.tag:hover, .tag[aria-current="page"] { background: transparent; color: var(--ink); }
.tag--pink { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.tag--pink:hover { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.tag--sq { width: 1.62em; height: 1.62em; padding: .12em 0 0; }
.tag--logo[aria-current="page"] { background: var(--ink); color: var(--bg); }
.tag--logo:hover { background: transparent; color: var(--ink); }
.tag--logo { font-size: calc(var(--fs-tag) * 1.06); padding: .24em .5em .18em; }
button.tag { appearance: none; }
.tag[data-placeholder] { cursor: default; }
.tag[data-placeholder]::after { content: none; }
.tag[data-placeholder]:hover { background: var(--ink); color: var(--bg); }

.socials { display: flex; flex-wrap: wrap; gap: 6px; }
.socials--full { gap: 8px; }

/* pills */
.pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: .6rem; }
.pill {
  display: inline-flex; align-items: center; font-family: var(--sans); font-weight: 500; text-transform: none; letter-spacing: 0;
  font-size: clamp(10.5px, .74vw, 12.5px); line-height: 1; white-space: nowrap;
  padding: .34em .78em .38em; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink);
}
.pill--dark { background: var(--ink); color: var(--bg); }

/* links */
.ulink {
  display: inline-block; font-family: var(--display); font-size: clamp(14px, 1.05vw, 18px); line-height: 1.1; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding: 0 0 3px; border: 0; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; cursor: pointer;
}
.ulink:hover { animation: redraw .9s var(--ease); }
.ulink { position: relative; }
.ulink::after { content: ""; position: absolute; inset: -13px -8px; }   /* 44px tap target around a small caps link */
@keyframes redraw { 0% { background-size: 100% 1px; background-position: 100% 100%; } 45% { background-size: 0 1px; background-position: 100% 100%; } 46% { background-position: 0 100%; } 100% { background-size: 100% 1px; background-position: 0 100%; } }
.ulink-draw, .u { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.ulink-draw:hover, a.u:hover { background-size: 100% 1px; }
.u { background-size: 100% 1px; }
a.u:hover { animation: redraw .9s var(--ease); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 48px;
  font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none;
  padding: 1em 2.6em; border: 0; border-radius: 0; cursor: pointer;
  transition: background-color .4s var(--ease), color .4s var(--ease), transform .5s var(--ease);
}
.btn--pink { background: var(--accent); color: var(--ink); }
.btn--pink:hover { background: var(--ink); color: var(--accent); }
.btn .i { width: .85em; height: .85em; transition: transform .5s var(--ease); }
.btn:hover .i-ur { transform: translate(3px, -3px); }
[data-magnetic] { transition: transform .6s var(--ease), background-color .4s var(--ease), color .4s var(--ease); }

/* corner brackets */
.bracket { position: relative; display: inline-block; padding: .7em 1.2em; font-weight: 600; text-transform: uppercase; font-size: var(--fs-small); }
.bracket::before, .bracket::after { content: ""; position: absolute; width: 8px; height: 8px; border: 1px solid var(--ink); }
.bracket::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.bracket::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }

/* section label */
.shead { text-align: center; margin-bottom: clamp(28px, 3.2vw, 56px); }
.shead__label { font-family: var(--sans); font-weight: 700; font-size: clamp(12px, .95vw, 16px); text-transform: uppercase; letter-spacing: .01em; line-height: 1.2; }
.shead__hint { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.shead__hint .i { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ header */
.hdr {
  position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(14px, 1.45vw, 26px) var(--g) 0;
}
.hdr__l, .hdr__r { display: flex; align-items: center; }
.hdr__l { gap: clamp(24px, 8.6vw, 170px); }
.hdr__r { gap: clamp(20px, 6.4vw, 130px); }
.hdr__social { gap: 5px; }
.hdr__nav ul { display: flex; gap: clamp(10px, 1.55vw, 28px); }
.hdr__menu { display: none; }
.clock { display: flex; align-items: baseline; gap: .3em; font-family: var(--display); font-size: var(--fs-tag); line-height: 1; text-transform: uppercase; white-space: nowrap; }
.clock__city, .clock__sep { color: var(--muted); }
.no-js .clock { display: none; }
.clock__t { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 2.6em; }
@media (max-width: 900px) {
  .hdr__social, .hdr__nav { display: none; }
  .hdr__menu { display: inline-flex; }
  .hdr__r { gap: 22px; }
}

/* ------------------------------------------------------------- mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); padding: 0 var(--g) max(20px, env(safe-area-inset-bottom));
  clip-path: inset(100% 0 0 0); transition: clip-path .7s var(--ease-io);
}
.menu[hidden] { display: none; }
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: clamp(14px, 1.45vw, 26px); }
.menu__top .clock { margin-left: auto; }
.menu__nav { margin-top: clamp(56px, 11vh, 120px); }
.menu__nav li { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .7s var(--ease); transition-delay: calc(.18s + var(--i) * 50ms); }
.menu.is-open .menu__nav li { opacity: 1; transform: none; }
.menu__row {
  display: grid; grid-template-columns: 1.15em 1fr auto; align-items: center; min-height: 54px;
  padding: .26em 0 .18em; border-bottom: 1px solid var(--soft);
  font-family: var(--display); font-size: clamp(32px, 10.4vw, 48px); line-height: 1; text-transform: uppercase; color: var(--grey); text-decoration: none;
  transition: color .3s var(--ease);
}
.menu__row:hover, .menu__row.is-current { color: var(--ink); }
.menu__row.is-current { border-bottom-color: var(--ink); }
.menu__n { font-size: .34em; align-self: start; margin-top: .2em; }
.menu__row .i { width: .5em; height: .5em; color: var(--ink); }
.menu__row--pink { margin-top: 22px; grid-template-columns: .95em 1fr auto; padding-left: .2em; padding-right: .3em; background: var(--accent); color: var(--ink); border-bottom: 0; }
.menu__foot { margin-top: auto; padding-top: 48px; text-align: center; font-size: 15px; }
.menu__time { font-size: 16px; }
.menu__hours { color: var(--muted); margin-top: 2px; }
.menu__write { margin: 28px 0 10px; font-size: 14px; }
.menu__social { justify-content: center; }
.brk { white-space: nowrap; }

/* ------------------------------------------------------------------ loader */
.loader { display: none; }
html.intro .loader { display: block; position: fixed; inset: 0; z-index: 150; cursor: pointer; }
.loader__layer { position: absolute; inset: 0; overflow: hidden; }
.loader__layer--dark { background: var(--black); color: var(--bg); }
.loader__layer--light { background: var(--bg); color: var(--ink); clip-path: inset(100% 0 0 0); }
.loader__word {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--display); font-size: min(24vw, 36vh); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap;
}
.loader__word .ll { display: none; }
.loader__word .ll.on { display: inline; }
html.intro-full .hdr { opacity: 0; }
html.intro-short .hdr, html.intro-short main, html.intro-short .ftr { opacity: 0; }
html.enter .hdr, html.enter main { animation: enter 1s var(--ease) both; }
html.enter main { animation-delay: .06s; }
@keyframes enter { from { opacity: 0; transform: translateY(26px); } }

/* -------------------------------------------------------------------- hero */
.hero { position: relative; z-index: 0; container-type: inline-size; padding: clamp(26px, 4vw, 80px) var(--g) 0; }
.hero__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; line-height: 1; white-space: nowrap;
  font-size: calc((100vw - 2 * var(--g)) / 2.1725);
  font-size: calc(100cqw / 2.1725);
  height: .7689em;                  /* the rule cuts the letters 18% above the baseline */
}
.hero__word { display: inline-block; margin-left: -.0205em; will-change: transform; }

/* ------------------------------------------------------------ work grid */
.home-work { position: relative; z-index: 1; background: var(--bg); border-top: 1px solid var(--ink); padding: clamp(16px, 1.55vw, 28px) var(--g) 0; }
.wgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 2.6vw, 48px) clamp(10px, 1.25vw, 22px); }
.tile__link { display: block; text-decoration: none; color: inherit; }
.tile__media { position: relative; aspect-ratio: 1; overflow: hidden; background: #D5D5D2; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 50% 30%; transition: transform 1.4s var(--ease); }
.tile__link:hover .tile__media img, .tile__link:focus-visible .tile__media img { transform: scale(1.05); }
.tile__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: .75em; font-family: var(--display); font-size: clamp(14px, 1.12vw, 20px); line-height: 1.1; text-transform: uppercase; }
.tile__name { font: inherit; min-width: 0; }
.tile__name { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.tile__link:hover .tile__name { background-size: 100% 1px; }
.tile__year { flex: none; }
.tile .pills { margin-top: .5rem; }

.more { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: clamp(44px, 5.2vw, 96px); text-align: center; }
.more__note { font-size: 12px; color: var(--muted); max-width: 40ch; }

@media (max-width: 1023px) { .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .wgrid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .tile__media { aspect-ratio: 3 / 2; }
  .tile__cap { font-size: 19px; }
  .tile .pills .pill { font-size: 12px; }
  /* the template's phone home shows three cases, then "view more", then the services list:
     no service tables (their hover image has no phone equivalent), no social row under the form,
     no back-to-top box in the footer */
  .wgrid--home > .tile:nth-child(n+4) { display: none; }
}

/* ---------------------------------------------------------- service blocks */
.sblocks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sec); padding: var(--sec) var(--g) 0; }
.sblock { position: relative; }
.sblock.has-media { min-height: calc((100vw - 2 * var(--g)) * .26 * 1.25 + 4px); }
.sblock__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: clamp(28px, 3.3vw, 62px); }
.sblock__num { display: flex; align-items: flex-start; gap: clamp(8px, 1vw, 18px); }
.sblock__count, .sblock__title { font-family: var(--display); font-size: clamp(48px, 7.1vw, 136px); line-height: .84; letter-spacing: -.01em; text-transform: uppercase; }
.sblock__years { font-family: var(--display); font-size: clamp(11px, .82vw, 15px); line-height: 1; padding-top: .15em; white-space: nowrap; }
.sblock__title { text-align: right; min-width: 0; flex: 0 1 auto; }
.sblock.has-media .sblock__title { max-width: calc(37% - 12px); }
.sblock__fit { display: block; white-space: nowrap; }
.sblock__title a { text-decoration: none; }
.sblock__title a:hover { color: #000; }

.rows { border-top: 1px solid var(--ink); }
.row { border-bottom: 1px solid var(--ink); }
.row__link {
  display: grid; grid-template-columns: 7.4% minmax(0, 1fr) 28% minmax(0, .8fr) 9%; align-items: center;
  min-height: clamp(44px, 4.25vw, 76px); color: inherit; text-decoration: none;
  font-family: var(--display); font-size: clamp(18px, 1.95vw, 36px); line-height: 1; text-transform: uppercase;
  transition: background-color .45s var(--ease);
}
.row.is-active .row__link { background: var(--white); }
.row__arrow { display: flex; padding-left: clamp(6px, .7vw, 14px); opacity: 0; transform: translateX(-8px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.row__arrow .i { width: .7em; height: .56em; }
.row.is-active .row__arrow { opacity: 1; transform: none; }
.row__name { display: flex; align-items: center; gap: .55em; min-width: 0; padding-top: .06em; }
.row__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__pill { flex: none; font-size: clamp(10px, .7vw, 12px); }
.row__area { grid-column: 4; text-align: center; padding-top: .06em; }
.row__year { grid-column: 5; text-align: right; padding-right: clamp(4px, .5vw, 10px); padding-top: .06em; font-variant-numeric: tabular-nums; }

.sblock__media {
  position: absolute; z-index: 2; left: 50%; top: 0; width: 26%; aspect-ratio: 4 / 5; transform: translateX(-50%);
  border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; background: #D5D5D2; pointer-events: none;
}
.sblock__media img, .sblock__blank { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transform: scale(1.07); transition: opacity .55s var(--ease), transform 1.2s var(--ease); }
.sblock__media .is-active { opacity: 1; transform: none; }
.sblock--plain.has-media { min-height: 0; }
.sblock--plain .sblock__media { top: auto; bottom: 0; }

@media (max-width: 900px) {
  .sblock.has-media { min-height: 0; }
  .sblock.has-media .sblock__title { max-width: none; }
  .sblock__media { display: none; }
  .row__link { grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; min-height: 52px; font-size: clamp(18px, 3.2vw, 24px); }
  .row__arrow { display: none; }
  .row__area { grid-column: 2; text-align: right; font-size: .78em; color: var(--muted); }
  .row__year { grid-column: 3; }
  .row.is-active .row__link { background: transparent; }
  .row__link:active { background: var(--white); }
}
@media (max-width: 600px) {
  .sblocks { display: none; }   /* see the phone note in the work grid section */
  .sblock__head { align-items: flex-end; }
  .sblock__count { font-size: 58px; }
  .sblock__title { font-size: clamp(32px, 10.5vw, 48px); line-height: .9; }
  .row__area { display: none; }
  .row__link { grid-template-columns: minmax(0, 1fr) auto; font-size: 19px; }
  .row__year { grid-column: 2; }
}

/* ------------------------------------------------------- services word list */
.services { padding: var(--sec) var(--g) 0; }
.words { display: flex; flex-wrap: wrap; justify-content: center; column-gap: clamp(14px, 1.7vw, 32px); max-width: 1640px; margin: 0 auto; text-align: center; }
.words__w {
  display: inline-flex; align-items: flex-start; font-family: var(--display); font-size: clamp(40px, 7.15vw, 140px); line-height: 1.02; letter-spacing: -.01em;
  text-transform: uppercase; text-decoration: none; color: var(--grey);
  transition: color .5s var(--ease);
}
.words__w.is-first { color: var(--ink); }
.words:hover .words__w.is-first:not(:hover) { color: var(--grey); }
.words .words__w:hover, .words .words__w:focus-visible { color: var(--ink); }
.words__n { font-size: max(10px, .13em); line-height: 1; letter-spacing: .02em; margin: .2em 0 0 .25em; vertical-align: baseline; }
.services__note { max-width: 50ch; margin: clamp(40px, 4.6vw, 88px) auto 0; text-align: center; font-size: var(--fs-small); line-height: 1.5; }

.nlist__row {
  display: grid; grid-template-columns: 1.3em 1fr auto; align-items: center; min-height: 50px;
  padding: .32em 0 .24em; border-bottom: 1px solid var(--soft);
  font-family: var(--display); font-size: clamp(24px, 7vw, 34px); line-height: 1; text-transform: uppercase; color: var(--grey); text-decoration: none;
  transition: color .3s var(--ease);
}
.nlist__row:hover, .nlist__row.is-current { color: var(--ink); }
.nlist__row.is-current { border-bottom-color: var(--ink); }
.nlist__n { font-size: .36em; align-self: start; margin-top: .25em; }
.nlist__a .i { width: .5em; height: .5em; }

/* ------------------------------------------------------------ why / stickers */
.whysec { padding: var(--sec) var(--g) 0; }
.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, .9vw, 16px); }
.why__card { display: flex; flex-direction: column; background: var(--card); padding: clamp(18px, 1.8vw, 32px) clamp(18px, 1.8vw, 32px) clamp(30px, 3.2vw, 56px); }
.why__card .sticker { width: 62%; margin-bottom: clamp(26px, 3.4vw, 60px); }
.why__title { font-family: var(--display); font-size: clamp(22px, 1.9vw, 34px); line-height: 1; text-transform: uppercase; margin-bottom: .55em; }
.why__body { font-size: var(--fs-small); line-height: 1.45; max-width: 32ch; }
@media (max-width: 1023px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .why { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--g)); padding: 0 var(--g) 6px; scroll-padding: 0 var(--g); scrollbar-width: none; }
  .why::-webkit-scrollbar { display: none; }
  .why__card { flex: 0 0 76%; scroll-snap-align: start; }
}

.sticker { display: block; width: var(--size, 100%); aspect-ratio: 1; }
.sticker svg { width: 100%; height: 100%; overflow: visible; }
.sticker__disc { fill: var(--c, var(--yellow)); }
.sticker--yellow { --c: var(--yellow); } .sticker--green { --c: var(--green); } .sticker--red { --c: var(--red); }
.sticker--orange { --c: var(--orange); } .sticker--pink { --c: var(--accent); } .sticker--ink { --c: var(--ink); }
.sticker__ringtext { font-family: var(--sans); font-weight: 700; font-size: 14.5px; letter-spacing: .12em; text-transform: uppercase; fill: var(--ink); }
.sticker--ink .sticker__ringtext, .sticker--ink .sticker__glyph { fill: var(--bg); }
.sticker__glyph { font-family: var(--display); fill: var(--ink); letter-spacing: -.01em; }
.sticker__ring { transform-origin: 100px 100px; }
.sticker--spin .sticker__ring { animation: spin 26s linear infinite; }
.sticker__crease { fill: none; stroke: #fff; stroke-opacity: .28; stroke-width: 1.2; stroke-linecap: round; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ contact form */
.contact { padding: var(--sec) var(--g) 0; scroll-margin-top: 20px; }
.contact__title { font-family: var(--display); font-size: clamp(56px, 7.6vw, 150px); line-height: .9; text-transform: uppercase; text-align: center; }
.contact__note { margin: 1.1em 0 clamp(30px, 3.4vw, 64px); text-align: center; font-size: 12.5px; color: var(--muted); }
.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 21%); gap: clamp(28px, 6vw, 130px); max-width: 1320px; margin: 0 auto; padding: 0 clamp(0px, 3vw, 60px); }
.field { display: grid; grid-template-columns: minmax(150px, 31%) minmax(0, 1fr); align-items: start; gap: 20px; padding: clamp(8px, .75vw, 14px) 0; }
.field__label { font-family: var(--display); font-size: clamp(22px, 2.1vw, 38px); line-height: 1; text-transform: uppercase; padding-top: max(0px, calc(44px - 1.06em)); }
.req { color: var(--accent); margin-left: .06em; }
.field__control { position: relative; }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: 44px; margin: 0; padding: .7em .8em .55em;
  font: 500 clamp(14px, .92vw, 15px) / 1.35 var(--sans); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; outline: 0; appearance: none; -webkit-appearance: none;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea { resize: none; overflow: hidden; min-height: 44px; }
.field select { padding-right: 2.4em; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%231A1A19'/%3E%3C/svg%3E") right .8em center / 8px 5px no-repeat; }
.field select:invalid { color: #6A6A67; }
.field option { color: var(--ink); }
.field ::placeholder { color: #6A6A67; opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-bottom-color: var(--ink); box-shadow: 0 2px 0 var(--accent); }
.field [aria-invalid="true"] { border-bottom-color: #B3261E; }
.field__err { margin: 6px 0 0 .8em; font-size: 12.5px; color: #A8231C; }
.form__side { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 32px; padding: 10px 0; text-align: center; }
.form__social p { font-size: 12.5px; margin-bottom: 10px; }
.form__social .socials { justify-content: center; gap: 12px; }
.form__submit { min-width: 168px; }
.form__status { grid-column: 1 / -1; font-size: 13px; color: #A8231C; text-align: center; min-height: 1px; }
.form-done { max-width: 620px; margin: 0 auto; text-align: center; }
.form-done:focus { outline: none; }
.form-done__title { font-family: var(--display); font-size: clamp(40px, 5vw, 80px); line-height: 1; text-transform: uppercase; color: var(--ink); }
.form-done__title::after { content: ""; display: block; width: 64px; height: 6px; margin: 18px auto 0; background: var(--accent); }
.form-done__text { margin-top: 20px; }
.form-done__addr { margin-top: 18px; font-weight: 600; }
.form-done__again { margin-top: 30px; background-color: transparent; }
@media (max-width: 1023px) {
  .form { grid-template-columns: 1fr; padding: 0; max-width: 720px; }
  .form__side { flex-direction: column-reverse; }
}
@media (max-width: 600px) {
  .field { grid-template-columns: 1fr; gap: 8px; padding: 12px 0; }
  .field__label { padding-top: 0; }
  .field input, .field select, .field textarea { padding-left: .6em; }
  .form__submit { width: 100%; max-width: 260px; }
  .form__social { display: none; }   /* the footer carries the socials on phones, as in the template */
}

/* ------------------------------------------------------------ closing CTA */
.cta { margin-top: var(--sec); padding: clamp(110px, 13vw, 250px) var(--g); background: var(--ink); color: var(--bg); text-align: center; }
.cta__label { font-family: var(--sans); font-weight: 500; font-size: clamp(13px, 1.05vw, 17px); letter-spacing: .26em; color: var(--accent); margin-bottom: clamp(28px, 3.4vw, 60px); }
.cta__title { text-wrap: balance; font-family: var(--display); font-size: clamp(42px, 5.5vw, 108px); line-height: 1.04; text-transform: uppercase; max-width: 13.5em; margin: 0 auto; }
.cta__line { max-width: 48ch; margin: clamp(22px, 2.6vw, 44px) auto 0; font-size: var(--fs-body); color: #D9D9D6; }
.cta__btn { margin-top: clamp(30px, 3.4vw, 56px); }
.cta__btn:hover { background: var(--bg); color: var(--ink); }

/* ------------------------------------------------------------------ footer */
.ftr { padding-top: clamp(72px, 8vw, 150px); }
.cta + .ftr, main:has(> .cta:last-child) + .ftr { padding-top: clamp(64px, 6.4vw, 120px); }
.ftr__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 var(--g) clamp(6px, .7vw, 14px); border-bottom: 1px solid var(--ink); }
.ftr__title { font-family: var(--display); font-size: clamp(46px, 7.6vw, 150px); line-height: .84; text-transform: uppercase; }
.ftr__arrow { display: none; }
.ftr__email { font-family: var(--display); font-size: clamp(18px, 2.15vw, 42px); line-height: 1; text-transform: uppercase; text-decoration: none; white-space: nowrap; padding-bottom: .1em; }
.ftr__grid { display: grid; grid-template-columns: 1.15fr 1fr .85fr 1fr auto; gap: 24px; padding: clamp(20px, 1.7vw, 32px) var(--g) 0; align-items: start; }
.ftr__line { max-width: 24ch; font-weight: 700; font-size: clamp(11px, .8vw, 13px); line-height: 1.22; text-transform: uppercase; }
.ftr__addr p, .ftr__time p { font-size: var(--fs-small); line-height: 1.35; }
.ftr__addr p + p { margin-top: 1em; }
.ftr__time p + p { margin-top: .35em; color: var(--muted); }
.ftr__social { flex-direction: column; align-items: flex-start; gap: 7px; }
.ftr__up { position: relative; display: grid; place-items: center; width: clamp(110px, 12.2vw, 190px); aspect-ratio: 1.3; color: var(--ink); text-decoration: none; }
.ftr__up::before, .ftr__up::after { content: ""; position: absolute; left: 0; right: 0; height: 7px; border: 1px solid var(--ink); }
.ftr__up::before { top: 0; border-bottom: 0; }
.ftr__up::after { bottom: 0; border-top: 0; }
.ftr__up .i { width: 14px; height: 48%; transition: transform .6s var(--ease); }
.ftr__up:hover .i { transform: translateY(-8px); }
.ftr__base { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding: clamp(44px, 6vw, 110px) var(--g) clamp(16px, 1.6vw, 28px); font-size: 12.5px; color: var(--muted); }
.ftr__base p:nth-child(2) { text-align: center; }
.ftr__base p:nth-child(3) { text-align: right; }
@media (max-width: 1023px) {
  .ftr__grid { grid-template-columns: 1fr 1fr 1fr; row-gap: 36px; }
  .ftr__up { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
}
@media (max-width: 600px) {
  .ftr__head { flex-wrap: wrap; align-items: center; }
  .ftr__title { font-size: clamp(40px, 12vw, 56px); }
  .ftr__arrow { display: block; margin-left: auto; }
  .ftr__arrow .i { width: 22px; height: 22px; }
  .ftr__head .ftr__email { display: none; }
  .ftr__grid { grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 28px; }
  .ftr__line { grid-column: 2; grid-row: 1; }
  .ftr__time { grid-column: 1; grid-row: 1; }
  .ftr__addr { grid-column: 2; }
  .ftr__social { grid-column: 2; }
  .ftr__up { display: none; }
  .ftr__base { grid-template-columns: 1fr 1fr; }
  .ftr__base p:nth-child(2) { text-align: right; }
  .ftr__made { display: none; }
}

/* --------------------------------------------------------- page title (inner) */
.ptitle { padding: clamp(60px, 9vw, 180px) var(--g) 0; border-bottom: 1px solid var(--ink); }
.ptitle__crop { overflow: hidden; }
.ptitle__h {
  display: block; width: 100%; height: .7689em; overflow: hidden; white-space: nowrap;
  font-family: var(--display); font-size: clamp(64px, 9vw, 180px); line-height: 1; letter-spacing: -.01em; text-transform: uppercase;
}
.ptitle--right .ptitle__h { text-align: right; }
.ptitle__kicker { padding: 14px 0 0; font-family: var(--display); font-size: clamp(16px, 1.3vw, 22px); text-transform: uppercase; }

/* statement (about) */
.statement { font-size: clamp(22px, 2.3vw, 44px); line-height: 1.18; font-weight: 400; text-transform: uppercase; max-width: 30em; }
.statement__rest { color: var(--grey); }

/* ------------------------------------------------------------ reveals */
html.js:not(.static):not(.reduced) [data-reveal]:not([data-reveal="lines"]) { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease) var(--d, 0s), transform 1.2s var(--ease) var(--d, 0s); }
html.js:not(.static):not(.reduced) [data-reveal].in { opacity: 1; transform: none; }
html.js:not(.static):not(.reduced) [data-reveal="lines"]:not(.split) { opacity: 0; }
.seg { display: block; }                       /* a forced line (two-line headlines); wraps on its own */
.cta__title .seg { text-wrap: balance; }
[data-reveal="lines"] .ln { display: block; overflow: hidden; padding: .06em 0 .04em; margin: 0 0 -.1em; }
/* the padding gives descenders room inside the mask; the margins cancel it exactly (sibling margins collapse,
   so only bottom margins between lines) so the split lines sit where the plain text will */
[data-reveal="lines"] .ln:first-child { margin-top: -.06em; }
[data-reveal="lines"] .ln:last-child { margin-bottom: -.04em; }
[data-reveal="lines"] .ln__i { display: block; transform: translateY(108%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0s)); }
[data-reveal="lines"].in .ln__i { transform: none; }

/* static (?static=1) and reduced motion: everything visible, nothing moves */
html.static *, html.static *::before, html.static *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .sticker--spin .sticker__ring { animation: none; }
}

/* =====================================================================
   Inner pages: about, services, service, work, cases, case, 404
   ===================================================================== */
:root { --accent-soft: #F8BCE8; --accent-soft: color-mix(in srgb, var(--accent) 42%, #F6F6F5); --accent-deep: #873973; --accent-deep: color-mix(in srgb, var(--accent) 55%, #000); }

/* small shared pieces */
.lbl { font-family: var(--sans); font-weight: 700; font-size: clamp(11px, .8vw, 13px); line-height: 1.25; letter-spacing: .01em; text-transform: uppercase; margin-bottom: .95em; }
.back { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; font-family: var(--display); font-size: clamp(12px, .85vw, 15px); line-height: 1; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.back span { padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.back .i { width: 1.7em; height: .95em; transition: transform .5s var(--ease); }
.back:hover .i { transform: translateX(-6px); }
.back:hover span { animation: redraw .9s var(--ease); }
.back--big { font-size: clamp(16px, 1.3vw, 22px); }
.btn--sm { min-height: 44px; padding: .8em 2.3em; font-size: 14px; }
.sample { display: inline-flex; align-items: center; gap: .65em; padding: .6em .95em .55em; border: 1px solid var(--ink); background: var(--card); font-size: 13px; font-weight: 600; line-height: 1.3; }
.sample__dot { flex: none; width: 9px; height: 9px; background: var(--accent); }
.sample--lg { font-size: clamp(13px, .95vw, 16px); margin-bottom: clamp(22px, 2.4vw, 40px); }
.tile__line { margin-top: .45em; font-size: var(--fs-small); line-height: 1.38; max-width: 46ch; }

/* page title: a shorter word on phones for long names */
.ptitle__short { display: none; }
@media (max-width: 600px) {
  .ptitle { padding-top: 64px; }
  .ptitle__h { font-size: 27vw; }
  .ptitle__short { display: inline; }
  .ptitle__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* two-column intro under a page title: small count on the left, statement on the right */
.intro2 { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); column-gap: 24px; padding: clamp(28px, 3vw, 56px) var(--g) 0; }
.intro2__k { font-family: var(--display); font-size: clamp(14px, 1.1vw, 20px); line-height: 1; text-transform: uppercase; padding-top: .35em; }
.intro2 .statement { font-size: clamp(20px, 1.95vw, 38px); }
@media (max-width: 900px) { .intro2 { grid-template-columns: 1fr; row-gap: 16px; } }

/* stat cards (about, case results) */
.stats { display: grid; gap: 10px; }
.stat { display: flex; flex-direction: column; min-width: 0; min-height: clamp(150px, 13.6vw, 250px); padding: clamp(12px, 1vw, 18px) clamp(12px, 1.1vw, 20px) clamp(14px, 1.15vw, 22px); background: var(--card); }
.stat__label { max-width: 24ch; font-size: clamp(12px, .9vw, 15px); line-height: 1.25; }
.stat__words { margin-top: auto; padding-top: 18px; font-size: clamp(18px, 1.7vw, 32px); font-weight: 400; line-height: 1.08; text-transform: uppercase; }
.stat__value { margin-top: auto; padding-top: 14px; font-size: clamp(44px, 4.3vw, 82px); font-weight: 400; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.stat__foot { margin-top: .55em; font-size: clamp(12px, .9vw, 15px); font-weight: 600; line-height: 1.3; }
.stat__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 18px; }
.stat__faces { display: flex; flex: none; }
.stat__face { width: clamp(46px, 4.5vw, 86px); aspect-ratio: 1; margin-left: calc(clamp(46px, 4.5vw, 86px) * -.22); border: 2px solid var(--card); border-radius: 50%; overflow: hidden; background: #D5D5D2; }
.stat__face:first-child { margin-left: 0; }
.stat__face img { width: 100%; height: 100%; object-fit: cover; }
.stat__note { max-width: 22ch; font-size: 12px; line-height: 1.3; text-align: right; color: var(--muted); }

/* ------------------------------------------------------------- about */
.about { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); column-gap: 24px; align-content: space-between; min-height: calc(100svh - 64px); padding: clamp(56px, 7.4vw, 140px) var(--g) 0; }
.about__label { max-width: 22ch; padding-top: .55em; font-family: var(--sans); font-weight: 700; font-size: clamp(11px, .8vw, 13px); line-height: 1.25; text-transform: uppercase; }
.about__statement { max-width: none; font-size: clamp(22px, 2.3vw, 46px); line-height: 1.17; }
.about .stats { grid-column: 1 / -1; grid-template-columns: calc(38% + 12px) minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin-top: clamp(56px, 8vw, 150px); }
.stat--place { width: 56%; }
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; min-height: 0; }
  .about__label { margin-bottom: 22px; }
  .about .stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 48px; }
  .stat--place { width: auto; grid-column: 1; grid-row: 1; }
  .stat--num { grid-column: 2; grid-row: 1; }
  .stat--wide { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 600px) {
  .stat { min-height: 132px; }
  .stat__row { flex-direction: column; align-items: flex-start; }
  .stat__note { text-align: left; }
}

/* founder band (team look): photo or placeholder, pink vertical band with the name */
.founder { position: relative; margin-top: var(--sec); }
.founder__photo { position: relative; height: clamp(560px, 62vw, 1100px); overflow: hidden; background: #BDBDBA; container-type: size; }
.founder__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.founder__ph { position: absolute; inset: 0; background: radial-gradient(110% 85% at 70% 22%, #F5F5F4 0%, #DCDCDA 32%, #BDBDBA 66%, #9E9E9B 100%); }
.founder__ph-grain { position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.founder__soon { position: absolute; right: var(--g); bottom: clamp(18px, 2vw, 40px); }
.founder__band { position: absolute; top: 0; bottom: 0; left: 27cqw; width: 15.5cqh; background: var(--accent-soft); container-type: size; }
.founder__name {
  position: absolute; left: 50%; top: 39cqh; width: 68cqh; transform: translate(-50%, -50%) rotate(-90deg);
  font-family: var(--display); font-size: min(92cqw, calc(68cqh / (var(--len, 6) * .5))); line-height: .78; letter-spacing: -.005em; text-transform: uppercase; white-space: nowrap; text-align: right;
}
.founder__role { position: absolute; left: 13%; right: 8%; bottom: 6cqh; font-family: var(--display); font-size: clamp(12px, 9cqw, 21px); line-height: 1.1; text-transform: uppercase; }
.founder__role p + p { margin-top: 1.1em; }
.founder__hl { color: var(--accent-deep); }
.founder__line { max-width: 25em; font-size: clamp(16px, 1.45vw, 27px); font-weight: 400; line-height: 1.2; text-transform: uppercase; }
.founder--ph .founder__line { position: absolute; z-index: 1; top: clamp(36px, 5vw, 96px); right: var(--g); width: 40%; }
.founder:not(.founder--ph) .founder__line { padding: 24px var(--g) 0; }
@media (max-width: 900px) {
  .founder__photo { height: auto; aspect-ratio: 5 / 4; }
  .founder__band { left: 9cqw; width: 18cqw; }
  .founder--ph .founder__line { position: static; width: auto; padding: 22px var(--g) 0; font-size: clamp(16px, 4.6vw, 22px); }
  .founder__soon { font-size: 11px; }
}
/* phones: a taller portrait so the vertical name and the role lines never meet (after the 900px block so it wins) */
@media (max-width: 600px) {
  .founder__photo { aspect-ratio: 4 / 5; }
  .founder__band { left: 7cqw; width: 22cqw; }
}

/* what we do / what we do not do */
.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(32px, 6vw, 120px); padding: var(--sec) var(--g) 0; }
.dodont__h { margin-bottom: 16px; }
.dodont .nlist { border-top: 1px solid var(--ink); }
.dodont .nlist__row { font-size: clamp(26px, 2.75vw, 52px); min-height: clamp(50px, 4.4vw, 82px); }
.nlist--ink .nlist__row { color: var(--ink); border-bottom-color: var(--ink); }
.nlist__a .i { transition: transform .5s var(--ease); }
.nlist__row:hover .nlist__a .i { transform: translate(3px, -3px); }
.nlist--not .nlist__row { color: var(--grey); cursor: default; }
.nlist--not .nlist__row:hover { color: var(--grey); }
.nlist--not .nlist__t { position: relative; justify-self: start; }
.nlist--not .nlist__t::after { content: ""; position: absolute; left: -.04em; right: -.04em; top: calc(51% - .03em); height: max(2px, .06em); background: var(--ink); }
.nlist__x { width: .42em; height: .42em; color: var(--ink); background: linear-gradient(45deg, transparent 45%, currentColor 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, currentColor 45% 55%, transparent 55%); }
.dodont__note { max-width: 46ch; margin-top: 22px; font-size: var(--fs-small); line-height: 1.5; }
@media (max-width: 900px) { .dodont { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- services index */
.svlist-sec { padding: clamp(56px, 6.4vw, 120px) var(--g) 0; }
.svlist-hint { margin-bottom: 14px; }
.svlist { border-top: 1px solid var(--ink); }
.svlist__row {
  display: grid; grid-template-columns: 6.5% minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .62fr) 3em; align-items: center;
  min-height: clamp(76px, 7.6vw, 146px); padding: 12px 0; border-bottom: 1px solid var(--ink); color: var(--grey); text-decoration: none;
  transition: color .45s var(--ease), background-color .45s var(--ease);
}
.svlist__n { align-self: start; padding-top: .9em; font-family: var(--display); font-size: clamp(11px, .8vw, 14px); color: var(--ink); }
.svlist__name { padding: .08em 24px 0 0; font-family: var(--display); font-size: clamp(34px, 4.5vw, 86px); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; }
.svlist__short { padding-right: 24px; font-size: var(--fs-body); line-height: 1.35; color: var(--ink); }
.svlist__price { font-family: var(--display); font-size: clamp(14px, 1.1vw, 20px); line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.svlist__a { justify-self: end; color: var(--ink); }
.svlist__a .i { width: clamp(16px, 1.45vw, 26px); height: clamp(16px, 1.45vw, 26px); transition: transform .5s var(--ease); }
.svlist__row:hover, .svlist__row:focus-visible, .svlist__row.is-current { color: var(--ink); }
.svlist:hover .svlist__row.is-current:not(:hover) { color: var(--grey); }
.svlist__row:hover .svlist__a .i { transform: translate(4px, -4px); }
.svlist__note { max-width: 52ch; margin: 22px auto 0; text-align: center; font-size: var(--fs-small); color: var(--muted); }
.services--index .words { margin-top: 4px; }
@media (max-width: 900px) {
  .svlist__row { grid-template-columns: 2.6em minmax(0, 1fr) auto; grid-template-areas: "n name a" ". short short" ". price price"; row-gap: 6px; min-height: 0; padding: 14px 0 16px; }
  .svlist__n { grid-area: n; padding-top: .35em; }
  .svlist__name { grid-area: name; padding-right: 12px; font-size: clamp(28px, 7.6vw, 44px); line-height: .98; }
  .svlist__short { grid-area: short; font-size: 14px; }
  .svlist__price { grid-area: price; font-size: 14px; }
  .svlist__a { grid-area: a; }
}

/* ------------------------------------------------------------ one service */
.svc { display: grid; grid-template-columns: minmax(0, 23fr) minmax(0, 31fr) minmax(0, 40fr); column-gap: clamp(24px, 3.6vw, 68px); padding: clamp(14px, 1.2vw, 22px) var(--g) 0; }
.svc__name { font-family: var(--display); font-size: clamp(18px, 4.8vw, 24px); line-height: 1.05; text-transform: uppercase; margin-bottom: -22px; }
.svc__side { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.svc__tag { max-width: 13em; font-family: var(--display); font-size: clamp(16px, 1.35vw, 24px); line-height: 1.05; text-transform: uppercase; }
.svc__main, .svc__inc { padding-top: clamp(4px, .7vw, 12px); }
.svc__about { max-width: 46ch; font-size: clamp(14px, 1vw, 17px); line-height: 1.5; }
.svc__facts { display: grid; gap: 8px; margin: clamp(28px, 3.6vw, 68px) 0 20px; }
.svc__facts div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45em; }
.svc__facts dt { font-weight: 700; font-size: clamp(11px, .8vw, 13px); text-transform: uppercase; }
.svc__facts dd { margin: 0; font-size: clamp(14px, 1vw, 17px); }
.bullets li { position: relative; padding-left: 1.15em; font-size: clamp(14px, 1vw, 17px); line-height: 1.45; }
.bullets li + li { margin-top: .4em; }
.bullets li::before { content: ""; position: absolute; left: .25em; top: .66em; width: 4px; height: 4px; background: var(--ink); }
@media (max-width: 900px) {
  .svc { grid-template-columns: 1fr; row-gap: 34px; min-height: 0; }
  .svc__side { display: contents; }
  .svc__tag { order: 0; font-size: clamp(18px, 4.8vw, 24px); }
  .svc__name + .svc__tag { max-width: none; font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1.4; text-transform: none; }
  .svc__main { order: 1; }
  .svc__inc { order: 2; }
  .svc__back { order: 3; justify-self: start; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .svc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; }
  .svc__tag, .svc__back { grid-column: 1 / -1; }
}
.related { padding: var(--sec) var(--g) 0; }
.related + .related { padding-top: clamp(72px, 7vw, 130px); }
@media (max-width: 600px) {
  .wgrid--swipe { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--g)); padding: 0 var(--g) 6px; scroll-padding: 0 var(--g); scrollbar-width: none; }
  .wgrid--swipe::-webkit-scrollbar { display: none; }
  .wgrid--swipe > .tile { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }
  .wgrid--swipe .tile__media { aspect-ratio: 4 / 3; }
}
@media (min-width: 1024px) {
  .wgrid--center { display: flex; flex-wrap: wrap; justify-content: center; }
  .wgrid--center > .tile { flex: 0 0 calc((100% - 3 * clamp(10px, 1.25vw, 22px)) / 4); }
  .wgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.next { padding: var(--sec) var(--g) 0; }
.next__link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "title arrow" "sub sub"; align-items: end;
  padding: 16px 0 20px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); color: var(--grey); text-decoration: none; transition: color .5s var(--ease);
}
.next__label { grid-area: label; font-family: var(--display); font-size: clamp(12px, .9vw, 15px); text-transform: uppercase; color: var(--ink); }
.next__title { grid-area: title; margin-top: .3em; font-family: var(--display); font-size: clamp(44px, 7.1vw, 136px); line-height: .92; letter-spacing: -.01em; text-transform: uppercase; }
.next__sub { grid-area: sub; margin-top: 12px; font-size: var(--fs-small); color: var(--ink); }
.next__arrow { grid-area: arrow; color: var(--ink); padding-bottom: .4em; }
.next__arrow .i { width: clamp(26px, 3.6vw, 70px); height: clamp(26px, 3.6vw, 70px); transition: transform .6s var(--ease); }
.next__link:hover, .next__link:focus-visible { color: var(--ink); }
.next__link:hover .next__arrow .i { transform: translate(8px, -8px); }
.page-service .contact { padding-top: clamp(96px, 9vw, 170px); }

/* ---------------------------------------------------------------- work / cases */
.work-all, .cases-all { padding: clamp(56px, 6vw, 110px) var(--g) 0; }
.work-all .tile__media { aspect-ratio: 4 / 5; }
.cases-all .tile__media { aspect-ratio: 4 / 3; }
.cases-all .tile__line { font-size: clamp(14px, 1.05vw, 18px); }
@media (min-width: 601px) { .work-all .tile__line { min-height: calc(3 * 1.38em); } }
@media (max-width: 600px) { .work-all .tile__media { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------------ one case study */
.case { --off: 22%; padding: clamp(30px, 3.4vw, 64px) var(--g) 0; }
.case__head, .case__about, .case__done, .case__how, .case__results, .case__built { margin-left: var(--off); }
.case__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; max-width: 54vw; margin-bottom: clamp(34px, 4.4vw, 84px); }
.case__titlerow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 28px; max-width: 54vw; }
.case__client { flex: 1 1 auto; min-width: 0; font-family: var(--display); font-size: clamp(52px, 6.2vw, 120px); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; }
.case__ind { flex: none; padding-bottom: .35em; font-weight: 600; font-size: clamp(11px, .85vw, 14px); text-transform: uppercase; white-space: nowrap; }
.case__title { max-width: 26em; margin-top: clamp(18px, 2vw, 34px); font-size: clamp(19px, 1.75vw, 32px); line-height: 1.16; text-transform: uppercase; }
.case__about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px clamp(28px, 3.4vw, 64px); max-width: 60vw; margin-top: clamp(34px, 3.6vw, 68px); }
.case__block p:not(.lbl) { max-width: 46ch; font-size: clamp(14px, 1vw, 17px); line-height: 1.5; }
.case__facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 44px; padding-top: 14px; border-top: 1px solid var(--soft); }
.case__facts div { display: flex; gap: .5em; align-items: baseline; }
.case__facts dt { font-weight: 700; font-size: 12px; text-transform: uppercase; }
.case__facts dd { margin: 0; font-size: var(--fs-small); }
.case__done { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: clamp(26px, 2.8vw, 52px); }
.case__done .pills { margin-top: 0; }
.strip__nav { display: flex; gap: 8px; }
.strip__nav[hidden] { display: none; }
.strip__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .35s var(--ease), color .35s var(--ease), opacity .3s var(--ease); }
.strip__btn .i { width: 18px; height: 10px; }
.strip__btn:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.strip__btn:disabled { opacity: .3; cursor: default; }
.strip { margin: clamp(18px, 1.8vw, 32px) calc(-1 * var(--g)) 0 0; }
.strip__track { display: flex; gap: clamp(6px, .55vw, 10px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: var(--g); }
.strip__track::-webkit-scrollbar { display: none; }
.strip__track:focus-visible { outline-offset: -2px; }
.strip__item { flex: 0 0 clamp(260px, 37vw, 720px); aspect-ratio: 1.12; overflow: hidden; background: #D5D5D2; scroll-snap-align: start; }
.strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.strip__item:hover img { transform: scale(1.04); }
.case__how { margin-top: clamp(64px, 7vw, 130px); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px clamp(22px, 3vw, 56px); margin-top: 6px; }
.steps__i { padding-top: 12px; border-top: 1px solid var(--ink); }
.steps__n { display: block; margin-bottom: 10px; font-family: var(--display); font-size: clamp(12px, .9vw, 15px); }
.steps__i p { max-width: 36ch; font-size: clamp(14px, 1vw, 17px); line-height: 1.45; }
.case__results { margin-top: clamp(64px, 7vw, 130px); }
.case__reshead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.case__resnote { font-size: 12.5px; color: var(--muted); margin-bottom: .95em; }
.stats--results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case__built { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 36px clamp(28px, 4vw, 80px); margin-top: clamp(56px, 6vw, 110px); }
.case__built .pills { margin-top: 0; }
.caselinks { border-top: 1px solid var(--ink); }
.caselink { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; padding: 6px 4px 6px 0; border-bottom: 1px solid var(--ink); font-family: var(--display); font-size: clamp(18px, 1.6vw, 30px); line-height: 1; text-transform: uppercase; text-decoration: none; transition: background-color .45s var(--ease); }
.caselink__k { padding-left: 8px; font-family: var(--sans); font-weight: 700; font-size: 12px; }
.caselink .i { width: .7em; height: .7em; transition: transform .5s var(--ease); }
.caselink:hover { background: var(--white); }
.caselink:hover .i { transform: translate(3px, -3px); }
@media (max-width: 1023px) {
  .case { --off: 0px; }
  .case__top, .case__titlerow { max-width: none; }
  .case__about { max-width: none; }
}
@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .case__built { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .case__about { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .case__titlerow { flex-direction: column; align-items: flex-start; }
  .case__client { font-size: clamp(44px, 14vw, 72px); }
  .case__ind { align-self: flex-end; }
  .case__top { margin-bottom: 30px; }
  .strip__item { flex-basis: 84vw; }
  .stats--results { grid-template-columns: 1fr; }
  .stats--results .stat { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 0; padding-top: 16px; padding-bottom: 16px; }
  .stats--results .stat__value { margin: 0; padding: 0; font-size: 44px; }
  .stats--results .stat__foot { margin: 0; text-align: right; max-width: 18ch; }
  .caselink { grid-template-columns: 104px minmax(0, 1fr) auto; }
}

/* -------------------------------------------------------------------- 404 */
.nf { display: flex; flex-direction: column; align-items: center; min-height: calc(100svh - 70px); padding: clamp(48px, 7vw, 130px) var(--g) 0; text-align: center; }
.nf__coins { display: flex; align-items: center; justify-content: center; width: clamp(300px, 46vw, 760px); max-width: 100%; padding-top: 4%; }
.nf__coin { position: relative; z-index: var(--i); flex: 0 0 37.5%; margin: 0 -4.2%; }
.nf__coin:nth-child(1) { --r: -12deg; --y: 4%; }
.nf__coin:nth-child(2) { --r: 9deg; --y: -9%; }
.nf__coin:nth-child(3) { --r: -6deg; --y: 6%; }
.nf__spin { display: block; translate: 0 var(--y, 0); transform: rotate(var(--r)); transition: transform .9s var(--ease); }
.nf__coin:hover .nf__spin { transform: rotate(calc(var(--r) + 22deg)) scale(1.04); }
html.js:not(.static):not(.reduced) .nf__coin[data-reveal]:not([data-reveal="lines"]) { opacity: 0; transform: translateY(46px) scale(.62); transition: opacity .7s var(--ease) var(--d, 0s), transform 1.1s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s); }
html.js:not(.static):not(.reduced) .nf__coin[data-reveal].in { opacity: 1; transform: none; }
.nf__title { margin-top: clamp(14px, 1.6vw, 30px); }
.nf__title .bracket { font-size: clamp(12px, .95vw, 15px); padding: .8em 1.4em; }
.nf__text { max-width: 40ch; margin-top: 16px; font-size: var(--fs-small); color: var(--muted); }
.nf__back { margin-top: clamp(40px, 5.4vw, 100px); }
.nf__social { margin-top: clamp(52px, 6.4vw, 120px); font-size: 14px; }
.nf__social .socials { justify-content: center; margin-top: 10px; }
@media (max-width: 600px) { .nf__coins { width: 90vw; } .nf { min-height: 0; } }

/* =====================================================================
   Malik additions: offer strip, packages, how, FAQ, about, reels,
   mobile quick bar, simple pages. Same tokens as the rest.
   ===================================================================== */
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.cta .btn--ghost { color: var(--bg); box-shadow: inset 0 0 0 1px var(--bg); }
.cta .btn--ghost:hover { background: var(--bg); color: var(--ink); }
.cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cta__btns .cta__btn { margin-top: clamp(30px, 3.4vw, 56px); }

/* offer strip under the wordmark */
.hint { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); column-gap: 24px; padding: clamp(22px, 2.6vw, 48px) var(--g) clamp(28px, 3vw, 56px); position: relative; z-index: 1; background: var(--bg); }
.hint__k { font-family: var(--display); font-size: clamp(14px, 1.1vw, 20px); line-height: 1; text-transform: uppercase; padding-top: .35em; }
.hint .statement { font-size: clamp(22px, 2.3vw, 44px); }
.hint__pills { margin-top: clamp(16px, 1.6vw, 26px); }
.hint__pills .pill { font-size: 13px; }
.hint__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(18px, 1.8vw, 30px); }
.hero__video { margin-top: clamp(14px, 1.4vw, 24px); aspect-ratio: 16 / 7; overflow: hidden; background: #D5D5D2; }
.hero__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .hint { grid-template-columns: 1fr; row-gap: 14px; }
  .hero__video { aspect-ratio: 4 / 5; }
}

/* reels row */
.reels2 { padding: var(--sec) var(--g) 0; }
.reels2__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: clamp(8px, .9vw, 16px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.reels2__row::-webkit-scrollbar { display: none; }
.reel2 { scroll-snap-align: start; position: relative; aspect-ratio: 9 / 16; background: var(--ink); overflow: hidden; }
.reel2 video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.reel2__cap { position: absolute; left: 12px; right: 12px; bottom: 12px; color: #fff; font-family: var(--display); text-transform: uppercase; font-size: 16px; line-height: 1.05; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
@media (max-width: 600px) { .reels2__row { grid-auto-columns: 70vw; } }

/* packages */
.pkgs { padding: var(--sec) var(--g) 0; scroll-margin-top: 20px; }
.pkgs__launch { max-width: 62ch; margin: 0 auto clamp(26px, 2.8vw, 48px); text-align: center; font-weight: 600; font-size: var(--fs-small); background: var(--ink); color: var(--bg); padding: .9em 1.2em; }
.pkgs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, .9vw, 16px); align-items: stretch; }
.pk { display: flex; flex-direction: column; background: var(--card); padding: clamp(20px, 2vw, 36px); }
.pk--hero { background: var(--ink); color: var(--bg); }
.pk__tag { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.pk--hero .pk__tag { color: var(--accent); }
.pk__name { font-family: var(--display); font-size: clamp(30px, 2.6vw, 50px); line-height: .95; text-transform: uppercase; margin: .5em 0 .2em; }
.pk__price { font-family: var(--display); font-size: clamp(64px, 6.4vw, 124px); line-height: .9; letter-spacing: -.01em; }
.pk__dep { margin-top: .9em; font-size: var(--fs-small); font-weight: 600; }
.pk__inc { margin: clamp(18px, 1.8vw, 30px) 0; display: grid; gap: .55em; font-size: var(--fs-body); }
.pk__inc li { display: grid; grid-template-columns: 1.1em 1fr; gap: .5em; }
.pk__inc li::before { content: "+"; font-weight: 700; color: var(--accent); }
.pk__go { margin-top: auto; display: grid; gap: 8px; }
.pk__go .btn { width: 100%; padding-left: 1.2em; padding-right: 1.2em; text-align: center; }
.pk--hero .btn--ghost { color: var(--bg); box-shadow: inset 0 0 0 1px var(--bg); }
.pk--hero .btn--ghost:hover { background: var(--bg); color: var(--ink); }
.pk--hero .btn--pink:hover { background: var(--bg); color: var(--ink); }
.pkgs__promise { justify-content: center; margin-top: clamp(20px, 2vw, 34px); }
.pkgs__promise .pill { font-size: 13px; }
.pkgs__adds { max-width: 900px; margin: clamp(30px, 3vw, 56px) auto 0; }
.pkgs__adds ul { border-top: 1px solid var(--ink); }
.pk-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto auto; gap: 8px 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--soft); }
.pk-add__n { font-family: var(--display); text-transform: uppercase; font-size: clamp(16px, 1.3vw, 22px); }
.pk-add__t { font-size: var(--fs-small); color: var(--muted); }
.pk-add__p { font-family: var(--display); font-size: clamp(18px, 1.5vw, 26px); }
.pkgs__small { max-width: 70ch; margin: clamp(22px, 2.2vw, 36px) auto 0; text-align: center; font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) {
  .pkgs__grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86vw; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--g)); padding: 0 var(--g); scroll-padding: 0 var(--g); }
  .pkgs__grid::-webkit-scrollbar { display: none; }
  .pk { scroll-snap-align: start; }
  .pk-add { grid-template-columns: minmax(0, 1fr) auto auto; }
  .pk-add__t { grid-column: 1 / -1; grid-row: 2; }
}

/* how it works (reuses .steps from the case page) */
.how2 { padding: var(--sec) var(--g) 0; }
.how2 .steps { max-width: 1100px; margin: 0 auto; }

/* FAQ */
.faq2 { padding: var(--sec) var(--g) 0; }
.faq__list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--ink); }
.faq__i { border-bottom: 1px solid var(--soft); }
.faq__i summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--display); text-transform: uppercase; font-size: clamp(18px, 1.6vw, 28px); line-height: 1.05; }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary .i { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.faq__i[open] summary .i { transform: rotate(90deg); }
.faq__i p { padding: 0 0 20px; max-width: 64ch; font-size: var(--fs-body); }
.faq__i a { text-decoration: underline; text-underline-offset: .18em; }

/* about */
.about2 { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); column-gap: 24px; padding: var(--sec) var(--g) 0; }
.about2__h { font-family: var(--display); text-transform: uppercase; font-size: clamp(40px, 4.6vw, 90px); line-height: .95; margin-bottom: .45em; max-width: 12em; }
.about2__media { margin: clamp(22px, 2.4vw, 40px) 0 0; max-width: 520px; background: #D5D5D2; }
.about2__media img, .about2__media video { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .about2 { grid-template-columns: 1fr; row-gap: 14px; } }

/* quotes */
.quotes2 { padding: var(--sec) var(--g) 0; }
.quotes2__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(8px, .9vw, 16px); }
.quote2 { background: var(--card); padding: clamp(20px, 2vw, 36px); }
.quote2__q { font-family: var(--display); text-transform: uppercase; font-size: clamp(20px, 1.8vw, 32px); line-height: 1.05; }
.quote2__w { margin-top: 1em; font-size: var(--fs-small); color: var(--muted); }

/* simple pages (terms, privacy, booked) */
.prose { max-width: 760px; padding: clamp(36px, 4vw, 72px) var(--g) 0; margin-left: 22%; }
.prose h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(22px, 2vw, 34px); line-height: 1; margin: 1.6em 0 .6em; }
.prose p, .prose li { font-size: var(--fs-body); line-height: 1.6; margin-bottom: .6em; }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose ol { list-style: decimal; padding-left: 1.2em; }
.prose a { text-decoration: underline; text-underline-offset: .18em; }
.brief { display: grid; gap: 14px; margin-top: 18px; }
.brief label { display: grid; gap: 6px; font-weight: 700; font-size: 13px; text-transform: uppercase; }
.brief input, .brief textarea, .brief select { font: inherit; font-weight: 500; text-transform: none; color: var(--ink); background: var(--card); border: 1px solid var(--ink); border-radius: 0; padding: 12px 14px; min-height: 48px; }
.brief textarea { min-height: 100px; resize: vertical; }
@media (max-width: 900px) { .prose { margin-left: 0; } }

/* mobile quick bar */
.mbar { display: none; }
@media (max-width: 700px) {
  .mbar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--ink); transform: translateY(110%); transition: transform .45s var(--ease); }
  .mbar.is-on { transform: none; }
  .mbar .btn { min-height: 46px; padding: .9em 1em; font-size: 14px; }
  .ftr { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  html.intro .mbar { display: none; }
}

/* MALIK is wider than the template word: re-fit the hero wordmark (measured ratio 2.2776) */
.hero__title { font-size: calc((100vw - 2 * var(--g)) / 2.29); font-size: calc(100cqw / 2.29); }
/* the template trims the word above the baseline, which hides the foot of the L: show the full letters */
.hero__title { height: .905em; }

[hidden] { display: none !important; }

/* ---- review fixes (10 Nov) ---- */
/* portrait and single-image strips on case pages */
.strip--tall .strip__item { flex-basis: clamp(240px, 26vw, 480px); aspect-ratio: 4 / 5; }
.strip--tall .strip__item img { object-position: 50% 25%; }
@media (max-width: 600px) { .strip--tall .strip__item { flex-basis: 72vw; } }
.case .strip--one { margin-left: var(--off); }
.strip--one .strip__item { flex-basis: min(100%, 720px); }
.strip--one.strip--tall .strip__item { flex-basis: min(100%, 460px); }
@media (max-width: 900px) { .case .strip--one { margin-left: 0; } }

/* phones: keep the Campaigns / Sessions split, hide the Reels list until there are videos */
@media (max-width: 600px) {
  .sblocks { display: grid !important; gap: 64px; padding-top: 72px; }
  .sblocks > .sblock:last-child { display: none; }
}

/* accents (É) were clipped in the list rows */
.row__label { padding-block: .14em; margin-block: -.14em; }

/* simple pages: keep template buttons and statements intact */
.prose a { text-decoration: none; }
.prose a:not(.btn) { text-decoration: underline; text-underline-offset: .18em; }
.prose .statement { font-size: clamp(22px, 2.3vw, 44px); line-height: 1.18; margin-bottom: .9em; }

/* packages: sensible card width on tablets, swipe hint on all touch widths */
@media (max-width: 900px) {
  .pkgs__grid { grid-auto-columns: min(86vw, 360px); }
  .pkgs .shead__hint { display: flex !important; }
}
.pkgs__pay { max-width: 62ch; margin: clamp(18px, 1.8vw, 28px) auto 0; text-align: center; font-size: 13px; font-weight: 600; }
.pkgs__pay:empty { display: none; }

/* readable secondary line in the offer strip (4.6:1) */
.hint .statement__rest { color: var(--muted); }

/* button pairs: one margin, side by side on phones */
.cta__btns { margin-top: clamp(30px, 3.4vw, 56px); }
.cta__btns .cta__btn { margin-top: 0; }
@media (max-width: 600px) {
  .hint__btns .btn, .cta__btns .btn { flex: 1 1 0; min-width: 0; padding-left: 1em; padding-right: 1em; }
}

/* tap targets of at least 44px for small text links */
.ftr__base a.u, .contact__note a.u, .pkgs__small a.u, .pkgs__pay a { position: relative; }
.ftr__base a.u::after, .contact__note a.u::after, .pkgs__small a.u::after { content: ""; position: absolute; inset: -15px -3px; }

/* no "Book a shoot" bar for someone who has just paid */
body:has(form[data-brief]) .mbar, body:has([data-nobrief]) .mbar { display: none !important; }

/* four steps in one row on desktop */
@media (min-width: 901px) {
  .how2 .steps, .case__how .steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* tile titles under the home tiles */
.wgrid--home .tile__line { margin-top: .35em; font-size: var(--fs-small); color: var(--muted); }

/* long pills and paired buttons must wrap on phones */
.pkgs__promise .pill, .hint__pills .pill { white-space: normal; text-align: center; line-height: 1.25; }
@media (max-width: 600px) { .hint__btns .btn, .cta__btns .btn { white-space: normal; text-align: center; line-height: 1.2; font-size: 14px; } }

/* free consultation links */
.hint__call { margin-top: 14px; font-size: var(--fs-small); }
.cta__call { margin-top: 22px; font-size: var(--fs-small); color: #D9D9D6; }
.cta__call .ulink { color: var(--bg); }
.pkgs__call { max-width: 62ch; margin: clamp(18px, 1.8vw, 28px) auto 0; text-align: center; font-size: 14px; font-weight: 600; }