/* MMM Embroidery: Our Work, How It Works and Visit (src/pages/work.html, how.html, visit.html). Concepts C13, C14, C03 in the
   NOVA language. Desktop (1180px and up): sized in 1536-wide reference pixels times --u, like site.css. Phones and tablets:
   px with 16px side gutters, at the bottom of this file. Header, buttons, .eyebrow2, .h2md/.h2cta and the footer come from site.css. */

body.page-info { background: #f3f2ee; }
.page-info main { display: block; }

/* ---------- shared type + hero pieces ---------- */
.ih1 {
  font-family: "Inter", system-ui, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -0.012em;
  font-size: calc(66 * var(--u)); line-height: calc(62 * var(--u));
  background: linear-gradient(172deg, #050505 0%, #0b0b0b 60%, #2c2c2c 86%, #5a5856 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ih1 span { display: block; }
.ih1--xl { font-size: calc(108 * var(--u)); line-height: calc(100 * var(--u)); letter-spacing: -0.02em; white-space: nowrap; }
.ihero__sub { margin-top: calc(18 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); color: #45433f; }
.ihero__btns { display: flex; gap: calc(12 * var(--u)); margin-top: calc(26 * var(--u)); }
.isec { padding: 0 calc(57 * var(--u)); margin-top: calc(84 * var(--u)); }
.isec__head { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(24 * var(--u)); }
.isec__sub { margin-top: calc(12 * var(--u)); max-width: calc(620 * var(--u)); font-size: calc(15.4 * var(--u)); line-height: calc(23 * var(--u)); color: #5a5752; }
.isec .h2md { margin-top: calc(10 * var(--u)); }

/* ---------- privacy (src/pages/privacy.html, B8): one readable column ---------- */
.legal { max-width: calc(760 * var(--u)); padding: calc(34 * var(--u)) calc(57 * var(--u)) calc(90 * var(--u)); }
.legal .ih1 { margin-top: calc(12 * var(--u)); }
.legal__date { margin-top: calc(14 * var(--u)); font-size: calc(13 * var(--u)); color: #66635d; }
.legal__sec { margin-top: calc(40 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(25 * var(--u)); color: #2e2c29; }
.legal__sec h2 { font-family: var(--display); font-weight: 800; font-size: calc(22 * var(--u)); line-height: calc(28 * var(--u)); text-transform: uppercase; color: #111; }
.legal__sec p, .legal__sec ul { margin-top: calc(12 * var(--u)); }
.legal__sec ul { padding-left: calc(22 * var(--u)); list-style: disc; }
.legal__sec li + li { margin-top: calc(6 * var(--u)); }
.legal__sec a { color: #111; text-decoration: underline; text-underline-offset: 3px; }
.legal__btn { font: inherit; color: #111; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }   /* Pulse opt-out (D-017) */

/* colour reveal on any graded photo pair (graded <img> + <img class="is-color">) */
.cr { position: relative; overflow: hidden; }
.cr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s ease, transform 1s cubic-bezier(.2, .8, .2, 1); }
.cr img.is-color { opacity: 0; }
.cr:hover img.is-color, :focus-visible > .cr img.is-color, .cr:focus-visible img.is-color, .is-shown .cr img.is-color, .cr.is-shown img.is-color, a:hover > .cr img.is-color { opacity: 1; }

/* closing call to action (all three pages) */
.icta {
  position: relative; margin: calc(88 * var(--u)) calc(37 * var(--u)) calc(70 * var(--u)); height: calc(330 * var(--u));
  border-radius: calc(16 * var(--u)); overflow: hidden; background: linear-gradient(180deg, #f8f7f4 0%, #efede8 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 40px rgba(60, 50, 40, .06);
}
.icta__photo {
  position: absolute; top: 0; bottom: 0; right: 0; width: calc(760 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 16%, #000 38%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 16%, #000 38%);
}
.icta__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s ease; }
.icta__photo img.is-color { opacity: 0; }
.icta:hover .icta__photo img.is-color, .icta.is-shown .icta__photo img.is-color { opacity: 1; }
.icta__copy { position: absolute; z-index: 1; left: calc(56 * var(--u)); top: calc(56 * var(--u)); width: calc(760 * var(--u)); }
.icta .h2cta { margin-top: calc(12 * var(--u)); font-size: calc(54 * var(--u)); line-height: calc(56 * var(--u)); white-space: nowrap; }
.icta__text { margin-top: calc(16 * var(--u)); width: calc(520 * var(--u)); font-size: calc(15.6 * var(--u)); line-height: calc(24 * var(--u)); color: #4d4b47; }
.icta__btns { display: flex; gap: calc(12 * var(--u)); margin-top: calc(26 * var(--u)); }

/* =============================== OUR WORK (C13) =============================== */
.whero { position: relative; height: calc(372 * var(--u)); overflow: hidden; }
.whero__photo {
  position: absolute; top: 0; bottom: 0; right: 0; left: calc(560 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 12%, #000 34%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 12%, #000 34%);
}
.whero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: opacity .9s ease; }
.whero__photo img.is-color { opacity: 0; }
.whero:hover .whero__photo img.is-color, .whero.is-shown .whero__photo img.is-color { opacity: 1; }
.whero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,19,18,0) 60%, rgba(20,19,18,.28) 100%); pointer-events: none; }
.whero__copy { position: absolute; z-index: 2; left: calc(57 * var(--u)); top: calc(26 * var(--u)); width: calc(640 * var(--u)); }
.whero__copy .ih1 { margin-top: calc(12 * var(--u)); }
.whero__copy .ihero__sub { width: calc(470 * var(--u)); }
.whero__tag {
  position: absolute; z-index: 2; right: calc(57 * var(--u)); bottom: calc(26 * var(--u));
  font-family: var(--display); font-size: calc(12.4 * var(--u)); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.88);
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

/* filters */
.wf { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: calc(24 * var(--u)); padding: calc(30 * var(--u)) calc(57 * var(--u)) 0; }
.wf__groups { display: grid; gap: calc(10 * var(--u)); min-width: 0; }
.wf__row { display: flex; align-items: center; gap: calc(14 * var(--u)); min-width: 0; }
.wf__label { flex: 0 0 calc(52 * var(--u)); font-family: var(--display); font-size: calc(11.4 * var(--u)); letter-spacing: .14em; text-transform: uppercase; color: #66635d; }
.wf__chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); min-width: 0; }
.wchip {
  display: inline-flex; align-items: center; gap: calc(7 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(17 * var(--u));
  border-radius: 999px; background: #e9e7e2; color: #1d1c1a; font-size: calc(13.6 * var(--u)); font-weight: 500; white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s;
}
.wchip b { font-weight: 500; font-size: calc(11.5 * var(--u)); color: #66635d; }
.wchip:hover { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.wchip[aria-pressed="true"] { background: #111; color: #fff; }
.wchip[aria-pressed="true"] b { color: rgba(255,255,255,.62); }
.wchip.is-zero { opacity: .42; }
.wchip--all { margin-right: calc(8 * var(--u)); }
.wf__status { flex: 0 0 auto; display: flex; align-items: center; gap: calc(16 * var(--u)); padding-top: calc(8 * var(--u)); }
.wf__count { font-size: calc(14 * var(--u)); color: #57544f; white-space: nowrap; }
.wf__count b { font-family: "Inter", sans-serif; font-weight: 800; font-size: calc(22 * var(--u)); color: #111; margin-right: calc(2 * var(--u)); }
.wf__clear { font-size: calc(13.4 * var(--u)); text-decoration: underline; text-underline-offset: 3px; color: #111; }
.wf__clear[hidden] { display: none; }

/* grid: 5 columns, dense mosaic (tall 1x3, square 1x2, wide 2x3) */
.wg {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: calc(136 * var(--u)); grid-auto-flow: dense;
  gap: calc(8 * var(--u)); padding: calc(24 * var(--u)) calc(40 * var(--u)) 0;
}
.wt { position: relative; display: block; overflow: hidden; border-radius: calc(8 * var(--u)); background: #dcd9d2; grid-row: span 2; isolation: isolate; }
.wt--tall { grid-row: span 3; }
.wt--wide { grid-column: span 2; grid-row: span 3; }
.wt[hidden] { display: none; }
.wt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s ease, transform 1s cubic-bezier(.2, .8, .2, 1); }
.wt img.is-color { opacity: 0; }
.wt::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.62) 100%); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.wt__cap {
  position: absolute; z-index: 2; left: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: calc(14 * var(--u));
  display: grid; gap: calc(2 * var(--u)); color: #fff; opacity: 0; transform: translateY(calc(8 * var(--u))); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.wt__cap b { font-size: calc(14.4 * var(--u)); font-weight: 600; line-height: 1.25; }
.wt__cap span { font-family: var(--display); font-size: calc(11 * var(--u)); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.wt:hover img, .wt:focus-visible img { transform: scale(1.045); }
.wt:hover img.is-color, .wt:focus-visible img.is-color, .wt.is-shown img.is-color { opacity: 1; }
.wt:hover::after, .wt:focus-visible::after, .wt.is-shown::after { opacity: 1; }
.wt:hover .wt__cap, .wt:focus-visible .wt__cap, .wt.is-shown .wt__cap { opacity: 1; transform: none; }
.wt:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .wt.is-in { animation: wt-in .55s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
}
@keyframes wt-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.wg__empty { margin: calc(24 * var(--u)) calc(40 * var(--u)) 0; padding: calc(40 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff; text-align: center; display: grid; gap: calc(18 * var(--u)); justify-items: center; }
.wg__empty[hidden] { display: none; }
.wg__empty p { font-size: calc(16 * var(--u)); color: #57544f; }
.wg__empty b { color: #111; }
.wg__emptybtns { display: flex; gap: calc(10 * var(--u)); }
.wg__note { margin: calc(18 * var(--u)) calc(57 * var(--u)) 0; font-size: calc(12.6 * var(--u)); line-height: 1.5; color: #66635d; }

/* lightbox */
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: hidden; }
.lb::backdrop { background: rgba(14, 14, 13, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lb[open] { display: grid; place-items: center; }
.lb__box { position: relative; width: min(1180px, calc(100vw - 150px)); max-height: calc(100dvh - 48px); display: grid; }
.lb__fig { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; max-height: calc(100dvh - 48px); border-radius: 16px; overflow: hidden; background: #f6f5f1; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.lb__img { min-height: 0; display: grid; place-items: center; background: #161615; }
.lb__img img { display: block; max-width: 100%; max-height: calc(100dvh - 48px - 96px); width: auto; height: auto; object-fit: contain; }
.lb__cap { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; }
.lb__txt { display: grid; gap: 3px; min-width: 0; }
.lb__txt b { font-size: 18px; font-weight: 700; color: #111; }
.lb__txt span { font-family: var(--display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #66635d; }
.lb__acts { display: flex; gap: 10px; flex: 0 0 auto; }
.lb__acts .btn { height: 48px; padding: 0 20px; font-size: 15px; border-radius: 8px; }
.lb__x { position: absolute; z-index: 3; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.94); font-size: 26px; line-height: 1; color: #111; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.lb__nav { position: absolute; z-index: 3; top: calc(50% - 60px); width: 48px; height: 48px; }
.lb__nav .arr { width: 18px; height: 18px; }
.lb__nav--prev { left: -66px; }
.lb__nav--next { right: -66px; }
.lb__n { position: absolute; left: 0; right: 0; top: calc(100% + 10px); text-align: center; font-size: 13px; color: rgba(255,255,255,.7); }
html.is-lb-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .lb[open] .lb__fig { animation: lb-in .4s cubic-bezier(.16, 1, .3, 1); }
  .lb__img img.is-swap { animation: lb-swap .35s ease; }
}
@keyframes lb-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes lb-swap { from { opacity: .2; } to { opacity: 1; } }

/* =============================== HOW IT WORKS (C14) =============================== */
.hhero { position: relative; height: calc(370 * var(--u)); }
.hhero__copy { position: absolute; left: calc(57 * var(--u)); top: calc(34 * var(--u)); width: calc(600 * var(--u)); }
.hhero__copy .ih1 { margin-top: calc(12 * var(--u)); }
.hhero__copy .ihero__sub { width: calc(520 * var(--u)); }
.hhero__photo { position: absolute !important; left: calc(700 * var(--u)); right: calc(57 * var(--u)); top: calc(6 * var(--u)); height: calc(348 * var(--u)); border-radius: calc(16 * var(--u)); box-shadow: 0 18px 40px rgba(40, 32, 24, .14); }
.hhero__photo img { object-position: 50% 45%; }

/* steps */
.steps { list-style: none; margin: calc(34 * var(--u)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(22 * var(--u)); }
.step { position: relative; }
.step__n {
  position: relative; z-index: 1; display: grid; place-items: center; width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%;
  background: #111; color: #fff; font-family: "Inter", sans-serif; font-weight: 800; font-size: calc(17 * var(--u));
}
.step__line { position: absolute; top: calc(26 * var(--u)); left: calc(64 * var(--u)); right: calc(-10 * var(--u)); height: 1.5px; background: #cfcac2; transform-origin: 0 50%; }
.step:last-child .step__line { display: none; }
.step__ic { margin-top: calc(22 * var(--u)); width: calc(70 * var(--u)); height: calc(70 * var(--u)); border-radius: calc(16 * var(--u)); background: #fff; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 24px rgba(60,50,40,.06); }
.step__ic svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); stroke-width: 1.4; color: #151515; }
.step h3 { margin: calc(20 * var(--u)) 0 0; font-family: var(--display); font-weight: 700; font-size: calc(19 * var(--u)); text-transform: uppercase; letter-spacing: .01em; color: #111; }
.step p { margin-top: calc(8 * var(--u)); font-size: calc(14.4 * var(--u)); line-height: calc(21.5 * var(--u)); color: #5a5752; }
@media (prefers-reduced-motion: no-preference) {
  .js-steps .step { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i) * 140ms); }
  .js-steps .step__line { transform: scaleX(0); transition: transform .9s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(var(--i) * 140ms + 300ms); }
  .js-steps.is-in .step { opacity: 1; transform: none; }
  .js-steps.is-in .step__line { transform: none; }
}
.hstrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14 * var(--u)); margin-top: calc(46 * var(--u)); }
.hstrip figure { margin: 0; position: relative; height: calc(268 * var(--u)); border-radius: calc(14 * var(--u)); overflow: hidden; }
.hstrip figure .cr { position: absolute; inset: 0; }
.hstrip figcaption {
  position: absolute; z-index: 2; left: calc(18 * var(--u)); bottom: calc(16 * var(--u)); padding: calc(7 * var(--u)) calc(12 * var(--u));
  border-radius: 999px; background: rgba(20,19,18,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--display); font-size: calc(11.6 * var(--u)); letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.hstrip figcaption b { font-weight: 700; margin-right: calc(6 * var(--u)); }

/* artwork guide */
.art { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--u)); margin-top: calc(30 * var(--u)); }
.art__card { display: grid; grid-template-rows: auto 1fr; gap: calc(20 * var(--u)); padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); border-radius: calc(16 * var(--u)); background: #fbfaf8; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 30px rgba(60,50,40,.05); }
.art__head { display: grid; grid-template-columns: auto 1fr; gap: calc(16 * var(--u)); align-items: start; }
.art__ic { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(12 * var(--u)); border: 1.3px solid #1b1b1b; display: grid; place-items: center; }
.art__ic svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); stroke-width: 1.5; }
.art__head div b { display: block; font-family: "Inter", sans-serif; font-weight: 800; font-size: calc(22 * var(--u)); text-transform: uppercase; letter-spacing: -.005em; color: #111; }
.art__head div span { display: block; margin-top: calc(3 * var(--u)); font-size: calc(14.6 * var(--u)); color: #5a5752; }
.art__head p { grid-column: 2; margin-top: calc(2 * var(--u)); font-size: calc(13.6 * var(--u)); line-height: calc(20 * var(--u)); color: #66635d; }
.art__vis { position: relative; min-height: calc(210 * var(--u)); border-radius: calc(12 * var(--u)); background: linear-gradient(180deg, #efede8 0%, #e7e4de 100%); overflow: hidden; display: grid; place-items: center; }
.files { display: flex; gap: calc(14 * var(--u)); }
.file {
  position: relative; width: calc(66 * var(--u)); height: calc(84 * var(--u)); border-radius: calc(6 * var(--u)) calc(18 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
  display: grid; place-items: end center; padding-bottom: calc(14 * var(--u)); color: #fff; font-family: "Inter", sans-serif; font-weight: 800; font-size: calc(16 * var(--u)); letter-spacing: .02em;
  box-shadow: 0 10px 18px rgba(0,0,0,.14); transform: rotate(var(--r, 0deg));
}
.file::before { content: ""; position: absolute; top: 0; right: 0; width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 0 calc(18 * var(--u)) 0 calc(6 * var(--u)); background: rgba(255,255,255,.35); }
.file--ai { background: #b85c14; --r: -4deg; }
.file--eps { background: #cf3554; --r: 2deg; }
.file--svg { background: #2f6bd1; --r: -2deg; }
.file--pdf { background: #d33a2c; --r: 4deg; }
.sharp { display: flex; gap: calc(16 * var(--u)); align-items: center; }
.sharp figure { margin: 0; display: grid; gap: calc(8 * var(--u)); justify-items: center; }
.sharp svg { width: calc(120 * var(--u)); height: calc(120 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff; box-shadow: 0 8px 16px rgba(0,0,0,.08); }
.sharp figcaption { font-family: var(--display); font-size: calc(11 * var(--u)); letter-spacing: .12em; text-transform: uppercase; color: #66635d; }
.sharp .px rect { fill: #151515; stroke: none; }
.phone {
  position: relative; width: calc(132 * var(--u)); height: calc(196 * var(--u)); border-radius: calc(20 * var(--u)); padding: calc(7 * var(--u));
  background: #141414; box-shadow: 0 16px 30px rgba(0,0,0,.25); transform: rotate(-4deg);
}
.phone::before { content: ""; position: absolute; z-index: 2; top: calc(12 * var(--u)); left: 50%; width: calc(30 * var(--u)); height: calc(6 * var(--u)); border-radius: 99px; background: #141414; transform: translateX(-50%); }
.phone .cr { width: 100%; height: 100%; border-radius: calc(14 * var(--u)); }
.art__vis--photo { place-items: center; }

/* three doors */
.doors2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--u)); margin-top: calc(30 * var(--u)); }
.door2 { position: relative; display: grid; grid-template-rows: calc(210 * var(--u)) auto; border-radius: calc(16 * var(--u)); overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.door2:hover, .door2:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(30, 25, 20, .16); }
.door2__img { position: relative; overflow: hidden; background: linear-gradient(180deg, #ecebe7, #e2dfd9); }
.door2__img .cr { position: absolute; inset: 0; }
.door2__stack img { position: absolute; height: 80%; bottom: 6%; filter: drop-shadow(0 10px 12px rgba(0,0,0,.18)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.door2__stack img:nth-child(1) { left: 8%; transform: rotate(-8deg); }
.door2__stack img:nth-child(2) { left: 33%; bottom: 3%; height: 86%; z-index: 1; }
.door2__stack img:nth-child(3) { right: 6%; transform: rotate(7deg); }
.door2:hover .door2__stack img:nth-child(1) { transform: rotate(-12deg) translateX(-6px); }
.door2:hover .door2__stack img:nth-child(3) { transform: rotate(11deg) translateX(6px); }
.door2__txt { display: grid; gap: calc(6 * var(--u)); padding: calc(20 * var(--u)) calc(70 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u)); }
.door2__txt b { font-family: "Inter", sans-serif; font-weight: 800; font-size: calc(21 * var(--u)); text-transform: uppercase; letter-spacing: -.005em; color: #111; }
.door2__txt span { font-size: calc(14.6 * var(--u)); line-height: calc(21 * var(--u)); color: #57544f; }
.door2__go { position: absolute; right: calc(20 * var(--u)); bottom: calc(22 * var(--u)); width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; transition: transform .3s; }
.door2__go .arr { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.door2:hover .door2__go { transform: translateX(3px); }

/* good to know */
.know { display: grid; grid-template-columns: calc(560 * var(--u)) minmax(0, 1fr); gap: calc(44 * var(--u)); align-items: start; }
.know__photo { position: sticky; top: calc(24 * var(--u)); height: calc(600 * var(--u)); border-radius: calc(16 * var(--u)); }
.know__photo-tag { position: absolute; z-index: 2; left: calc(18 * var(--u)); bottom: calc(16 * var(--u)); padding: calc(7 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: rgba(20,19,18,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--display); font-size: calc(11.6 * var(--u)); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.faq { margin-top: calc(26 * var(--u)); display: grid; gap: calc(10 * var(--u)); }
.faq details { border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .3s; }
.faq details[open] { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 30px rgba(60,50,40,.07); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: calc(16 * var(--u)); padding: calc(19 * var(--u)) calc(22 * var(--u)); cursor: pointer; font-size: calc(16.4 * var(--u)); font-weight: 600; color: #111; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: 0 0 auto; position: relative; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: #f1efea; transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .3s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(11 * var(--u)); height: 1.6px; background: #111; transform: translate(-50%, -50%); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s; }
.faq details[open] summary i { background: #111; }
.faq details[open] summary i::before, .faq details[open] summary i::after { background: #fff; }
.faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq summary:focus-visible { outline: 2px solid #111; outline-offset: 2px; border-radius: calc(12 * var(--u)); }
.faq__a { padding: 0 calc(22 * var(--u)) calc(20 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(23.5 * var(--u)); color: #4d4b47; }
.faq__a p + p { margin-top: calc(10 * var(--u)); }
.faq__a a { color: #111; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .faq__a { animation: faq-in .4s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* =============================== VISIT (C03) =============================== */
.vhero { position: relative; height: calc(548 * var(--u)); }
.vhero__copy { position: absolute; z-index: 2; left: calc(57 * var(--u)); top: calc(96 * var(--u)); width: calc(560 * var(--u)); }
.vhero__copy .ih1 { margin-top: calc(14 * var(--u)); font-size: calc(92 * var(--u)); line-height: calc(84 * var(--u)); }
.vhero__copy .ihero__sub { font-size: calc(19 * var(--u)); line-height: calc(28 * var(--u)); width: calc(460 * var(--u)); }
.vhero__addr { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(26 * var(--u)); font-size: calc(15 * var(--u)); color: #2b2a27; }
.vhero__addr svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: #111; stroke-width: 1.6; flex: 0 0 auto; }
.vhero__photo {
  position: absolute; top: 0; bottom: 0; right: 0; left: calc(640 * var(--u)); overflow: hidden;
  border-radius: calc(18 * var(--u)) 0 0 calc(18 * var(--u));
}
.vhero__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  filter: saturate(calc(.22 + .78 * var(--p, 0))) sepia(calc(.2 * (1 - var(--p, 0)))) brightness(calc(1.03 - .03 * var(--p, 0)));
  transition: filter .5s ease;
}
.vhero__photo:hover img { filter: none; }
.vhero__badge {
  position: absolute; left: calc(26 * var(--u)); top: calc(24 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u)); border-radius: 999px;
  background: rgba(255,255,255,.92); box-shadow: 0 8px 20px rgba(0,0,0,.15); font-size: calc(13.6 * var(--u)); font-weight: 600; color: #111;
}
.vhero__badge i { width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-style: normal; font-family: "Inter", sans-serif; font-weight: 800; font-size: calc(13 * var(--u)); }

/* contact cards */
.vcards { position: relative; z-index: 3; display: grid; grid-template-columns: 1.65fr 1fr 1fr 1fr; gap: calc(14 * var(--u)); margin: calc(-62 * var(--u)) calc(57 * var(--u)) 0; }
.vcard {
  position: relative; display: grid; align-content: start; gap: calc(6 * var(--u)); min-height: calc(176 * var(--u)); padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u));
  border-radius: calc(16 * var(--u)); background: #fbfaf8; border: 1px solid #e7e3dc; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 40px rgba(60,50,40,.08);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
a.vcard:hover, a.vcard:focus-visible { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 22px 44px rgba(60,50,40,.14); }
.vcard__ic { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #111; color: #fff; margin-bottom: calc(10 * var(--u)); }
.vcard__ic svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); stroke-width: 1.7; }
.vcard__k { font-family: var(--display); font-size: calc(11.6 * var(--u)); letter-spacing: .14em; text-transform: uppercase; color: #66635d; }
.vcard__v { font-family: "Inter", sans-serif; font-weight: 800; font-size: calc(25 * var(--u)); letter-spacing: -.01em; color: #111; white-space: nowrap; }
.vcard__d { font-size: calc(13.6 * var(--u)); line-height: calc(19.5 * var(--u)); color: #66635d; }
.vcard__go { position: absolute; right: calc(20 * var(--u)); top: calc(24 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: #fff; border: 1px solid #e3dfd8; display: grid; place-items: center; color: #111; transition: transform .3s; }
.vcard__go .arr { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
a.vcard:hover .vcard__go { transform: translateX(3px); }
.vcard--addr { grid-template-columns: auto 1fr; column-gap: calc(16 * var(--u)); }
.vcard--addr .vcard__ic { grid-row: span 3; margin: 0; }
.vcard--addr address { font-style: normal; font-family: "Inter", sans-serif; font-weight: 800; font-size: calc(22 * var(--u)); line-height: calc(27 * var(--u)); letter-spacing: -.01em; color: #111; }
.vcard__hours { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13.6 * var(--u)); color: #57544f; }
.vcard__hours svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 1.6; }
.vcard__mail { grid-column: 2; color: #2e2c29; text-decoration: underline; text-underline-offset: 3px; min-height: 24px; }   /* B6: the shop email */
.vcard__btns { grid-column: 1 / -1; display: flex; gap: calc(10 * var(--u)); margin-top: calc(14 * var(--u)); }
.vcard__btns .btn { height: calc(44 * var(--u)); padding: 0 calc(18 * var(--u)); width: auto; font-size: calc(14 * var(--u)); border-radius: calc(8 * var(--u)); }
.vcard__btns .btn svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 1.6; }
.btn--line { background: #fff; color: #111; border: 1px solid #d9d4cc; }

/* finding the shop (dark panel; a link out to Google Maps, no embedded map) */
.vfind { display: grid; grid-template-columns: calc(560 * var(--u)) minmax(0, 1fr); border-radius: calc(18 * var(--u)); overflow: hidden; background: #121211; color: #f3f2ee; }
.vfind__map { position: relative; min-height: calc(330 * var(--u)); background: radial-gradient(ellipse 70% 70% at 50% 46%, #2a2927 0%, #171716 70%); display: grid; place-items: center; }
.vfind__map svg.grid { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255,255,255,.07); stroke-width: 1; }
.vfind__pin { position: relative; display: grid; justify-items: center; gap: calc(14 * var(--u)); text-align: center; }
.vfind__pin span.dot { position: relative; width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; background: #f3f2ee; color: #111; display: grid; place-items: center; }
.vfind__pin span.dot svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); stroke-width: 1.7; }
.vfind__pin span.dot::before, .vfind__pin span.dot::after { content: ""; position: absolute; inset: calc(-14 * var(--u)); border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }
.vfind__pin span.dot::after { inset: calc(-32 * var(--u)); border-color: rgba(255,255,255,.12); }
@media (prefers-reduced-motion: no-preference) {
  .vfind__pin span.dot::before { animation: ping 2.6s ease-out infinite; }
}
@keyframes ping { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.vfind__pin b { margin-top: calc(14 * var(--u)); font-family: "Inter", sans-serif; font-weight: 800; font-size: calc(22 * var(--u)); text-transform: uppercase; letter-spacing: .01em; }
.vfind__pin small { font-size: calc(14 * var(--u)); color: rgba(243,242,238,.7); }
.vfind__copy { padding: calc(44 * var(--u)) calc(52 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u)); }
.vfind__copy .eyebrow2 { color: rgba(255,255,255,.6); }
.vfind__copy .h2md { background: none; color: #f6f5f2; -webkit-background-clip: border-box; background-clip: border-box; }
.vfind ol { list-style: none; margin: calc(22 * var(--u)) 0 0; padding: 0; display: grid; gap: calc(14 * var(--u)); counter-reset: f; }
.vfind li { position: relative; padding-left: calc(46 * var(--u)); font-size: calc(15.4 * var(--u)); line-height: calc(23 * var(--u)); color: #d9d6cf; counter-increment: f; }
.vfind li::before { content: counter(f); position: absolute; left: 0; top: calc(-2 * var(--u)); width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; font-size: calc(12.6 * var(--u)); font-weight: 700; color: #fff; }
.vfind li b { color: #fff; font-weight: 600; }
.vfind__btns { display: flex; gap: calc(10 * var(--u)); margin-top: calc(28 * var(--u)); }
.vfind__btns .btn--light { background: #fff; color: #111; }
.vfind__btns .btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); box-shadow: none; }

/* what to bring */
.bring { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(14 * var(--u)); margin-top: calc(30 * var(--u)); }
.bring__card { border-radius: calc(16 * var(--u)); background: #fbfaf8; border: 1px solid #ebe7e0; overflow: hidden; }
.bring__vis { position: relative; height: calc(196 * var(--u)); background: linear-gradient(180deg, #efede8 0%, #e6e3dd 100%); display: grid; place-items: center; overflow: hidden; }
.bring__vis svg.ill { width: calc(150 * var(--u)); height: calc(150 * var(--u)); color: #1a1a1a; stroke-width: 1.3; }
.bring__vis .fan img { position: absolute; height: 76%; bottom: 6%; filter: drop-shadow(0 10px 12px rgba(0,0,0,.18)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.bring__vis .fan img:nth-child(1) { left: 10%; transform: rotate(-9deg); }
.bring__vis .fan img:nth-child(2) { left: 31%; bottom: 3%; height: 82%; z-index: 1; }
.bring__vis .fan img:nth-child(3) { right: 8%; transform: rotate(8deg); }
.bring__card:hover .fan img:nth-child(1) { transform: rotate(-13deg) translateX(-5px); }
.bring__card:hover .fan img:nth-child(3) { transform: rotate(12deg) translateX(5px); }
.bring__vis .own img { position: absolute; filter: drop-shadow(0 10px 12px rgba(0,0,0,.18)); }
.bring__vis .own img:nth-child(1) { height: 56%; left: 9%; bottom: 14%; transform: rotate(-6deg); }
.bring__vis .own img:nth-child(2) { height: 70%; right: 10%; bottom: 8%; }
.bring__txt { padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u)); }
.bring__txt b { display: block; font-family: "Inter", sans-serif; font-weight: 800; font-size: calc(18 * var(--u)); text-transform: uppercase; letter-spacing: -.005em; color: #111; }
.bring__txt span { display: block; margin-top: calc(6 * var(--u)); font-size: calc(14.2 * var(--u)); line-height: calc(21 * var(--u)); color: #5a5752; }

/* inside the shop */
.vshop { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: calc(12 * var(--u)); margin-top: calc(30 * var(--u)); }
.vshop a { position: relative; display: block; height: calc(300 * var(--u)); border-radius: calc(14 * var(--u)); overflow: hidden; }
.vshop a .cr { position: absolute; inset: 0; }
.vshop a:hover .cr img { transform: scale(1.04); }
.vshop span.tag { position: absolute; z-index: 2; left: calc(16 * var(--u)); bottom: calc(14 * var(--u)); padding: calc(7 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: rgba(20,19,18,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--display); font-size: calc(11.6 * var(--u)); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.pill--line.pill--big { margin-right: 0; }

/* =============================== PHONES + TABLETS =============================== */
@media (max-width: 1179px) {
  .ih1 { font-size: 44px; line-height: 42px; }
  .ih1--xl { font-size: 64px; line-height: 58px; white-space: normal; }
  .ihero__sub { font-size: 16px; line-height: 24px; margin-top: 14px; }
  .ihero__btns, .icta__btns { flex-wrap: wrap; gap: 10px; margin-top: 20px; }
  .ihero__btns .btn, .icta__btns .btn { flex: 1 1 auto; }
  .isec { padding: 0 16px; margin-top: 56px; }
  .isec__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .isec__sub { font-size: 15px; line-height: 22px; max-width: none; }
  .isec .h2md { margin-top: 8px; }
  .legal { max-width: none; padding: 24px 16px 60px; }
  .legal__date { font-size: 13px; margin-top: 12px; }
  .legal__sec { margin-top: 32px; font-size: 16px; line-height: 25px; }
  .legal__sec h2 { font-size: 20px; line-height: 26px; }
  .legal__sec p, .legal__sec ul { margin-top: 10px; }
  .legal__sec ul { padding-left: 22px; }

  .icta { height: auto; margin: 56px 16px 44px; border-radius: 14px; display: flex; flex-direction: column; }
  .icta__photo { position: relative; order: 2; width: 100%; height: 210px; -webkit-mask-image: none; mask-image: none; }
  .icta__copy { position: relative; left: auto; top: auto; width: auto; padding: 28px 18px 24px; }
  .icta .h2cta { font-size: 36px; line-height: 38px; margin-top: 8px; white-space: normal; }
  .icta__text { width: auto; font-size: 15px; line-height: 23px; margin-top: 12px; }

  /* our work */
  .whero { height: auto; display: flex; flex-direction: column; }
  .whero__copy { position: relative; left: auto; top: auto; width: auto; padding: 14px 16px 0; }
  .whero__copy .ihero__sub { width: auto; }
  .whero__photo { position: relative; left: auto; order: 2; height: 190px; margin: 22px 16px 0; border-radius: 12px; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
  .whero__tag { right: 30px; bottom: 14px; font-size: 11px; }

  .wf { flex-direction: column; gap: 10px; padding: 26px 0 0; }
  .wf__groups { width: 100%; gap: 8px; }
  .wf__row { gap: 10px; padding-left: 16px; }
  .wf__label { flex: 0 0 38px; font-size: 10.5px; }
  .wf__chips { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-right: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .wf__chips::-webkit-scrollbar { display: none; }
  .wchip { height: 40px; padding: 0 15px; font-size: 14px; gap: 6px; }
  .wchip b { font-size: 12px; }
  .wchip--all { margin-right: 4px; }
  .wf__status { padding: 4px 16px 0; gap: 14px; }
  .wf__count { font-size: 14px; }
  .wf__count b { font-size: 20px; }
  .wf__clear { font-size: 14px; padding: 6px 0; }

  .wg { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc((100vw - 56px) / 4); gap: 8px; padding: 14px 16px 0; }
  .wt { border-radius: 8px; }
  .wt--wide { grid-column: span 1; grid-row: span 2; }   /* squares on phones and tablets: the columns never leave holes */
  .wt__cap { left: 12px; right: 12px; bottom: 10px; }
  .wt__cap b { font-size: 13px; }
  .wt__cap span { font-size: 10px; }
  .wg__empty { margin: 14px 16px 0; padding: 26px 18px; border-radius: 12px; gap: 14px; }
  .wg__empty p { font-size: 15px; line-height: 1.45; }
  .wg__emptybtns { flex-wrap: wrap; justify-content: center; }
  .wg__note { margin: 14px 16px 0; font-size: 12.5px; }

  .lb__box { width: 100vw; max-height: 100dvh; }
  .lb__fig { border-radius: 0; max-height: 100dvh; height: 100dvh; grid-template-rows: minmax(0, 1fr) auto; }
  .lb__cap { flex: 0 0 auto; }
  .lb__img img { max-height: calc(100dvh - 240px); }
  .lb__cap { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px max(16px, var(--safe-r)) calc(16px + var(--safe-b)) max(16px, var(--safe-l)); }
  .lb__txt b { font-size: 16px; }
  .lb__acts { flex-direction: column; }
  .lb__acts .btn { width: 100%; flex: 0 0 auto; height: 48px; }
  .lb__nav { top: calc((100dvh - 240px) / 2 - 22px); width: 44px; height: 44px; }
  .lb__nav--prev { left: max(10px, var(--safe-l)); }
  .lb__nav--next { right: max(10px, var(--safe-r)); }
  .lb__n { top: 22px; left: 16px; right: auto; text-align: left; color: rgba(255,255,255,.85); text-shadow: 0 1px 4px rgba(0,0,0,.6); }

  /* how it works */
  .hhero { height: auto; display: flex; flex-direction: column; }
  .hhero__copy { position: relative; left: auto; top: auto; width: auto; padding: 14px 16px 0; }
  .hhero__copy .ihero__sub { width: auto; }
  .hhero__photo { position: relative !important; left: auto; right: auto; top: auto; height: 220px; margin: 22px 16px 0; border-radius: 12px; }
  .steps { grid-template-columns: 1fr; gap: 0; margin-top: 22px; }
  .step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding-bottom: 22px; }
  .step__n { width: 44px; height: 44px; font-size: 15px; grid-row: span 3; }
  .step__line { top: 50px; bottom: 4px; left: 21.5px; right: auto; width: 1.5px; height: auto; transform-origin: 50% 0; }
  .step:last-child .step__line { display: none; }
  .step__ic { display: none; }
  .step h3 { margin-top: 10px; font-size: 17px; }
  .step p { margin-top: 6px; font-size: 15px; line-height: 22px; }
  @media (prefers-reduced-motion: no-preference) {
    .js-steps .step__line { transform: scaleY(0); }
  }
  .hstrip { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .hstrip figure { height: 200px; border-radius: 12px; }
  .hstrip figcaption { left: 12px; bottom: 12px; font-size: 11px; padding: 6px 10px; }
  .art { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .art__card { padding: 18px; gap: 16px; border-radius: 14px; }
  .art__head { gap: 12px; }
  .art__ic { width: 42px; height: 42px; border-radius: 11px; }
  .art__ic svg { width: 20px; height: 20px; }
  .art__head div b { font-size: 20px; }
  .art__head div span { font-size: 14.5px; }
  .art__head p { font-size: 14px; line-height: 20px; }
  .art__vis { min-height: 180px; border-radius: 10px; }
  .files { gap: 12px; }
  .file { width: 56px; height: 72px; font-size: 14px; padding-bottom: 12px; border-radius: 5px 15px 5px 5px; }
  .file::before { width: 15px; height: 15px; border-radius: 0 15px 0 5px; }
  .sharp { gap: 14px; }
  .sharp svg { width: 104px; height: 104px; border-radius: 9px; }
  .sharp figcaption { font-size: 10.5px; }
  .phone { width: 112px; height: 168px; border-radius: 18px; padding: 6px; }
  .phone::before { top: 10px; width: 26px; height: 5px; }
  .phone .cr { border-radius: 12px; }
  .doors2 { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .door2 { grid-template-rows: 170px auto; border-radius: 14px; }
  .door2__txt { padding: 16px 64px 18px 18px; gap: 5px; }
  .door2__txt b { font-size: 19px; }
  .door2__txt span { font-size: 14.5px; line-height: 20px; }
  .door2__go { right: 16px; bottom: 18px; width: 36px; height: 36px; }
  .door2__go .arr { width: 14px; height: 14px; }
  .know { grid-template-columns: 1fr; gap: 0; }
  .know__photo { position: relative !important; top: auto; height: 220px; border-radius: 12px; order: 2; margin-top: 18px; }
  .know__photo-tag { left: 12px; bottom: 12px; font-size: 11px; padding: 6px 10px; }
  .faq { margin-top: 18px; gap: 8px; }
  .faq details { border-radius: 12px; }
  .faq summary { padding: 16px; font-size: 16px; gap: 12px; min-height: 56px; }
  .faq summary i { width: 30px; height: 30px; }
  .faq summary i::before, .faq summary i::after { width: 11px; }
  .faq__a { padding: 0 16px 16px; font-size: 15px; line-height: 23px; }
  .faq__a p + p { margin-top: 8px; }

  /* visit */
  .vhero { height: auto; display: flex; flex-direction: column; }
  .vhero__copy { position: relative; left: auto; top: auto; width: auto; padding: 14px 16px 0; }
  .vhero__copy .ih1 { font-size: 56px; line-height: 52px; margin-top: 10px; }
  .vhero__copy .ihero__sub { width: auto; font-size: 17px; line-height: 25px; }
  .vhero__addr { margin-top: 16px; font-size: 15px; gap: 8px; }
  .vhero__addr svg { width: 19px; height: 19px; }
  .vhero__photo { position: relative; left: auto; order: 2; height: 260px; margin: 22px 16px 0; border-radius: 14px; }
  .vhero__badge { left: 12px; top: auto; bottom: 12px; font-size: 13px; padding: 8px 14px 8px 9px; gap: 8px; }
  .vhero__badge i { width: 24px; height: 24px; font-size: 12px; }
  .vcards { grid-template-columns: 1fr; gap: 10px; margin: 12px 16px 0; }
  .vcard:not(.vcard--addr) { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-items: center; padding-right: 56px; }
  .vcard:not(.vcard--addr) .vcard__ic { grid-row: span 3; margin: 0; align-self: start; }
  .vcard { min-height: 0; padding: 16px; border-radius: 14px; gap: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 24px rgba(60,50,40,.06); }
  .vcard--addr { grid-column: 1 / -1; column-gap: 12px; }
  .vcard__ic { width: 36px; height: 36px; margin-bottom: 8px; }
  .vcard__ic svg { width: 17px; height: 17px; }
  .vcard__k { font-size: 10.5px; }
  .vcard__v { font-size: 21px; }
  .vcard__d { font-size: 13px; line-height: 18px; }
  .vcard__go { right: 16px; top: 50%; margin-top: -16px; width: 32px; height: 32px; }
  .vcard__go .arr { width: 13px; height: 13px; }
  .vcard--addr address { font-size: 19px; line-height: 24px; }
  .vcard__hours { font-size: 13.5px; gap: 7px; margin-top: 4px; }
  .vcard__hours svg { width: 15px; height: 15px; }
  .vcard__btns { flex-wrap: wrap; margin-top: 12px; gap: 8px; }
  .vcard__btns .btn { flex: 1 1 auto; height: 46px; font-size: 15px; padding: 0 14px; border-radius: 8px; }
  .vcard__btns .btn svg { width: 16px; height: 16px; }
  .vcard--start { grid-column: 1 / -1; }
  .vfind { grid-template-columns: 1fr; border-radius: 14px; }
  .vfind__map { min-height: 220px; }
  .vfind__pin span.dot { width: 56px; height: 56px; }
  .vfind__pin span.dot svg { width: 26px; height: 26px; }
  .vfind__pin b { font-size: 19px; margin-top: 10px; }
  .vfind__pin small { font-size: 13.5px; }
  .vfind__copy { padding: 24px 18px 24px; }
  .vfind ol { gap: 12px; margin-top: 16px; }
  .vfind li { padding-left: 40px; font-size: 15px; line-height: 22px; }
  .vfind li::before { width: 26px; height: 26px; font-size: 12px; }
  .vfind__btns { flex-wrap: wrap; gap: 8px; margin-top: 20px; }
  .vfind__btns .btn { flex: 1 1 auto; }
  .bring { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
  .bring__card { border-radius: 12px; }
  .bring__vis { height: 130px; }
  .bring__vis svg.ill { width: 96px; height: 96px; }
  .bring__txt { padding: 12px 12px 14px; }
  .bring__txt b { font-size: 14.5px; line-height: 1.2; }
  .bring__txt span { font-size: 13px; line-height: 18.5px; margin-top: 5px; }
  .vshop { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
  .vshop a { height: 150px; border-radius: 10px; }
  .vshop a:first-child { grid-column: 1 / -1; height: 200px; }
  .vshop span.tag { left: 10px; bottom: 10px; font-size: 10.5px; padding: 5px 9px; }
}
@media (min-width: 640px) and (max-width: 1179px) {
  .whero__copy, .hhero__copy, .vhero__copy { padding-left: 32px; padding-right: 32px; }
  .whero__photo, .hhero__photo, .vhero__photo { margin-left: 32px; margin-right: 32px; height: 320px; }
  .isec { padding: 0 32px; }
  .wf__row { padding-left: 32px; }
  .wf__status { padding-left: 32px; padding-right: 32px; }
  .wg { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: calc((100vw - 64px - 16px) / 3 / 2 - 4px); padding: 16px 32px 0; }
  .wg__note { margin-left: 32px; margin-right: 32px; }
  .icta { margin-left: 32px; margin-right: 32px; }
  .icta__photo { height: 300px; }
  .art, .doors2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vcards { grid-template-columns: repeat(3, 1fr); margin-left: 32px; margin-right: 32px; }
  .vcard:not(.vcard--addr) { grid-template-columns: 1fr; padding-right: 16px; align-items: start; }
  .vcard:not(.vcard--addr) .vcard__ic { grid-row: auto; margin-bottom: 8px; }
  .vcard__go { top: 16px; margin-top: 0; }
  .vcard--start { grid-column: auto; }
  .bring { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hstrip figure { height: 180px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .know { grid-template-columns: 1fr 1.3fr; gap: 28px; }
  .know__photo { order: 0; height: 480px; margin-top: 0; position: sticky !important; top: 20px; }
}

/* Our Work on touch screens: no hover, so every caption shows all the time (David 10/17) */
@media (hover: none) {
  .wt::after { opacity: 1; }
  .wt__cap { opacity: 1; transform: none; }
}

/* 10/22 mobile pass: on the narrowest phones the big heads scale with the screen (same face and weight), so "OUR WORK" stays on
   one line and "HOW ORDERING WORKS" on two instead of three */
@media (max-width: 400px) {
  .ih1 { font-size: min(44px, 11.2vw); line-height: .955; }
  .ih1--xl { font-size: min(64px, 15.8vw); line-height: .906; }
}