/* ==========================================================================
   Passport Photo Toronto — redesign design system
   Ported from the approved prototype (2a mobile / 3a desktop).
   Desktop layout >= 900px, mobile layout below.
   ========================================================================== */

:root {
  --navy: #2b4b8c;
  --navy-dark: #20386a;
  --gold: #f4c430;
  --gold-hover: #e5b41f;
  --on-gold: #1a1a1a;
  --page-bg: #f8f9fa;
  --card-bg: #fff;
  --tint: #e8eef7;
  --border: #e1e1e1;
  --border-soft: #e8eaf0;
  --divider: #eef0f5;
  --text: #333;
  --text-body: #555;
  --text-muted: #666;
  --text-dim: #888;
  --hero-grad: linear-gradient(150deg, #2b4b8c, #20386a);
  --shell: 1180px;
  --font-head: Montserrat, sans-serif;
  --font-body: 'Open Sans', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page-bg);
  font-family: var(--font-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); text-decoration: none; }
img { max-width: 100%; }

h1, h2, h3 { font-family: var(--font-head); color: var(--navy); margin: 0; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 40px; width: 100%; }

/* The prototype's 2a (mobile) and 3a (desktop) are different designs, not one
   reflowed layout. Blocks that exist in only one of them carry .m-only/.d-only;
   everything else is restyled at the breakpoint. */
.m-only { display: none !important; }
@media (max-width: 899px) {
  .d-only { display: none !important; }
  .m-only { display: revert !important; }
  .m-only.btn { display: inline-flex !important; }
  .chiplist.m-only, .trust.m-only { display: flex !important; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: scale(0.98); }
/* In the column-flex sections a bare button would stretch full-width; the
   design has it hug its label unless explicitly blocked. */
.btn:not(.btn-block) { align-self: flex-start; }
.btn-block { width: 100%; align-self: stretch; }
.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-gold:hover { background: var(--gold-hover); color: var(--on-gold); }
.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  font-size: 12.5px;
  padding: 12px 20px;
}
.btn-outline:hover { background: var(--tint); }
.btn-outline-light {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.5);
  font-size: 14px;
  padding: 17px 28px;
}
.btn-outline-light:hover { border-color: #fff; color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-lg { font-size: 14.5px; padding: 17px 30px; }

/* ---------- header ---------- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
  height: 76px;
  position: sticky;
  top: 0;
  z-index: 30;
}
.site-header .shell {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* The prototype's desktop frame is exactly 1440px with 44px gutters. Capping
     at that width keeps the design intact at 1440 and stops the logo drifting
     to the far edge of wider monitors while the content stays centred at 1180. */
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 44px;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { height: 36px; width: auto; }
.brand span {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--navy);
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  padding: 8px 11px;
  border-radius: 8px;
  border-bottom: 3px solid transparent;
}
.nav-links a:hover { background: #f0f3f9; }
.nav-links a.active { font-weight: 700; color: var(--navy); border-bottom-color: var(--gold); }
.header-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.header-phone {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--navy);
  padding: 6px 10px;
}

/* mobile drawer */
.drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(32, 56, 106, 0.55);
  z-index: 60;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 84%;
  max-width: 340px;
  background: #fff;
  z-index: 61;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px;
  gap: 6px;
}
body.drawer-open .drawer { transform: translateX(0); }
body.drawer-open .drawer-backdrop { display: block; }
body.drawer-open { overflow: hidden; }
.drawer a.drawer-link {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  padding: 13px 8px;
  border-bottom: 1px solid var(--divider);
}
.drawer-contact {
  margin-top: 18px;
  background: var(--page-bg);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--text-body);
}
.drawer-contact a { font-weight: 700; }
.drawer-close {
  align-self: flex-end;
  background: #f0f2f7;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 15px;
  color: #555;
}

/* ---------- hero ---------- */
.hero { background: var(--hero-grad); color: #fff; }
.hero .shell {
  padding: 72px 40px 80px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
}
.hero h1 {
  font-size: 52px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: pretty;
}
.hero p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
}
.hero-col { display: flex; flex-direction: column; gap: 20px; }
.hero-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
}
.hero-badge i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--gold);
  display: inline-block;
}
.hero-actions { display: flex; gap: 14px; padding-top: 6px; flex-wrap: wrap; }
.hero-art { position: relative; width: 100%; height: 420px; }
.hero-art img { position: absolute; border-radius: 6px; display: block; }
.hero-art .back {
  left: 6%;
  top: 30px;
  width: 46%;
  transform: rotate(-5deg);
  box-shadow: 0 20px 50px rgba(6, 14, 34, 0.55);
  animation: heroFloatA 7s ease-in-out infinite alternate;
}
.hero-art .front {
  right: 5%;
  top: 0;
  width: 50%;
  transform: rotate(4deg);
  box-shadow: 0 24px 56px rgba(6, 14, 34, 0.6);
  animation: heroFloatB 9s ease-in-out infinite alternate;
}
.hero-caption {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  margin-top: 16px;
}
@keyframes heroFloatA {
  from { transform: rotate(-5deg) translateY(0); }
  to { transform: rotate(-4.2deg) translateY(-9px); }
}
@keyframes heroFloatB {
  from { transform: rotate(4deg) translateY(-6px); }
  to { transform: rotate(4.8deg) translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art .back, .hero-art .front { animation: none; }
}

/* ---------- generic sections ---------- */
.band { background: #fff; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.band-b { background: #fff; border-bottom: 1px solid var(--border-soft); }
.section { padding: 64px 40px; display: flex; flex-direction: column; gap: 28px; }
.section h2 { font-size: 30px; font-weight: 800; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-head .sub { font-size: 15px; color: var(--text-muted); }
.center { text-align: center; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 28px 40px; }
.stat { display: flex; align-items: center; gap: 12px; }
/* The figure must never break mid-value ("10 / min", "7 / days"). */
.stat b { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--navy); white-space: nowrap; }
.stat span { font-size: 13px; color: var(--text-muted); line-height: 1.4; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
a.card:hover { border-color: var(--navy); box-shadow: 0 6px 18px rgba(43, 75, 140, 0.1); }
.card .name { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--text); }
.card .sub { font-size: 13.5px; color: var(--text-dim); }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { display: flex; flex-direction: column; gap: 10px; text-align: center; align-items: center; }
.step .n {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step .t { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--text); }
.step .b { font-size: 14px; color: var(--text-muted); line-height: 1.6; max-width: 280px; }

/* studio split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* Child selector, not descendant: .split also contains nested images (the
   blogTO press logo, the about page's sample card) that must keep their own
   sizing. A descendant selector force-cropped them to the panel height. */
.split > img { width: 100%; height: 340px; object-fit: cover; border-radius: 16px; display: block; }
.split p { margin: 0; font-size: 16px; color: var(--text-body); line-height: 1.7; }
/* Asymmetric variant (map / booker beside an info column). Kept as a class,
   not an inline style, so the mobile media query can still collapse it. */
.split-wide { grid-template-columns: 1.3fr 0.7fr; align-items: stretch; }
.press {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.press-top { display: flex; align-items: center; gap: 10px; }
.press-top img { height: 18px; width: auto; }
.press-top span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.press q { font-size: 13.5px; color: var(--text-body); line-height: 1.6; font-style: italic; quotes: none; }

/* pricing tiers */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tier {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tier.popular { border: 2px solid var(--gold); }
.tier .tag {
  align-self: flex-start;
  background: var(--gold);
  color: var(--on-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.tier .tname { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--text); }
.tier .price { font-family: var(--font-head); font-size: 36px; font-weight: 800; color: var(--navy); }
.tier .desc { font-size: 14px; color: var(--text-muted); line-height: 1.55; flex: 1; }
.note {
  background: var(--tint);
  border-radius: 12px;
  padding: 18px 24px;
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  text-align: center;
}

/* reviews */
.stars { color: var(--gold); letter-spacing: 2px; }
.review {
  background: var(--page-bg);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review .txt { font-size: 14px; line-height: 1.6; color: #444; }
.review .who { font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.review-masonry { columns: 2; column-gap: 16px; }
.review-masonry .rcard {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  break-inside: avoid;
  margin-bottom: 16px;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rating-big { display: flex; align-items: center; gap: 12px; }
.rating-big .num { font-family: var(--font-head); font-size: 40px; font-weight: 800; color: var(--text); }

/* area tiles */
.area-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.area-tile {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  height: 130px;
  background: #dde5f2;
  display: block;
}
.area-tile:hover { box-shadow: 0 8px 22px rgba(43, 75, 140, 0.25); }
.area-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.area-tile span {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(32, 56, 106, 0.85));
  display: flex;
  align-items: flex-end;
  padding: 12px;
  color: #fff;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
}
.area-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.area-link {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  padding: 18px;
  border-radius: 10px;
  display: block;
}
.area-link:hover { border-color: var(--navy); background: var(--tint); }

/* CTA banner */
.cta-band { background: var(--hero-grad); }
.cta-band .shell {
  padding: 56px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.cta-band .t { font-family: var(--font-head); font-size: 28px; font-weight: 800; color: #fff; }
.cta-band .s { font-size: 15px; color: rgba(255, 255, 255, 0.8); }

/* ---------- service / area detail ---------- */
.page { max-width: var(--shell); margin: 0 auto; padding: 48px 40px 72px; display: flex; flex-direction: column; gap: 40px; }
.page-narrow { max-width: 820px; }
.page-article { max-width: 880px; }
.breadcrumb { font-size: 13px; color: var(--text-dim); }
.detail { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
.detail-main { display: flex; flex-direction: column; gap: 24px; }
.detail-side { display: flex; flex-direction: column; gap: 20px; }
.detail h1 { font-size: 40px; font-weight: 800; line-height: 1.12; }
.detail .lede { margin: 0; font-size: 16px; color: var(--text-muted); line-height: 1.6; }

.panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Standalone, not scoped to .panel — it also heads the reviews, related-services
   and area "getting here" blocks, which sit outside any panel. */
.ptitle { font-family: var(--font-head); font-size: 17px; font-weight: 800; color: var(--text); }
.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.req {
  background: var(--page-bg);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: #444;
  line-height: 1.5;
}
/* gap + nowrap so a long label can never collide with the price; at mobile
   panel widths "Printed photos (×2)" ran straight into "$24.99". */
.price-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.price-row span:first-child { color: var(--text-muted); }
.price-row span:last-child { font-weight: 700; color: var(--navy); white-space: nowrap; }
.price-row.total { border-top: 1px solid #eee; padding-top: 12px; }
.price-row.total span:first-child { color: var(--text); font-weight: 700; }
.price-row.total span:last-child { font-weight: 800; }
.doc-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  border-bottom: 1px solid var(--divider);
  padding-bottom: 10px;
}
.doc-row .l { display: flex; flex-direction: column; gap: 1px; }
.doc-row .l b { color: var(--text); font-weight: 600; }
.doc-row .l i { font-size: 11.5px; color: var(--text-dim); font-style: normal; }
.doc-row .p { font-weight: 700; color: var(--navy); white-space: nowrap; }

.studio-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.studio-panel img { width: 100%; height: 210px; object-fit: cover; border-radius: 10px; display: block; }
.studio-panel .t { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--navy); }
.studio-panel p { margin: 0; font-size: 13.5px; color: var(--text-body); line-height: 1.65; }
.studio-panel p + p { margin-top: 10px; }

.sample-card {
  background: #fff;
  border-radius: 16px;
  padding: 14px 14px 18px;
  box-shadow: 0 16px 44px rgba(22, 21, 15, 0.14);
}
.sample-card img { width: 100%; border-radius: 8px; display: block; }
.sample-card .cap { font-size: 12.5px; color: var(--text-dim); text-align: center; padding-top: 10px; }

.side-cta {
  background: var(--hero-grad);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.side-cta .t { font-family: var(--font-head); font-size: 19px; font-weight: 800; color: #fff; line-height: 1.3; }
.side-cta .s { font-size: 13.5px; color: rgba(255, 255, 255, 0.8); line-height: 1.55; }

.chiplist { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border: 1px solid #cdd6e6;
  background: #fff;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 999px;
}
.chip:hover { background: var(--tint); }

.map-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.map-card .frame { height: 220px; background: var(--tint); }
.map-card iframe { border: 0; width: 100%; height: 100%; }
.map-card .body { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.map-card .addr { font-family: var(--font-head); font-size: 14.5px; font-weight: 800; color: var(--text); }
.map-card .transit { font-size: 13px; color: var(--text-muted); }
/* inline Square booker (scheduling page) */
.booker {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  min-height: 780px;
}
.booker iframe { border: 0; width: 100%; height: 100%; min-height: 780px; display: block; }

.map-box { border-radius: 14px; overflow: hidden; background: var(--tint); }
.map-box iframe { border: 0; width: 100%; height: 100%; display: block; }

/* service hub */
.cat { display: flex; flex-direction: column; gap: 16px; }
.cat h2 {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cat-items { display: flex; flex-wrap: wrap; gap: 12px; }
.svc-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 240px;
  max-width: 340px;
}
.svc-card:hover { border-color: var(--navy); box-shadow: 0 6px 16px rgba(43, 75, 140, 0.1); }
.svc-card .n { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--navy); }
.svc-card .s { font-size: 12.5px; color: var(--text-dim); }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text);
}
.faq-q .icon { color: var(--navy); font-size: 20px; flex-shrink: 0; }
.faq-a { padding: 0 24px 20px; font-size: 14.5px; color: var(--text-body); line-height: 1.65; display: none; }
.faq-item.open .faq-a { display: block; }

/* info blocks */
.info-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.field { display: flex; flex-direction: column; gap: 3px; }
.field .lbl {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.field .val { font-size: 15px; font-weight: 700; color: var(--text); }
.field .txt { font-size: 14px; color: #444; line-height: 1.6; }

/* samples */
.sample-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sample-tile { background: #fff; border-radius: 14px; padding: 12px 12px 14px; box-shadow: 0 8px 24px rgba(22, 21, 15, 0.08); }
.sample-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.sample-tile .cap { font-size: 12.5px; color: var(--text-dim); text-align: center; padding-top: 10px; }

/* blog */
.post-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.post-card:hover { box-shadow: 0 10px 28px rgba(43, 75, 140, 0.12); }
.post-card .thumb { height: 200px; background: #eef2f9; overflow: hidden; }
.post-card .thumb img { height: 100%; width: 100%; object-fit: cover; display: block; }
.post-card .body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.post-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; }
.badge { background: var(--tint); color: var(--navy); font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.post-card .title { font-family: var(--font-head); font-size: 19px; font-weight: 800; color: var(--text); line-height: 1.3; }
.post-card .excerpt { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

.article-hero { height: 280px; background: #eef2f9; border-radius: 14px; overflow: hidden; }
.article-hero img { height: 100%; width: 100%; object-fit: cover; display: block; }
.article-badge {
  align-self: flex-start;
  background: var(--gold);
  color: #1a2a5e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}
.article-body {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.article-body h2 {
  font-size: 21px;
  font-weight: 800;
  color: var(--navy);
  border-bottom: 2px solid var(--gold);
  padding: 12px 0 6px;
}
.article-body p { margin: 0; font-size: 15px; color: #444; line-height: 1.8; }
.article-body ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.article-body li { font-size: 14.5px; color: #444; line-height: 1.7; }
.alert { border-radius: 8px; padding: 16px 20px; font-size: 14px; color: #444; line-height: 1.7; border-left: 4px solid; }
.alert-warning { background: #fff8e1; border-color: #f59e0b; }
.alert-info { background: #e8f0fe; border-color: var(--navy); }
.alert-success { background: #e8f5e9; border-color: #2e7d32; }
.article-table { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; overflow-x: auto; }
.article-table table { width: 100%; border-collapse: collapse; }
.article-table th {
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  text-align: left;
}
.article-table td { font-size: 13px; color: #444; padding: 10px 14px; line-height: 1.5; border-top: 1px solid var(--divider); }
.article-cta {
  background: var(--hero-grad);
  border-radius: 16px;
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 10px;
}
.article-cta .t { font-family: var(--font-head); font-size: 21px; font-weight: 800; color: #fff; }
.article-cta .s { font-size: 14px; color: rgba(255, 255, 255, 0.8); line-height: 1.55; }

/* misc pages */
.policy {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14.5px;
  color: var(--text-body);
  line-height: 1.7;
}
.policy strong { color: var(--text); }
.pay-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}
.pay-card .big { font-family: var(--font-head); font-size: 42px; font-weight: 800; color: var(--navy); }
.sitemap-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
.sitemap-col { display: flex; flex-direction: column; gap: 10px; }
.sitemap-col .h {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sitemap-col a { font-size: 14px; color: var(--navy); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-dark); color: rgba(255, 255, 255, 0.75); }
.site-footer .shell {
  padding: 56px 40px 40px;
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1.2fr 0.9fr;
  gap: 44px;
}
.site-footer .col { display: flex; flex-direction: column; gap: 12px; }
.site-footer .brand-col { gap: 14px; }
/* align-self keeps the flex column from stretching the logo to full width. */
.site-footer img.flogo { height: 44px; width: auto; align-self: flex-start; object-fit: contain; }
.site-footer .blurb { font-size: 13.5px; line-height: 1.65; }
.site-footer h3 {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.site-footer .links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.site-footer a { font-size: 13px; color: rgba(255, 255, 255, 0.75); }
.site-footer a:hover { color: var(--gold); }
.site-footer .ig { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--gold); }
.site-footer .ig:hover { color: var(--gold); }
.site-footer .contact-line { font-size: 13px; line-height: 1.6; }
.site-footer .bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  padding: 18px;
  font-size: 12.5px;
}

/* ---------- booking modal ---------- */
.book-overlay { position: fixed; inset: 0; z-index: 80; display: none; }
body.book-open .book-overlay { display: block; }
body.book-open { overflow: hidden; }
.book-backdrop { position: absolute; inset: 0; background: rgba(32, 56, 106, 0.55); }
.book-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  height: 780px;
  max-height: 92%;
  background: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.35);
}
.book-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 12px;
  flex-shrink: 0;
}
.book-head .kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.book-head .t { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--navy); }
.book-close {
  border: none;
  cursor: pointer;
  background: #f0f2f7;
  color: #555;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 15px;
}
.book-frame { flex: 1; overflow: hidden; background: var(--page-bg); }
.book-frame iframe { border: 0; width: 100%; height: 100%; background: #fff; display: block; }

/* sticky mobile bar */
.sticky-bar { display: none; }

/* ==========================================================================
   Mobile — below 900px
   ========================================================================== */
@media (max-width: 899px) {
  .shell { padding: 0 20px; }
  .site-header .shell { padding: 0 18px; }
  .nav-links, .header-phone, .header-right .btn { display: none; }
  .hamburger { display: block; }

  .hero .shell { grid-template-columns: 1fr; gap: 32px; padding: 44px 20px 52px; }
  .hero h1 { font-size: 32px; }
  .hero p { font-size: 16px; }
  .hero-art { height: 260px; }
  .hero-actions .btn { flex: 1 1 100%; }

  .section { padding: 44px 20px; gap: 22px; }
  .section h2 { font-size: 24px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }

  .stats { grid-template-columns: 1fr 1fr; gap: 18px; padding: 22px 20px; }
  /* Two columns leaves ~160px per stat — not enough for "acceptance
     guaranteed or free retake" beside a 26px figure. */
  @media (max-width: 560px) {
    .stats { grid-template-columns: 1fr; gap: 14px; }
  }
  .grid-3, .grid-2, .steps, .tiers, .sample-grid { grid-template-columns: 1fr; }
  .split, .split-wide { grid-template-columns: 1fr; gap: 24px; }
  .split > img { height: 220px; }
  .booker, .booker iframe { min-height: 640px; }
  .area-tiles { grid-template-columns: 1fr 1fr; }
  .area-grid { grid-template-columns: 1fr 1fr; }
  .review-masonry { columns: 1; }
  .sitemap-cols { grid-template-columns: 1fr; gap: 24px; }

  .cta-band .shell { flex-direction: column; align-items: flex-start; padding: 40px 20px; gap: 18px; }
  .cta-band .t { font-size: 22px; }

  .page { padding: 28px 20px 40px; gap: 28px; }
  .detail h1 { font-size: 28px; }

  /* Approved mobile section order: H1 → sample → requirements → pricing →
     studio → reviews → CTA → related → map. Flattening both columns into one
     flex context lets the sidebar blocks interleave with the main ones. */
  /* The desktop grid uses `align-items: start`; reset it when this becomes a
     mobile column so every flattened service section spans the content width. */
  .detail { display: flex; flex-direction: column; gap: 28px; align-items: stretch; }
  .detail-main, .detail-side { display: contents; }
  .s-hero { order: 1; }
  .s-sample { order: 2; }
  .s-req { order: 3; }
  .s-price { order: 4; }
  .s-studio { order: 5; }
  .s-reviews { order: 6; }
  .s-cta { order: 7; }
  .s-related { order: 8; }
  .s-map { order: 9; }
  .req-grid { grid-template-columns: 1fr; }
  .studio-panel { grid-template-columns: 1fr; }
  .panel { padding: 20px; }

  .article-body { padding: 22px; }
  .article-cta { flex-direction: column; align-items: flex-start; padding: 26px 22px; }
  .article-hero { height: 200px; }

  .site-footer .shell { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 28px; }

  .book-modal {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 88%;
    max-height: none;
    border-radius: 16px 16px 0 0;
  }

  /* sticky bottom bar on service pages */
  .sticky-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(22, 21, 15, 0.1);
    padding: 10px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .sticky-bar .info { display: flex; flex-direction: column; gap: 1px; }
  .sticky-bar .info b { font-size: 13.5px; font-weight: 700; color: var(--text); }
  .sticky-bar .info span { font-size: 11.5px; color: var(--text-dim); }
  .sticky-bar .btn { padding: 13px 20px; font-size: 12.5px; }
  body.has-sticky-bar { padding-bottom: 72px; }
}

/* ==========================================================================
   Mobile design (prototype 2a) — structural differences from desktop
   ========================================================================== */
@media (max-width: 899px) {
  /* ---- header: hamburger is a bordered tile ---- */
  .hamburger {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--navy);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .brand img { height: 30px; }
  .brand span { font-size: 13px; }

  /* ---- hero ---- */
  .hero .shell { padding: 26px 20px 30px; gap: 14px; }
  .hero h1 { font-size: 34px; line-height: 1.12; }
  .hero p { font-size: 15.5px; line-height: 1.55; }
  .hero-actions { flex-direction: column; gap: 10px; padding-top: 2px; }
  .hero-actions .btn { width: 100%; align-self: stretch; }
  .trust {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
  }
  .trust .rate { color: var(--gold); }
  .trust i { width: 3px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.4); }

  /* ---- section rhythm ---- */
  .section { padding: 24px 20px 6px; gap: 12px; }
  .section h2 { font-size: 18px; font-weight: 700; color: var(--navy); }
  .section h2.center { text-align: left; }
  .section-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .section-head .sub { font-size: 13.5px; color: var(--text-body); line-height: 1.6; }

  /* ---- document chips ---- */
  .chiplist { flex-wrap: wrap; gap: 8px; }
  .chiplist .chip { font-size: 13px; padding: 10px 14px; border-color: #d8ddea; }
  .chip-more { border: 1px dashed #b8c2d8; color: var(--text-muted); background: transparent; }

  /* ---- pricing as a stacked list ---- */
  .price-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }
  .price-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--divider);
  }
  .price-line:last-child { border-bottom: 0; }
  .price-line.popular { background: #f4f7fc; }
  .price-line .l { display: flex; flex-direction: column; gap: 2px; }
  .price-line .n { font-size: 14.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
  .price-line .tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-gold);
    background: var(--gold);
    padding: 3px 7px;
    border-radius: 999px;
    font-style: normal;
  }
  .price-line .s { font-size: 12px; color: var(--text-dim); }
  .price-line .p { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--navy); }
  .fineprint { margin: 10px 0 0; font-size: 12px; color: var(--text-dim); }
  .fineprint a { font-weight: 700; }

  /* ---- "Real photos taken here" (mobile only) ----
     `.m-only` resets display to a block, so restore the section's column layout
     explicitly and give each element the same intentional breathing room. */
  .sample-block { display: flex !important; flex-direction: column; gap: 16px; }
  .sample-block img { width: 100%; border-radius: 12px; display: block; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
  .sample-block .cap { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

  /* ---- how it works: row cards, not centred columns ---- */
  .how .steps { display: flex; flex-direction: column; gap: 8px; }
  .how .step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
  }
  .how .step .n {
    width: 30px;
    height: 30px;
    background: var(--navy);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .how .step-txt { display: flex; flex-direction: column; gap: 2px; }
  .how .step .t { font-size: 14.5px; }
  .how .step .b { font-size: 12.5px; max-width: none; }

  /* ---- studio: image above copy ---- */
  .studio-band { border: 0; background: transparent; }
  .studio-band .split { display: flex; flex-direction: column; gap: 12px; }
  .studio-band > .split > img { height: 190px; border-radius: 12px; }
  .studio-band p { font-size: 13.5px; line-height: 1.6; }

  /* ---- press + single review ---- */
  .reviews-home .press { background: #fff; border-radius: 12px; padding: 18px; margin: 0; }
  .reviews-home .press q { font-size: 14px; line-height: 1.55; }
  .reviews-home .review { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
  .reviews-home .review .txt { font-size: 14px; line-height: 1.55; }

  /* ---- areas: horizontal scroller ---- */
  .areas-home .area-tiles {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin: 0 -20px;
    padding: 0 20px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .areas-home .area-tiles::-webkit-scrollbar { display: none; }
  .areas-home .area-tile {
    flex-shrink: 0;
    width: 130px;
    height: auto;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
  }
  .areas-home .area-tile img { height: 84px; }
  /* label sits below the image on mobile, not overlaid on it */
  .areas-home .area-tile span {
    position: static;
    background: none;
    inset: auto;
    padding: 9px 11px;
    font-size: 12px;
    color: var(--navy);
  }

  /* ---- CTA as an inset card ---- */
  .cta-band { background: transparent; }
  .cta-band .shell {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 24px 0 30px;
    padding: 24px 20px;
    background: var(--hero-grad);
    border-radius: 14px;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
  }
  .cta-band .t { font-size: 20px; }
  .cta-band .s { font-size: 13.5px; }
  .cta-band .btn { width: 100%; align-self: stretch; margin-top: 4px; }

  /* ---- drawer per 2a ---- */
  .drawer { width: 300px; max-width: 86%; padding: 0 0 30px; gap: 0; }
  .drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 20px 14px;
  }
  .drawer-head .label {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: 0.04em;
  }
  .drawer-close { background: #f0f2f7; color: var(--navy); width: 30px; height: 30px; font-size: 14px; }
  .drawer a.drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 3px solid transparent;
    border-bottom: 0;
    padding: 15px 20px;
    font-size: 14px;
  }
  .drawer a.drawer-link.active { border-left-color: var(--gold); background: #f4f7fc; color: var(--navy); }
  .drawer a.drawer-link::after { content: '→'; font-size: 13px; color: #b8c2d8; }
  .drawer-foot { margin: 18px 20px 0; display: flex; flex-direction: column; gap: 10px; }
  .drawer-contact {
    margin: 0;
    background: var(--tint);
    border-radius: 12px;
    padding: 22px 16px;
    gap: 6px;
  }
  .drawer-contact a { font-size: 12.5px; font-weight: 700; color: var(--navy); }
  .drawer-contact span { font-size: 11.5px; color: var(--text-muted); }

  /* sticky bar sits above the safe area */
  .sticky-bar {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   Touch target sizing — 44x44 minimum (Apple HIG; WCAG 2.2 SC 2.5.8 asks 24)
   ========================================================================== */
@media (max-width: 899px) {
  .btn,
  .chip,
  .drawer a.drawer-link,
  .area-link,
  .site-footer a,
  .drawer-contact a,
  .sitemap-col a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .btn-block, .area-link { justify-content: center; }
  .drawer a.drawer-link { justify-content: space-between; }

  /* Footer and sitemap link lists: keep them readable but tappable. */
  .site-footer .links { gap: 0 16px; }
  .site-footer .links a { padding: 4px 0; }
  .site-footer .ig { padding: 6px 0; }
  .sitemap-col a { padding: 4px 0; }

  /* Icon buttons need a real target even though the mark is small. */
  .hamburger { width: 44px; height: 44px; }
  .drawer-close, .book-close { width: 44px; height: 44px; font-size: 16px; }

  /* The brand lockup is a link back to home. */
  .brand { min-height: 44px; }

  /* Sticky bar CTA is the primary conversion control — keep it comfortable. */
  .sticky-bar .btn { min-height: 48px; padding: 14px 22px; }

  /* Chips read as pills, so give them height without stretching the label. */
  .chiplist .chip { padding: 12px 16px; }
}

/* ==========================================================================
   Mobile hero button + trust row refinements
   ========================================================================== */
@media (max-width: 899px) {
  /* The gold and outlined buttons were rendering 52px and 56px — the outline's
     2px border adds to its box. Give both a shared min-height so they read as
     a matched pair, and use the mobile design's tighter type. */
  .hero-actions .btn {
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    font-size: 14px;
    letter-spacing: 0.06em;
  }
  .hero-actions .btn-outline-light { font-size: 13.5px; }

  /* Centred under the full-width buttons; left-aligned it left a ragged 35px
     gap on the right and read as misaligned against the block above. */
  .trust { justify-content: center; text-align: center; }

  /* Footer link rows were flush at 44px with no separation. */
  .site-footer .links { gap: 2px 16px; }
}

/* ==========================================================================
   Mobile header sizing + flat canvas (prototype 2a)
   ========================================================================== */
@media (max-width: 899px) {
  /* Belt and braces: the phone number and header CTA live in the drawer and
     the sticky bar on mobile, never the header bar. */
  .header-phone, .header-right .btn { display: none !important; }

  /* The 2a sizes were drawn in a 402px device frame and read small on a real
     handset; scaled to sit in the range modern mobile headers use. */
  .brand img { height: 34px; }
  .brand span { font-size: 15px; letter-spacing: 0.03em; }
  .hamburger { font-size: 22px; }

  /* 2a is a flat #f8f9fa canvas with white cards — it has none of the
     full-width white bands the desktop design uses. */
  .band, .band-b {
    background: transparent;
    border-top: 0;
    border-bottom: 0;
  }

  /* A 6px bottom left content hugging the next section; 14px gives the page a
     steadier rhythm (38px between sections) without drifting from the design. */
  .section { padding: 24px 20px 14px; }
}

/* ==========================================================================
   Header chrome breakpoint
   The desktop nav (8 links + phone + CTA) needs ~1276px. The layout breakpoint
   is 900px, so between 900 and 1279 the header overflowed its viewport and
   forced the whole page to scroll sideways. Header chrome therefore switches
   to the drawer at 1279px, independently of the body layout breakpoint.
   ========================================================================== */
@media (max-width: 1279px) {
  .nav-links,
  .header-phone,
  .header-right .btn { display: none !important; }

  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--navy);
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 22px;
    padding: 0;
  }

  /* drawer chrome must come along, or it renders unstyled above 900px */
  .drawer { width: 300px; max-width: 86%; padding: 0 0 30px; gap: 0; }
  .drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 20px 14px;
  }
  .drawer-head .label {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: 0.04em;
  }
  .drawer-close { background: #f0f2f7; color: var(--navy); width: 44px; height: 44px; font-size: 15px; }
  .drawer a.drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 3px solid transparent;
    border-bottom: 0;
    padding: 15px 20px;
    font-size: 14px;
    min-height: 44px;
  }
  .drawer a.drawer-link.active { border-left-color: var(--gold); background: #f4f7fc; color: var(--navy); }
  .drawer a.drawer-link::after { content: '→'; font-size: 13px; color: #b8c2d8; }
  .drawer-foot { margin: 18px 20px 0; display: flex; flex-direction: column; gap: 10px; }
  .drawer-contact { margin: 0; background: var(--tint); border-radius: 12px; padding: 22px 16px; gap: 6px; }
}

/* ==========================================================================
   Home section ordering + bands
   3a and 2a run the home sections in different orders. The DOM follows 3a
   (services -> studio -> how -> pricing -> reviews -> areas); mobile reorders
   with flex `order` rather than duplicating the markup.
   ========================================================================== */
.reviews-band { background: #fff; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
/* 3a tints the review cards against the white band */
.reviews-band .review { background: var(--page-bg); border: 1px solid var(--border-soft); }
/* press box inside the studio column (3a) */
.studio-band .press { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-top: 6px; background: transparent; }

@media (max-width: 899px) {
  main { display: flex; flex-direction: column; }
  .ord-svcs    { order: 1; }
  .ord-price   { order: 2; }
  .ord-sample  { order: 3; }
  .ord-how     { order: 4; }
  .ord-studio  { order: 5; }
  .ord-reviews { order: 6; }
  .ord-areas   { order: 7; }
  .cta-band    { order: 8; }
  /* 2a has no white bands — keep the flat canvas */
  .reviews-band { background: transparent; border-top: 0; border-bottom: 0; }
  .reviews-band .review { background: #fff; border: 1px solid var(--border); }
}

/* ==========================================================================
   Service page — mobile (2a) section order and requirement tiles
   2a runs the service page as: hero, sample, requirements, pricing, studio,
   reviews, how it works, map, related, CTA. The DOM follows the desktop 3a
   order, so mobile reorders with flex `order` (.detail is already a flex
   column below 900px, with .detail-main/.detail-side using display:contents).
   ========================================================================== */
@media (max-width: 899px) {
  .s-hero    { order: 1; }
  .s-sample  { order: 2; }
  .s-req     { order: 3; }
  .s-price   { order: 4; width: 100%; }
  .s-studio  { order: 5; }
  .s-reviews { order: 6; }
  .s-how     { order: 7; }
  .s-map     { order: 8; }
  .s-related { order: 9; }
  .s-cta     { order: 10; }

  /* 2a lays requirements out as a 2-up grid of compact tiles */
  .s-req { background: transparent; border: 0; padding: 0; }
  .s-req .req-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .s-req .req {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 12px;
    line-height: 1.45;
  }

  .s-how { display: flex; flex-direction: column; gap: 10px; }
  .s-how h2 { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--navy); }
  .s-how .steps { display: flex; flex-direction: column; gap: 8px; }
  .s-how .step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
  }
  .s-how .step .n {
    width: 30px; height: 30px; flex-shrink: 0;
    background: var(--navy); color: #fff;
    font-size: 13px; font-weight: 700;
  }
  .s-how .step-txt { display: flex; flex-direction: column; gap: 2px; }
  .s-how .step .t { font-size: 14.5px; }
  .s-how .step .b { font-size: 12.5px; max-width: none; }
}

/* 3a renders "All service areas →" as a plain text link, not an outlined
   button (unlike the "All services" and "Read all reviews" section actions). */
.textlink {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  flex-shrink: 0;
}
.textlink:hover { color: var(--navy-dark); }