/* MMM Embroidery services pages (phase 1, worker A): /services/ (references/NOVA-05, comp-exact at 1536), the method pages
   /services/embroidery/ + /services/screen-printing/ (concept C02) and /bring-your-own/ (concept C07).
   Same system as site.css: desktop sizes are reference pixels x --u (1536 wide comp), phones and tablets (<= 1179px) stack
   in px with 16px gutters at the bottom of this file. Header, buttons, .eyebrow2 and the footer come from site.css. */

body.page-services, body.page-method, body.page-byo { background: #f3f2ee; }

/* ===================== SHARED: graded photo + colour reveal ===================== */
.ph { position: relative; display: block; overflow: hidden; background: #d9d6d0; transform: translateZ(0); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.ph img.is-color { opacity: 0; }
a:hover .ph img, a:focus-visible .ph img, [data-reveal]:hover .ph img { transform: scale(1.045); }
a:hover .ph img.is-color, a:focus-visible .ph img.is-color, [data-reveal]:hover .ph img.is-color, .is-shown .ph img.is-color, .ph.is-shown img.is-color { opacity: 1; }
.ph--still img { transform: none !important; }
:focus-visible { outline: 2px solid #111; outline-offset: 3px; }

/* line art (no photo exists for mugs or DTF: drawn, never a fake photo) */
.art { background: linear-gradient(180deg, #edece8 0%, #e5e3de 100%); display: grid; place-items: center; }
.art svg, .wcard__art svg, .mcard__art svg { width: 100%; height: 100%; }
.a1 { fill: #f8f7f4; stroke: #2b2926; stroke-width: 1.6; }
.a2 { fill: none; stroke: #2b2926; stroke-width: 1.6; }
.a3 { fill: none; stroke: #9a958d; stroke-width: 1.4; stroke-dasharray: 3 4; }
.a4 { fill: none; stroke: #c4532f; stroke-width: 1.6; }
.a5 { fill: none; stroke: #2f6db5; stroke-width: 1.6; }

/* ===================== /services/ HERO (0 - 545) ===================== */
.svh { position: relative; height: calc(545 * var(--u)); overflow: hidden; background: linear-gradient(180deg, #f2f0ec 0%, #ece9e4 100%); }
.svh__photo {
  position: absolute; top: 0; bottom: 0; right: 0; left: calc(500 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 7%, rgba(0,0,0,.85) 17%, #000 26%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 7%, rgba(0,0,0,.85) 17%, #000 26%);
}
.svh__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.svh__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 34% 30% at 0% 0%, rgba(240,238,234,.94) 0%, rgba(240,238,234,.6) 50%, rgba(240,238,234,0) 100%),
    linear-gradient(180deg, rgba(18,17,16,.38) 0%, rgba(18,17,16,0) 22%),
    linear-gradient(90deg, rgba(18,17,16,0) 38%, rgba(18,17,16,.42) 70%, rgba(14,14,13,.78) 100%);
}
.svh__copy { position: absolute; z-index: 3; left: calc(73 * var(--u)); top: 0; }
.svh__eyebrow {
  position: absolute; top: calc(127 * var(--u)); left: 0; white-space: nowrap;
  font-family: var(--display); font-size: calc(13 * var(--u)); line-height: 1; letter-spacing: .135em; text-transform: uppercase; color: #807d78;
}
.svh__h1 {
  position: absolute; top: calc(151 * var(--u)); left: calc(-2 * var(--u)); width: calc(640 * var(--u));
  font-family: "Inter", system-ui, sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: calc(64 * var(--u)); line-height: calc(61 * var(--u)); letter-spacing: 0;
  background: linear-gradient(172deg, #050505 0%, #0b0b0b 60%, #2c2c2c 86%, #5a5856 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.svh__h1 span { display: block; }
.svh__sub { position: absolute; top: calc(348 * var(--u)); left: 0; width: calc(447 * var(--u)); font-size: calc(16.5 * var(--u)); line-height: calc(23 * var(--u)); color: #3d3b37; }
.svh__ctas { position: absolute; top: calc(455 * var(--u)); left: 0; display: flex; gap: calc(18 * var(--u)); }
.svh__ctas .btn { height: calc(48 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(14.5 * var(--u)); }
.svh__btn1 { width: calc(232 * var(--u)); }
.svh__btn2 { width: calc(185 * var(--u)); }
.svh__script {
  position: absolute; z-index: 3; left: calc(1300 * var(--u)); top: calc(138 * var(--u)); margin: 0;
  font-family: "Mrs Saint Delafield", cursive; font-size: calc(54 * var(--u)); line-height: calc(43 * var(--u)); color: #fbfaf7;
  transform: rotate(-12deg); transform-origin: 0 0; text-shadow: 0 2px 12px rgba(0,0,0,.35); white-space: nowrap; pointer-events: none;
}
.svh__script span { display: block; }
.svh__script span:nth-child(2) { padding-left: calc(52 * var(--u)); }
.svh__script span:nth-child(3) { padding-left: calc(26 * var(--u)); }
.svh__strip {
  position: absolute; z-index: 3; left: calc(907 * var(--u)); top: calc(387 * var(--u)); width: calc(601 * var(--u)); height: calc(130 * var(--u));
  border-radius: calc(10 * var(--u)); background: rgba(238,236,232,.84); border: 1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(14px) saturate(110%); backdrop-filter: blur(14px) saturate(110%); box-shadow: 0 16px 36px rgba(0,0,0,.24);
}
.svh__job { position: absolute; top: calc(13 * var(--u)); width: calc(93 * var(--u)); }
.svh__job:nth-child(1) { left: calc(13 * var(--u)); }
.svh__job:nth-child(2) { left: calc(120 * var(--u)); }
.svh__job:nth-child(3) { left: calc(227 * var(--u)); }
.svh__job:nth-child(4) { left: calc(334 * var(--u)); }
.svh__job:nth-child(5) { left: calc(441 * var(--u)); }
.svh__job .ph { height: calc(82 * var(--u)); border-radius: calc(6 * var(--u)); background: #2a2927; }
.svh__job b { display: block; margin-top: calc(9 * var(--u)); font-size: calc(11.4 * var(--u)); font-weight: 500; line-height: 1.2; color: #1f1e1c; white-space: nowrap; }
.svh__more {
  position: absolute; left: calc(553 * var(--u)); top: calc(38 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u));
  border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.svh__more .arr { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

/* ===================== WAYS (545 - 1330) ===================== */
.ways { position: relative; height: calc(785 * var(--u)); }
.ways__eyebrow { position: absolute; left: calc(76 * var(--u)); top: calc(42 * var(--u)); }
.ways__h2, .proc__h2, .more__h2, .svcta__h2, .mh2 {
  font-family: "Inter", system-ui, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em;
  background: linear-gradient(172deg, #050505 0%, #0b0b0b 60%, #2c2c2c 86%, #5a5856 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ways__h2 { position: absolute; left: calc(74 * var(--u)); top: calc(63 * var(--u)); font-size: calc(55 * var(--u)); line-height: calc(48 * var(--u)); }
.ways__sub { position: absolute; left: calc(76 * var(--u)); top: calc(176 * var(--u)); width: calc(445 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: #5f5c57; }
.ways__compare {
  position: absolute; left: calc(1266 * var(--u)); top: calc(83 * var(--u)); width: calc(224 * var(--u)); height: calc(46 * var(--u));
  display: inline-flex; align-items: center; justify-content: center; gap: calc(9 * var(--u));
  border: 1px solid #3b3936; border-radius: calc(7 * var(--u)); font-size: calc(13.6 * var(--u)); font-weight: 500; color: #121212; background: rgba(255,255,255,.25);
  transition: background .25s, color .25s;
}
.ways__compare:hover { background: #111; color: #fff; }
.ways__compare .arr { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.ways__grid { position: absolute; left: calc(37 * var(--u)); top: calc(257 * var(--u)); display: grid; grid-template-columns: repeat(5, calc(284 * var(--u))); column-gap: calc(11.25 * var(--u)); row-gap: calc(17 * var(--u)); }
.wcard { position: relative; display: block; height: calc(248 * var(--u)); border-radius: calc(8 * var(--u)); overflow: hidden; background: #f9f8f6; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(60,50,40,.04); transition: box-shadow .4s, transform .4s cubic-bezier(.2, .8, .2, 1); }
.wcard:hover, .wcard:focus-visible { transform: translateY(calc(-3 * var(--u))); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 16px 32px rgba(60,50,40,.12); }
.wcard__ph { display: block; height: calc(163 * var(--u)); }
.wcard__art { background: linear-gradient(180deg, #edece8 0%, #e3e1dc 100%); }
.wcard__t { position: absolute; left: calc(20 * var(--u)); top: calc(178 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 600; color: #111; white-space: nowrap; }
.wcard__d { position: absolute; left: calc(20 * var(--u)); top: calc(202 * var(--u)); width: calc(200 * var(--u)); font-size: calc(12.8 * var(--u)); line-height: calc(18 * var(--u)); color: #66635d; }
.wcard__go, .mcard__go {
  position: absolute; right: calc(15 * var(--u)); top: calc(177 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u));
  border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: background .25s, color .25s;
}
.wcard__go .arr, .mcard__go .arr { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.wcard:hover .wcard__go, .mcard:hover .mcard__go { background: #111; color: #fff; }

/* ===================== PROCESS (1350 - 1680) ===================== */
.proc { position: relative; height: calc(330 * var(--u)); margin-top: calc(20 * var(--u)); background: linear-gradient(180deg, #f6f5f1 0%, #f4f3ef 100%); }
.proc__eyebrow { position: absolute; left: calc(67 * var(--u)); top: calc(31 * var(--u)); }
.proc__h2 { position: absolute; left: calc(65 * var(--u)); top: calc(47 * var(--u)); font-size: calc(52.5 * var(--u)); line-height: calc(52 * var(--u)); white-space: nowrap; }
.proc__text { position: absolute; left: calc(803 * var(--u)); top: calc(46 * var(--u)); width: calc(470 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: #67645f; }
.proc__btn { left: calc(1314 * var(--u)); top: calc(40 * var(--u)); width: calc(159 * var(--u)); height: calc(45 * var(--u)); }
.proc__steps { margin: 0; padding: 0; list-style: none; }
.proc__steps li { position: absolute; top: calc(131 * var(--u)); width: calc(250 * var(--u)); }
.proc__steps li:nth-child(1) { left: calc(66 * var(--u)); --line: 205; }
.proc__steps li:nth-child(2) { left: calc(361 * var(--u)); --line: 208; }
.proc__steps li:nth-child(3) { left: calc(658 * var(--u)); --line: 196; }
.proc__steps li:nth-child(4) { left: calc(943 * var(--u)); --line: 195; }
.proc__steps li:nth-child(5) { left: calc(1227 * var(--u)); --line: 79; }
.proc__steps li::after { content: ""; position: absolute; left: calc(59 * var(--u)); top: calc(24 * var(--u)); width: calc(var(--line) * var(--u)); height: 1px; background: #9e9a93; transform-origin: 0 50%; }
.proc__n {
  display: grid; place-items: center; width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%;
  border: 1.2px solid #2b2926; background: #fbfaf8; font-size: calc(14 * var(--u)); font-weight: 600; color: #141414; letter-spacing: .02em;
}
.proc__steps li.is-done .proc__n { background: #a69e93; border-color: #a69e93; color: #161514; }
.proc__steps b { position: absolute; left: calc(58 * var(--u)); top: calc(64 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 600; color: #111; white-space: nowrap; }
.proc__steps li > span:last-child { position: absolute; left: calc(58 * var(--u)); top: calc(90 * var(--u)); width: calc(192 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(19 * var(--u)); color: #7c7973; }
/* steps draw in one after another (services.js adds .is-in when the band is on screen) */
@media (prefers-reduced-motion: no-preference) {
  .sv-anim .proc__steps li { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
  .sv-anim .proc__steps li::after { transform: scaleX(0); transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
  .sv-anim .proc.is-in .proc__steps li { opacity: 1; transform: none; }
  .sv-anim .proc.is-in .proc__steps li::after { transform: none; }
  .sv-anim .proc.is-in .proc__steps li:nth-child(2) { transition-delay: .18s; }
  .sv-anim .proc.is-in .proc__steps li:nth-child(3) { transition-delay: .36s; }
  .sv-anim .proc.is-in .proc__steps li:nth-child(4) { transition-delay: .54s; }
  .sv-anim .proc.is-in .proc__steps li:nth-child(5) { transition-delay: .72s; }
  .sv-anim .proc.is-in .proc__steps li:nth-child(1)::after { transition-delay: .25s; }
  .sv-anim .proc.is-in .proc__steps li:nth-child(2)::after { transition-delay: .43s; }
  .sv-anim .proc.is-in .proc__steps li:nth-child(3)::after { transition-delay: .61s; }
  .sv-anim .proc.is-in .proc__steps li:nth-child(4)::after { transition-delay: .79s; }
  .sv-anim .proc.is-in .proc__steps li:nth-child(5)::after { transition-delay: .97s; }
}

/* ===================== MORE THAN APPAREL (1690 - 1995) ===================== */
.more { position: relative; height: calc(305 * var(--u)); margin-top: calc(10 * var(--u)); }
.more__copy { position: absolute; left: calc(67 * var(--u)); top: 0; }
.more__copy .eyebrow2 { position: absolute; top: calc(26 * var(--u)); left: 0; white-space: nowrap; }
.more__h2 { position: absolute; top: calc(50 * var(--u)); left: calc(-2 * var(--u)); font-size: calc(46 * var(--u)); line-height: calc(43 * var(--u)); white-space: nowrap; }
.more__text { position: absolute; top: calc(152 * var(--u)); left: 0; width: calc(330 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(21 * var(--u)); color: #5f5c57; }
.more__btn { position: absolute; top: calc(226 * var(--u)); left: 0; width: calc(244 * var(--u)); height: calc(44 * var(--u)); font-size: calc(13.8 * var(--u)); }
.more__cards { margin: 0; padding: 0; list-style: none; }
.more__cards li { position: absolute; top: calc(20 * var(--u)); width: calc(207 * var(--u)); height: calc(248 * var(--u)); }
.more__cards li:nth-child(1) { left: calc(444 * var(--u)); }
.more__cards li:nth-child(2) { left: calc(655 * var(--u)); }
.more__cards li:nth-child(3) { left: calc(866 * var(--u)); }
.more__cards li:nth-child(4) { left: calc(1080 * var(--u)); }
.more__cards li:nth-child(5) { left: calc(1295 * var(--u)); }
.mcard { position: relative; display: block; height: 100%; border-radius: calc(8 * var(--u)); overflow: hidden; background: #f9f8f6; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(60,50,40,.04); transition: box-shadow .4s, transform .4s cubic-bezier(.2, .8, .2, 1); }
.mcard:hover, .mcard:focus-visible { transform: translateY(calc(-3 * var(--u))); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 16px 32px rgba(60,50,40,.12); }
.mcard__ph { position: relative; display: block; height: calc(173 * var(--u)); background: linear-gradient(180deg, #eeede9 0%, #e5e3de 100%); overflow: hidden; }
.mcard__cut { position: absolute; left: 50%; top: 50%; max-width: none; transform: translate(-50%, -50%); filter: drop-shadow(0 8px 10px rgba(0,0,0,.16)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.mcard__cut--apron { height: calc(160 * var(--u)); top: 54%; }
.mcard__cut--bags { height: calc(140 * var(--u)); top: 53%; }
.mcard__cut--towel { width: calc(176 * var(--u)); top: 54%; }
.mcard:hover .mcard__cut { transform: translate(-50%, -50%) scale(1.05); }
.mcard__t { position: absolute; left: calc(16 * var(--u)); top: calc(186 * var(--u)); font-size: calc(13.6 * var(--u)); line-height: calc(16 * var(--u)); font-weight: 600; color: #111; white-space: nowrap; }
.mcard__d { position: absolute; left: calc(16 * var(--u)); top: calc(206 * var(--u)); width: calc(140 * var(--u)); font-size: calc(12.2 * var(--u)); line-height: calc(17 * var(--u)); color: #66635d; }
.mcard__go { right: calc(12 * var(--u)); top: calc(194 * var(--u)); width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.mcard__go .arr { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

/* ===================== FINAL CALL TO ACTION (1998 - 2304) ===================== */
.svcta { position: relative; height: calc(306 * var(--u)); margin-top: calc(3 * var(--u)); overflow: hidden; background: linear-gradient(180deg, #efede9 0%, #e8e5e0 100%); }
.svcta__ph {
  position: absolute; top: 0; bottom: 0; right: 0; left: calc(540 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 9%, #000 22%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 9%, #000 22%);
}
.svcta__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: opacity .9s ease; }
.svcta:hover .svcta__ph img.is-color, .svcta.is-shown .svcta__ph img.is-color { opacity: 1; }
.svcta__copy { position: absolute; z-index: 2; left: calc(72 * var(--u)); top: 0; }
.svcta__copy .eyebrow2 { position: absolute; top: calc(45 * var(--u)); left: 0; white-space: nowrap; }
.svcta__h2 { position: absolute; top: calc(66 * var(--u)); left: calc(-1 * var(--u)); font-size: calc(47 * var(--u)); line-height: calc(42 * var(--u)); white-space: nowrap; }
.svcta__text { position: absolute; top: calc(168 * var(--u)); left: 0; white-space: nowrap; font-size: calc(15 * var(--u)); line-height: calc(21 * var(--u)); color: #4d4b47; }
.svcta__btns { position: absolute; top: calc(200 * var(--u)); left: 0; display: flex; gap: calc(18 * var(--u)); }
.svcta__btns .btn { height: calc(50 * var(--u)); font-size: calc(14 * var(--u)); border-radius: calc(7 * var(--u)); }
.svcta__b1 { width: calc(226 * var(--u)); }
.svcta__b2 { width: calc(202 * var(--u)); }

/* hero intro (same rhythm as the homepage): photo wipes in, words rise, the strip follows; once, never with reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.intro-ready) [data-intro] :is(.hdr, .svh__photo, .svh__eyebrow, .svh__h1 > span, .svh__sub, .svh__ctas, .svh__script, .svh__strip, .mhero__media, .mhero__copy > *) { opacity: 0; }
  .intro-ready [data-intro] .hdr { animation: intro-fade .8s ease .05s backwards; }
  .intro-ready [data-intro] .svh__photo { animation: intro-reveal 1.4s cubic-bezier(.65, 0, .35, 1) .1s backwards; }
  .intro-ready [data-intro] .svh__photo img { animation: intro-zoom 2.4s cubic-bezier(.16, 1, .3, 1) .1s backwards; }
  .intro-ready [data-intro] .svh__eyebrow { animation: intro-wipe .9s cubic-bezier(.65, 0, .35, 1) .25s backwards; }
  .intro-ready [data-intro] .svh__h1 > span { animation: intro-line 1s cubic-bezier(.16, 1, .3, 1) backwards; }
  .intro-ready [data-intro] .svh__h1 > span:nth-child(1) { animation-delay: .35s; }
  .intro-ready [data-intro] .svh__h1 > span:nth-child(2) { animation-delay: .45s; }
  .intro-ready [data-intro] .svh__h1 > span:nth-child(3) { animation-delay: .55s; }
  .intro-ready [data-intro] .svh__sub { animation: intro-rise .9s cubic-bezier(.16, 1, .3, 1) .75s backwards; }
  .intro-ready [data-intro] .svh__ctas { animation: intro-rise .9s cubic-bezier(.16, 1, .3, 1) .88s backwards; }
  .intro-ready [data-intro] .svh__script { animation: intro-fade 1.4s ease 1.1s backwards; }
  .intro-ready [data-intro] .svh__strip { animation: intro-card 1.1s cubic-bezier(.16, 1, .3, 1) .8s backwards; }
  .intro-ready [data-intro] .mhero__media { animation: intro-reveal 1.4s cubic-bezier(.65, 0, .35, 1) .1s backwards; }
  .intro-ready [data-intro] .mhero__copy > * { animation: intro-rise .9s cubic-bezier(.16, 1, .3, 1) backwards; }
  .intro-ready [data-intro] .mhero__copy > :nth-child(1) { animation-delay: .2s; }
  .intro-ready [data-intro] .mhero__copy > :nth-child(2) { animation-delay: .32s; }
  .intro-ready [data-intro] .mhero__copy > :nth-child(3) { animation-delay: .5s; }
  .intro-ready [data-intro] .mhero__copy > :nth-child(4) { animation-delay: .62s; }
}

/* ===================== PHONES + TABLETS: /services/ ===================== */
@media (max-width: 1179px) {
  .svh { height: auto; display: flex; flex-direction: column; padding-bottom: 14px; }
  .svh .hdr { order: 1; }
  .svh__copy { position: relative; left: auto; order: 2; padding: 22px 16px 20px; }
  .svh__eyebrow, .svh__h1, .svh__sub, .svh__ctas { position: static; }
  .svh__eyebrow { font-size: 11px; letter-spacing: .12em; white-space: normal; line-height: 1.4; }
  .svh__h1 { width: auto; margin-top: 12px; font-size: 44px; line-height: 42px; }
  .svh__sub { width: auto; max-width: 34em; margin-top: 16px; font-size: 15px; line-height: 22px; }
  .svh__ctas { margin-top: 20px; gap: 10px; flex-wrap: wrap; }
  .svh__ctas .btn { flex: 1 1 140px; width: auto; height: 48px; font-size: 15px; border-radius: 7px; padding: 0 10px; }
  .svh__photo { position: relative; order: 3; left: auto; height: 250px; margin: 0 16px; border-radius: 12px; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
  .svh__photo::after { background: linear-gradient(180deg, rgba(18,17,16,0) 45%, rgba(18,17,16,.55) 100%); }
  .svh__script { left: 32px; top: auto; bottom: 176px; z-index: 4; font-size: 40px; line-height: 32px; transform: rotate(-8deg); transform-origin: 0 100%; }
  .svh__script span { display: inline; padding: 0 !important; }
  .svh__script span + span::before { content: " "; }
  .svh__strip { position: relative; order: 4; left: auto; top: auto; width: auto; height: auto; margin: 10px 16px 0; padding: 10px; border-radius: 12px;
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; background: #e9e6e1; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border: 0; }
  .svh__strip::-webkit-scrollbar { display: none; }
  .svh__job { position: static; flex: 0 0 104px; width: auto; }
  .svh__job .ph { height: 90px; border-radius: 8px; }
  .svh__job b { margin-top: 7px; font-size: 12.5px; }
  .svh__more { display: none; }

  .ways { height: auto; padding: 40px 16px 8px; display: flex; flex-direction: column; }
  .ways__eyebrow, .ways__h2, .ways__sub, .ways__compare, .ways__grid { position: static; }
  .ways__h2 { margin-top: 8px; font-size: 34px; line-height: 34px; }
  .ways__h2 br { display: none; }
  .ways__sub { width: auto; margin-top: 14px; font-size: 15px; line-height: 22px; }
  .ways__compare { order: 9; width: 100%; height: 48px; margin-top: 16px; font-size: 15px; border-radius: 8px; gap: 8px; }
  .ways__compare .arr { width: 15px; height: 15px; }
  .ways__grid { margin-top: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wcard { height: 100%; min-height: 0; display: flex; flex-direction: column; border-radius: 10px; padding-bottom: 14px; }
  .wcard__ph { height: auto; aspect-ratio: 284 / 170; }
  .wcard__t, .wcard__d { position: static; width: auto; padding: 0 12px; white-space: normal; }
  .wcard__t { margin-top: 12px; font-size: 14.5px; line-height: 18px; padding-right: 44px; }
  .wcard__d { margin-top: 5px; font-size: 13px; line-height: 18px; }
  .wcard__go { display: none; }
  .wcard:hover, .wcard:focus-visible { transform: none; }

  .proc { height: auto; margin-top: 36px; padding: 34px 16px 30px; display: flex; flex-direction: column; }
  .proc__eyebrow, .proc__h2, .proc__text, .proc__btn { position: static; }
  .proc__h2 { margin-top: 8px; font-size: 32px; line-height: 34px; white-space: normal; }
  .proc__text { width: auto; margin-top: 12px; font-size: 15px; line-height: 22px; }
  .proc__btn { order: 9; width: 100%; height: 48px; margin-top: 20px; font-size: 15px; border-radius: 8px; }
  .proc__steps { margin-top: 24px; display: grid; gap: 0; }
  .proc__steps li { position: relative; left: auto !important; top: auto; width: auto; padding: 0 0 22px 60px; min-height: 64px; }
  .proc__steps li::after { left: 21px; top: 46px; width: 1px !important; height: calc(100% - 50px); transform-origin: 50% 0; }
  .proc__steps li:last-child::after { display: none; }
  .proc__n { position: absolute; left: 0; top: 0; width: 44px; height: 44px; font-size: 13px; }
  .proc__steps b, .proc__steps li > span:last-child { position: static; display: block; width: auto; white-space: normal; }
  .proc__steps b { padding-top: 3px; font-size: 16px; line-height: 20px; }
  .proc__steps li > span:last-child { margin-top: 4px; font-size: 14px; line-height: 20px; }
  .sv-anim .proc__steps li::after { transform: scaleY(0); }

  .more { height: auto; margin-top: 40px; padding: 0 0 8px; }
  .more__copy { position: static; padding: 0 16px; display: flex; flex-direction: column; }
  .more__copy .eyebrow2, .more__h2, .more__text, .more__btn { position: static; }
  .more__h2 { margin-top: 8px; font-size: 34px; line-height: 34px; white-space: normal; }
  .more__h2 br { display: none; }
  .more__text { width: auto; margin-top: 12px; font-size: 15px; line-height: 22px; }
  .more__btn { order: 9; flex: none; width: 100%; height: 48px; margin-top: 18px; font-size: 15px; }
  .more__cards { margin-top: 18px; display: flex; gap: 10px; padding: 4px 16px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
  .more__cards::-webkit-scrollbar { display: none; }
  .more__cards li { position: static; flex: 0 0 62%; max-width: 260px; width: auto; height: auto; scroll-snap-align: start; }
  .mcard { border-radius: 10px; padding-bottom: 14px; }
  .mcard__ph { height: auto; aspect-ratio: 207 / 173; }
  .mcard__cut--apron { height: 88%; }
  .mcard__cut--bags { height: 78%; }
  .mcard__cut--towel { width: 82%; }
  .mcard__t, .mcard__d { position: static; display: block; width: auto; padding: 0 12px; white-space: normal; }
  .mcard__t { margin-top: 12px; font-size: 15px; line-height: 18px; }
  .mcard__d { margin-top: 4px; font-size: 13px; line-height: 18px; padding-right: 40px; }
  .mcard__go { top: auto; bottom: 14px; right: 10px; width: 30px; height: 30px; }

  .svcta { height: auto; margin-top: 32px; display: flex; flex-direction: column; }
  .svcta__ph { position: relative; order: 2; left: auto; height: 220px; -webkit-mask-image: none; mask-image: none; }
  .svcta__copy { position: relative; left: auto; padding: 36px 16px 26px; }
  .svcta__copy .eyebrow2, .svcta__h2, .svcta__text, .svcta__btns { position: static; }
  .svcta__h2 { margin-top: 8px; font-size: 32px; line-height: 34px; white-space: normal; }
  .svcta__h2 br { display: none; }
  .svcta__text { margin-top: 12px; white-space: normal; font-size: 15px; line-height: 22px; }
  .svcta__btns { margin-top: 20px; gap: 10px; flex-wrap: wrap; }
  .svcta__btns .btn { flex: 1 1 200px; width: auto; height: 48px; font-size: 15px; border-radius: 7px; }
}
@media (min-width: 640px) and (max-width: 1179px) {
  .svh__copy { padding: 34px 32px 24px; }
  .svh__h1 { font-size: 62px; line-height: 58px; }
  .svh__ctas { max-width: 480px; }
  .svh__photo { height: 400px; margin: 0 32px; }
  .svh__strip { margin: 12px 32px 0; }
  .svh__script { left: 52px; bottom: 190px; font-size: 52px; }
  .ways, .proc { padding-left: 32px; padding-right: 32px; }
  .ways__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .ways__compare, .proc__btn, .more__btn { width: auto; align-self: flex-start; padding: 0 24px; }
  .proc__steps { grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
  .more__copy { padding: 0 32px; }
  .more__cards { padding: 4px 32px 10px; scroll-padding: 0 32px; }
  .more__cards li { flex-basis: 30%; }
  .svcta__copy { padding: 44px 32px 32px; }
  .svcta__ph { height: 300px; }
}

/* ===================== METHOD PAGES (concept C02): /services/embroidery/, /services/screen-printing/ ===================== */
.mhero { position: relative; height: calc(392 * var(--u)); overflow: hidden; background: linear-gradient(180deg, #f1efeb 0%, #ebe8e3 100%); }
.mhero__media {
  position: absolute; top: 0; bottom: 0; right: 0; left: calc(640 * var(--u)); background: #1a1918;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 9%, #000 24%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 9%, #000 24%);
}
.mhero__media video, .mhero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--my, 55%); filter: contrast(1.04) brightness(.92); }
.mhero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,17,16,0) 50%, rgba(18,17,16,.35) 100%); pointer-events: none; }
.mhero__copy { position: absolute; z-index: 2; left: calc(60 * var(--u)); top: calc(40 * var(--u)); width: calc(700 * var(--u)); }
.mhero__eyebrow { font-family: var(--display); font-size: calc(12.4 * var(--u)); letter-spacing: .2em; text-transform: uppercase; color: #66635d; }
.mh1 {
  margin-top: calc(16 * var(--u)); font-family: "Inter", system-ui, sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: calc(60 * var(--u)); line-height: calc(58 * var(--u)); letter-spacing: -0.01em;
  background: linear-gradient(172deg, #050505 0%, #0b0b0b 60%, #2c2c2c 86%, #5a5856 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mh1 span { display: block; }
.mhero__sub { margin-top: calc(18 * var(--u)); width: calc(540 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); color: #3d3b37; }
.mhero__ctas { display: flex; gap: calc(14 * var(--u)); margin-top: calc(26 * var(--u)); }
.mhero__ctas .btn { width: auto; height: calc(50 * var(--u)); padding: 0 calc(24 * var(--u)); font-size: calc(15 * var(--u)); border-radius: calc(7 * var(--u)); }
.mhero__ctas .btn svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 1.7; }

.mbody { padding: 0 calc(60 * var(--u)) calc(20 * var(--u)); }
.mbody h3, .byo h3 { margin: 0; }
.msec { margin-top: calc(38 * var(--u)); }
.mlabel { margin: 0 0 calc(14 * var(--u)); font-family: var(--display); font-size: calc(12.6 * var(--u)); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #2c2a27; }
.mlabel--sm { margin-bottom: calc(6 * var(--u)); font-size: calc(11.6 * var(--u)); color: #66635d; font-weight: 500; }
.mh2 { font-size: calc(36 * var(--u)); line-height: calc(40 * var(--u)); }

/* best for */
.mbest { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(16 * var(--u)); }
.bcard { position: relative; display: block; height: calc(225 * var(--u)); border-radius: calc(10 * var(--u)); background: linear-gradient(180deg, #f7f6f3 0%, #edebe6 100%); box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow: hidden; transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; }
.bcard:hover, .bcard:focus-visible { transform: translateY(calc(-3 * var(--u))); box-shadow: 0 16px 32px rgba(60,50,40,.12); }
.bcard__img { position: absolute; left: 0; right: 0; top: calc(14 * var(--u)); height: calc(150 * var(--u)); display: flex; align-items: center; justify-content: center; }
.bcard__img img { max-height: 100%; max-width: 88%; width: auto; filter: drop-shadow(0 10px 12px rgba(0,0,0,.18)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.bcard__img img.bcard__img--wide { max-width: 94%; max-height: 72%; }
.bcard:hover .bcard__img img { transform: scale(1.04); }
.bcard b { position: absolute; left: 0; right: 0; bottom: calc(18 * var(--u)); text-align: center; font-size: calc(15 * var(--u)); font-weight: 600; color: #141414; }
.bcard .arr { position: absolute; right: calc(16 * var(--u)); bottom: calc(20 * var(--u)); width: calc(15 * var(--u)); height: calc(15 * var(--u)); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; }
.bcard:hover .arr { opacity: 1; transform: none; }

/* placement picker */
.pick { display: grid; grid-template-columns: calc(810 * var(--u)) calc(222 * var(--u)) minmax(0, 1fr); gap: calc(16 * var(--u)); align-items: stretch; }
.pick__figs { border-radius: calc(10 * var(--u)); background: #f9f8f6; box-shadow: 0 1px 2px rgba(0,0,0,.05); padding: calc(6 * var(--u)) 0; }
.pick__figs svg { display: block; width: 100%; height: auto; }
.fig__body { fill: #fdfcfa; stroke: #2b2926; stroke-width: 1.5; stroke-linejoin: round; }
.fig__line { fill: none; stroke: #2b2926; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.fig__dot { fill: #2b2926; stroke: none; }
.fig__label { font: 500 13px "Inter", sans-serif; fill: #3d3b37; stroke: none; text-anchor: middle; }
.pzones [data-spot] { fill: rgba(196,83,47,.08); stroke: #c4532f; stroke-width: 1.4; stroke-dasharray: 4 3; opacity: 0; transition: opacity .3s; pointer-events: none; }
.pzones [data-spot].is-on { opacity: 1; }
.pspot { cursor: pointer; outline: none; }
.pspot circle { fill: #fff; stroke: #2b2926; stroke-width: 1.3; transition: fill .2s, stroke .2s; }
.pspot text { font: 600 12px "Inter", sans-serif; fill: #111; stroke: none; text-anchor: middle; pointer-events: none; }
.pspot:hover circle, .pspot:focus-visible circle { stroke-width: 2.2; }
.pspot.is-on circle { fill: #111; stroke: #111; }
.pspot.is-on text { fill: #fff; }
.pspot:focus-visible circle { stroke: #c4532f; }
@media (prefers-reduced-motion: no-preference) {
  .pspot.is-on circle { animation: spot-pulse 1.8s ease-out 1; }
}
@keyframes spot-pulse { 0% { stroke-width: 8; stroke-opacity: .25; } 100% { stroke-width: 1.3; stroke-opacity: 1; } }
.pick__list { display: grid; align-content: start; gap: calc(6 * var(--u)); padding: calc(8 * var(--u)); border-radius: calc(10 * var(--u)); background: #f9f8f6; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.pick__list button {
  position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); width: 100%; height: calc(38 * var(--u)); padding: 0 calc(12 * var(--u));
  border-radius: calc(7 * var(--u)); font-size: calc(13.6 * var(--u)); font-weight: 500; color: #2a2826; text-align: left; transition: background .2s, color .2s;
}
.pick__list button span { display: grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: #ebe9e4; font-size: calc(11.5 * var(--u)); font-weight: 600; color: #111; flex: 0 0 auto; }
.pick__list button:hover { background: #efede9; }
.pick__list button.is-on { background: #111; color: #fff; }
.pick__list button.is-on span { background: #fff; }
.pick__list button.is-on::after { content: ""; position: absolute; right: calc(14 * var(--u)); top: 50%; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-right: 1.6px solid #fff; border-top: 1.6px solid #fff; transform: translateY(-50%) rotate(45deg); }
.pick__cards { min-width: 0; }
.pcard { height: 100%; display: flex; flex-direction: column; border-radius: calc(10 * var(--u)); overflow: hidden; background: #f9f8f6; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.pcard[hidden] { display: none; }
.pcard__ph { display: block; height: calc(200 * var(--u)); flex: 0 0 auto; }
.pcard__art { background: linear-gradient(180deg, #efeeea 0%, #e6e4df 100%); }
.pcard__art svg { width: 100%; height: 100%; }
.pcard__hi { fill: rgba(196,83,47,.1); stroke: #c4532f; stroke-width: 1.4; stroke-dasharray: 4 3; }
.pcard__body { position: relative; padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)) calc(56 * var(--u)); display: flex; flex-direction: column; flex: 1; }
.pcard__n { position: absolute; left: calc(18 * var(--u)); top: calc(15 * var(--u)); display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: #111; color: #fff; font-size: calc(12 * var(--u)); font-weight: 600; }
.pcard__t { font-size: calc(16 * var(--u)); font-weight: 700; color: #111; outline: none; }
.pcard__body p { margin-top: calc(5 * var(--u)); font-size: calc(13.4 * var(--u)); line-height: calc(19.5 * var(--u)); color: #66635e; }
.pcard__go { margin-top: auto; padding-top: calc(10 * var(--u)); display: inline-flex; align-items: center; gap: calc(7 * var(--u)); align-self: flex-start; font-size: calc(13.6 * var(--u)); font-weight: 600; color: #111; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pcard__go .arr { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
@media (prefers-reduced-motion: no-preference) {
  .pcard:not([hidden]) { animation: pcard-in .45s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes pcard-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* from logo to stitches */
.mstep-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--u)); margin: 0; padding: 0; list-style: none; }
.mstep { border-radius: calc(10 * var(--u)); overflow: hidden; background: #f9f8f6; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.mstep__ph { height: calc(150 * var(--u)); }
.mstep__body { position: relative; padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)) calc(64 * var(--u)); }
.mstep__n { position: absolute; left: calc(18 * var(--u)); top: calc(14 * var(--u)); display: grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; border: 1.2px solid #2b2926; font-size: calc(11.5 * var(--u)); font-weight: 600; color: #111; transition: background .5s, color .5s, border-color .5s; }
.mstep h3 { font-size: calc(17 * var(--u)); font-weight: 700; color: #111; line-height: calc(32 * var(--u)); }
.mstep p { margin-top: calc(2 * var(--u)); font-size: calc(13.6 * var(--u)); line-height: calc(20 * var(--u)); color: #66635e; }
@media (prefers-reduced-motion: no-preference) {
  .sv-anim .msteps .mstep { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
  .sv-anim .msteps.is-in .mstep { opacity: 1; transform: none; }
  .sv-anim .msteps.is-in .mstep:nth-child(2) { transition-delay: .15s; }
  .sv-anim .msteps.is-in .mstep:nth-child(3) { transition-delay: .3s; }
  .sv-anim .msteps.is-in .mstep .mstep__n { background: #a69e93; border-color: #a69e93; transition-delay: .6s; }
}

/* machines */
.mmach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--u)); }
.mach { display: grid; grid-template-columns: calc(200 * var(--u)) 1fr; height: calc(232 * var(--u)); border-radius: calc(10 * var(--u)); overflow: hidden; background: #f9f8f6; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.mach__ph { height: 100%; }
.mach__body { padding: calc(22 * var(--u)) calc(22 * var(--u)); }
.mach h3 { font-size: calc(22 * var(--u)); font-weight: 700; letter-spacing: -0.01em; color: #111; }
.mach p { margin-top: calc(8 * var(--u)); font-size: calc(13.6 * var(--u)); line-height: calc(20 * var(--u)); color: #66635e; }

/* work */
.mwork { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(12 * var(--u)); }
.mwork__ph { aspect-ratio: 232 / 165; border-radius: calc(8 * var(--u)); }
.mwork__cap { display: block; margin-top: calc(8 * var(--u)); font-size: calc(12.4 * var(--u)); color: #66635d; }

/* faq */
.mfaq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)) calc(16 * var(--u)); align-items: start; }
.mfaq details { border-radius: calc(8 * var(--u)); background: #f9f8f6; border: 1px solid #e6e3dd; }
.mfaq summary { position: relative; list-style: none; cursor: pointer; padding: calc(13 * var(--u)) calc(48 * var(--u)) calc(13 * var(--u)) calc(16 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 500; color: #151515; }
.mfaq summary::-webkit-details-marker { display: none; }
.mfaq summary::before, .mfaq summary::after { content: ""; position: absolute; right: calc(18 * var(--u)); top: 50%; width: calc(12 * var(--u)); height: 1.5px; background: #222; transition: transform .3s; }
.mfaq summary::after { transform: rotate(90deg); }
.mfaq details[open] summary::after { transform: rotate(0deg); }
.mfaq details p { padding: 0 calc(16 * var(--u)) calc(15 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); color: #57544f; }
.mfaq details a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; color: #111; }

/* start */
.mstart { display: flex; align-items: center; justify-content: space-between; gap: calc(30 * var(--u)); margin-top: calc(40 * var(--u)); padding: calc(28 * var(--u)) calc(32 * var(--u)); border-radius: calc(12 * var(--u)); background: #fbfaf8; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(60,50,40,.06); }
.mstart__text { margin-top: calc(8 * var(--u)); font-size: calc(15 * var(--u)); color: #57544f; }
.mstart__btns { display: flex; gap: calc(12 * var(--u)); flex: 0 0 auto; }
.mstart__btns .btn { width: auto; height: calc(52 * var(--u)); padding: 0 calc(28 * var(--u)); font-size: calc(15 * var(--u)); border-radius: calc(8 * var(--u)); }

/* screen printing: compare the three methods */
.mcomp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--u)); }
.mcomp article { position: relative; padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)); border-radius: calc(10 * var(--u)); background: #f9f8f6; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.mcomp article.is-this { background: #111; color: #f4f2ee; }
.mcomp h3 { font-size: calc(20 * var(--u)); font-weight: 700; letter-spacing: -0.01em; }
.mcomp dl { margin: calc(12 * var(--u)) 0 0; display: grid; gap: calc(10 * var(--u)); }
.mcomp dt { font-family: var(--display); font-size: calc(11 * var(--u)); letter-spacing: .16em; text-transform: uppercase; color: #66635d; }
.mcomp .is-this dt { color: #a8a49d; }
.mcomp dd { margin: calc(3 * var(--u)) 0 0; font-size: calc(14 * var(--u)); line-height: calc(21 * var(--u)); color: #4e4b47; }
.mcomp .is-this dd { color: #e2dfd9; }
.mcomp a { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); margin-top: calc(14 * var(--u)); font-size: calc(13.6 * var(--u)); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.mcomp a .arr { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.mcomp__note { margin-top: calc(14 * var(--u)); font-size: calc(14 * var(--u)); color: #57544f; }
.mcomp__note a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; color: #111; }

/* ===================== PHONES + TABLETS: method pages ===================== */
@media (max-width: 1179px) {
  .mhero { height: auto; display: flex; flex-direction: column; padding-bottom: 6px; }
  .mhero__copy { position: relative; left: auto; top: auto; width: auto; order: 1; padding: 18px 16px 20px; }
  .mhero__eyebrow { font-size: 11px; letter-spacing: .16em; }
  .mh1 { margin-top: 10px; font-size: 38px; line-height: 38px; }
  .mhero__sub { width: auto; max-width: 34em; margin-top: 14px; font-size: 15px; line-height: 22px; }
  .mhero__ctas { margin-top: 20px; gap: 10px; flex-wrap: wrap; }
  .mhero__ctas .btn { flex: 1 1 auto; height: 48px; padding: 0 16px; font-size: 15px; border-radius: 7px; }
  .mhero__ctas .btn svg { width: 18px; height: 18px; }
  .mhero__media { position: relative; order: 2; left: auto; height: 240px; margin: 0 16px; border-radius: 12px; overflow: hidden; -webkit-mask-image: none; mask-image: none; }

  .mbody { padding: 0 16px 10px; }
  .msec { margin-top: 34px; }
  .mlabel { margin-bottom: 12px; font-size: 12px; letter-spacing: .18em; }
  .mlabel--sm { font-size: 11px; margin-bottom: 6px; }
  .mh2 { font-size: 28px; line-height: 31px; }

  .mbest { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bcard { height: 176px; border-radius: 10px; }
  .bcard__img { top: 10px; height: 116px; }
  .bcard b { bottom: 12px; padding: 0 8px; font-size: 13.5px; line-height: 1.25; }
  .bcard .arr { display: none; }

  .pick { grid-template-columns: 1fr; gap: 10px; }
  .pick__figs { padding: 4px 0; border-radius: 10px; }
  .pick__figs--two { overflow: hidden; }
  .pick__figs--two svg { width: 150%; margin-left: -25%; }
  .fig__label { font-size: 26px; }
  .pspot circle { r: 26; stroke-width: 2; }
  .pspot text { font-size: 24px; transform: translateY(4px); }
  .pick__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 10px; }
  .pick__list button { height: 42px; gap: 10px; padding: 0 10px; font-size: 14px; border-radius: 8px; }
  .pick__list button span { width: 24px; height: 24px; font-size: 12px; }
  .pick__list button.is-on::after { display: none; }
  .pcard { border-radius: 10px; }
  .pcard__ph { height: 210px; }
  .pcard__body { padding: 16px 16px 18px 56px; }
  .pcard__n { left: 16px; top: 15px; width: 28px; height: 28px; font-size: 13px; }
  .pcard__t { font-size: 17px; }
  .pcard__body p { margin-top: 5px; font-size: 14.5px; line-height: 21px; }
  .pcard__go { padding-top: 12px; font-size: 15px; gap: 8px; }
  .pcard__go .arr { width: 14px; height: 14px; }

  .mstep-grid { grid-template-columns: 1fr; gap: 12px; }
  .mstep { border-radius: 10px; }
  .mstep__ph { height: 170px; }
  .mstep__body { padding: 14px 16px 16px 60px; }
  .mstep__n { left: 16px; top: 14px; width: 32px; height: 32px; font-size: 12px; }
  .mstep h3 { font-size: 17px; line-height: 32px; }
  .mstep p { font-size: 14.5px; line-height: 21px; }

  .mmach { grid-template-columns: 1fr; gap: 12px; }
  .mach { grid-template-columns: 132px 1fr; height: auto; min-height: 150px; border-radius: 10px; }
  .mach__body { padding: 16px; }
  .mach h3 { font-size: 20px; }
  .mach p { margin-top: 6px; font-size: 14.5px; line-height: 21px; }

  .mwork { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .mwork__ph { border-radius: 8px; }
  .mwork__cap { margin-top: 6px; font-size: 12.5px; }

  .mfaq { grid-template-columns: 1fr; gap: 8px; }
  .mfaq summary { padding: 15px 46px 15px 14px; font-size: 15px; }
  .mfaq summary::before, .mfaq summary::after { right: 16px; width: 13px; }
  .mfaq details p { padding: 0 14px 16px; font-size: 15px; line-height: 22px; }

  .mstart { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 34px; padding: 24px 18px; border-radius: 12px; }
  .mstart__text { margin-top: 8px; font-size: 15px; line-height: 22px; }
  .mstart__btns { flex-direction: column; gap: 10px; }
  .mstart__btns .btn { width: 100%; height: 50px; font-size: 15.5px; flex: none; }

  .mcomp { grid-template-columns: 1fr; gap: 12px; }
  .mcomp article { padding: 20px 18px; border-radius: 10px; }
  .mcomp h3 { font-size: 20px; }
  .mcomp dt { font-size: 11px; }
  .mcomp dd { font-size: 15px; line-height: 22px; }
  .mcomp a { font-size: 15px; margin-top: 12px; }
  .mcomp__note { font-size: 15px; line-height: 22px; }
}
@media (min-width: 640px) and (max-width: 1179px) {
  .mhero__copy { padding: 30px 32px 22px; }
  .mh1 { font-size: 54px; line-height: 52px; }
  .mhero__media { height: 360px; margin: 0 32px; }
  .mbody { padding: 0 32px 16px; }
  .mbest { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pick { grid-template-columns: 1fr 1fr; }
  .pick__figs { grid-column: 1 / -1; }
  .pick__list { grid-template-columns: 1fr; }
  .mstep-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mstep__ph { height: 150px; }
  .mmach { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mach { grid-template-columns: 1fr; }
  .mach__ph { height: 200px; }
  .mwork { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mfaq { grid-template-columns: 1fr 1fr; }
  .mstart { flex-direction: row; align-items: center; }
  .mstart__btns { flex-direction: row; }
  .mstart__btns .btn { width: auto; padding: 0 22px; }
  .mcomp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===================== /bring-your-own/ (concept C07) ===================== */
.byo-hero { height: calc(470 * var(--u)); }
.byo-hero .mhero__media { left: calc(600 * var(--u)); }
.byo-hero .mhero__copy { top: calc(62 * var(--u)); }
.byo-hero .mh1 { font-size: calc(68 * var(--u)); line-height: calc(64 * var(--u)); }
.byo-hero .mhero__sub { width: calc(470 * var(--u)); }
.byo-hero__ph { position: absolute; inset: 0; background: #2a2927; }
.byo-hero__ph img { object-position: 45% 50%; }
.byo-hero:hover .byo-hero__ph img.is-color, .byo-hero.is-shown .byo-hero__ph img.is-color { opacity: 1; }
.byo-h2 { margin-bottom: calc(18 * var(--u)); font-size: calc(34 * var(--u)); line-height: calc(38 * var(--u)); }
.byo-bring { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(14 * var(--u)); }
.byo-bring__ph { aspect-ratio: 1 / 1; border-radius: calc(10 * var(--u)); }
.byo-bring b { display: block; margin-top: calc(12 * var(--u)); text-align: center; font-size: calc(14.5 * var(--u)); font-weight: 600; color: #141414; }
.byo-how { display: grid; grid-template-columns: 1fr calc(44 * var(--u)) 1fr calc(44 * var(--u)) 1fr; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.byo-step { position: relative; display: flex; flex-direction: column; padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(20 * var(--u)); border-radius: calc(12 * var(--u)); }
.byo-step__ph { position: relative; display: block; height: calc(180 * var(--u)); border-radius: calc(8 * var(--u)); overflow: hidden; }
.byo-step__art { background: linear-gradient(180deg, #edece8 0%, #e3e1dc 100%); }
.byo-step__art svg { width: 100%; height: 100%; }
.byo-step__n { position: absolute; z-index: 2; left: calc(26 * var(--u)); top: calc(26 * var(--u)); display: grid; place-items: center; width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.14); font-size: calc(18 * var(--u)); font-weight: 700; color: #111; }
.byo-step h3 { margin: calc(16 * var(--u)) calc(6 * var(--u)) 0; font-size: calc(20 * var(--u)); font-weight: 700; letter-spacing: -0.01em; color: #111; }
.byo-step p { margin: calc(6 * var(--u)) calc(6 * var(--u)) 0; font-size: calc(14.4 * var(--u)); line-height: calc(21 * var(--u)); color: #5f5c57; }
.byo-step__go { margin: auto calc(6 * var(--u)) 0; padding-top: calc(14 * var(--u)); display: inline-flex; align-items: center; gap: calc(7 * var(--u)); align-self: flex-start; font-size: calc(14 * var(--u)); font-weight: 600; color: #111; text-decoration: underline; text-underline-offset: 4px; }
.byo-step__go .arr { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.byo-how__arr { display: grid; place-items: center; color: #2b2926; }
.byo-how__arr .arr { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.byo-need { display: grid; grid-template-columns: calc(520 * var(--u)) 1fr; gap: calc(48 * var(--u)); align-items: center; padding: calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: #f9f8f6; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.byo-need__ph { height: calc(290 * var(--u)); border-radius: calc(8 * var(--u)); }
.byo-need__list { display: grid; gap: calc(22 * var(--u)); }
.byo-need__list li { display: flex; align-items: center; gap: calc(18 * var(--u)); }
.byo-ic { flex: 0 0 auto; display: grid; place-items: center; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; border: 1.2px solid #2b2926; color: #111; }
.byo-ic svg { width: calc(21 * var(--u)); height: calc(21 * var(--u)); stroke-width: 1.5; }
.byo-need__list b { display: block; font-size: calc(17 * var(--u)); font-weight: 700; color: #111; }
.byo-need__list span:not(.byo-ic) { display: block; margin-top: calc(3 * var(--u)); font-size: calc(14.4 * var(--u)); color: #66635e; }
.byo-note { margin-top: calc(14 * var(--u)); font-size: calc(14.4 * var(--u)); color: #57544f; }
.byo-cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: calc(40 * var(--u)); min-height: calc(270 * var(--u)); margin-top: calc(56 * var(--u)); padding: calc(40 * var(--u)) calc(60 * var(--u)); overflow: hidden; background: #121110; }
.byo-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.byo-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,13,12,.94) 0%, rgba(14,13,12,.78) 42%, rgba(14,13,12,.35) 75%, rgba(14,13,12,.55) 100%); }
.byo-cta__copy, .byo-cta__btns { position: relative; z-index: 2; }
.byo-cta .mlabel { color: rgba(255,255,255,.66); }
.byo-cta .mh2 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #f6f5f2; font-size: calc(46 * var(--u)); line-height: calc(46 * var(--u)); }
.byo-cta__text { margin-top: calc(12 * var(--u)); max-width: calc(520 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); color: #dcd9d3; }
.byo-cta__btns { display: grid; gap: calc(14 * var(--u)); flex: 0 0 calc(300 * var(--u)); }
.byo-cta__btns .btn { width: 100%; height: calc(56 * var(--u)); font-size: calc(16 * var(--u)); border-radius: calc(8 * var(--u)); }
.byo-cta__btns .btn svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); stroke-width: 1.7; }
.byo-cta__ghost { background: rgba(255,255,255,.04); color: #fff; border: 1.4px solid rgba(255,255,255,.85); transition: background .25s; }
.byo-cta__ghost:hover { background: rgba(255,255,255,.14); }
.page-byo .foot, .page-byo .byo-cta + .foot { margin-top: 0; }

@media (max-width: 1179px) {
  .byo-hero { height: auto; }
  .byo-hero .mhero__media { left: auto; height: 250px; }
  .byo-hero .mhero__copy { top: auto; }
  .byo-hero .mh1 { font-size: 42px; line-height: 41px; }
  .byo-hero .mhero__sub { width: auto; }
  .byo-h2 { margin-bottom: 14px; font-size: 27px; line-height: 30px; }
  .byo-bring { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .byo-bring__ph { border-radius: 10px; }
  .byo-bring b { margin-top: 8px; font-size: 14px; }
  .byo-how { grid-template-columns: 1fr; gap: 0; }
  .byo-how__arr { height: 34px; }
  .byo-how__arr .arr { width: 20px; height: 20px; transform: rotate(90deg); }
  .byo-step { padding: 12px 12px 18px; border-radius: 12px; }
  .byo-step__ph { height: 190px; border-radius: 8px; }
  .byo-step__n { left: 22px; top: 22px; width: 38px; height: 38px; font-size: 17px; }
  .byo-step h3 { margin: 14px 4px 0; font-size: 19px; }
  .byo-step p { margin: 6px 4px 0; font-size: 15px; line-height: 22px; }
  .byo-step__go { margin: 0 4px; padding-top: 12px; font-size: 15px; gap: 8px; }
  .byo-step__go .arr { width: 14px; height: 14px; }
  .byo-need { grid-template-columns: 1fr; gap: 20px; padding: 12px 12px 20px; border-radius: 12px; }
  .byo-need__ph { height: 210px; }
  .byo-need__list { gap: 18px; padding: 0 4px; }
  .byo-need__list li { gap: 14px; }
  .byo-ic { width: 42px; height: 42px; }
  .byo-ic svg { width: 20px; height: 20px; }
  .byo-need__list b { font-size: 16px; }
  .byo-need__list span:not(.byo-ic) { font-size: 14.5px; line-height: 20px; }
  .byo-note { margin-top: 12px; font-size: 14.5px; line-height: 21px; }
  .byo-cta { flex-direction: column; align-items: stretch; gap: 22px; min-height: 0; margin-top: 40px; padding: 38px 16px 34px; }
  .byo-cta::after { background: linear-gradient(180deg, rgba(14,13,12,.9) 0%, rgba(14,13,12,.72) 100%); }
  .byo-cta .mh2 { font-size: 31px; line-height: 33px; }
  .byo-cta .mh2 br { display: none; }
  .byo-cta__text { margin-top: 10px; max-width: none; font-size: 15px; line-height: 22px; }
  .byo-cta__btns { flex: none; gap: 10px; }
  .byo-cta__btns .btn { height: 52px; font-size: 16px; }
  .byo-cta__btns .btn svg { width: 19px; height: 19px; }
}
@media (min-width: 640px) and (max-width: 1179px) {
  .byo-hero .mhero__media { height: 380px; }
  .byo-bring { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .byo-how { grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
  .byo-how__arr { display: none; }
  .byo-need { grid-template-columns: 1fr 1fr; }
  .byo-cta { padding: 44px 32px 40px; }
  .byo-cta__btns { grid-template-columns: 1fr 1fr; }
}