/* ==========================================================================
   North Notary — marketing site + booking flow + shared components.
   Measured off the live original (northnotary.ca, Elementor):
     container 1140 · body Lato 16/24 #7a7a7a · headings DM Sans 600
     hero h1 60/60 black ("Online" in green) · inner-page h1 60.8 center #595959
     kicker h2 20/600 uppercase green center · section title 42 black center
     split h2 42 green left · card title 28 · doc-card h4 20/600
     cards: #fff, radius 30 (pricing 15), pad 20, shadow 2px 2px 10px rgba(202,202,202,.25)
     buttons: 15/400, 18×30 pad, radius 30, green #486338
     stats: 56/600 green on #f4f3ee · footer #f4f3ee, links #cc3366, headings 17.6/600
     images: no radius, no shadow · nav links 16
   ========================================================================== */

:root {
  --green: #486338;
  --green-dark: #374c2a;
  --green-soft: #eef2ea;
  --amber: #fec42d;
  --pink: #cc3366;            /* the original's footer-link colour */
  --ink: #000000;
  --gray-h1: #595959;         /* inner-page H1 */
  --body: #7a7a7a;
  --tint: #f4f3ee;
  --line: #e6e4dc;
  --white: #ffffff;
  --head: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --text: "Lato", "Segoe UI", system-ui, sans-serif;
  --wrap: 1140px;
  --shadow: 2px 2px 10px rgba(202, 202, 202, .25);
  --shadow-lg: 0 10px 34px rgba(17, 17, 17, .09);
  --header-h: 96px;
}

* { box-sizing: border-box; }
/* Any class that sets `display` would otherwise beat the UA rule for [hidden]. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body.site {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font: 400 16px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--head); color: var(--ink); font-weight: 600; line-height: 1.05; margin: 0 0 .5em; }
h1 { font-size: clamp(36px, 4.6vw, 60px); }
h2 { font-size: clamp(28px, 3.2vw, 42px); }
h3 { font-size: 28px; }
h4 { font-size: 20px; line-height: 1.2; }
p { margin: 0 0 1.1em; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 860px; }
.lede { font-size: 16px; line-height: 1.5; }
.hp { position: absolute; left: -9999px; opacity: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--green); color: #fff; padding: 10px 16px; border-radius: 6px; z-index: 200; }
.muted { color: var(--body); }
.small { font-size: 13px; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--green); color: var(--white);
  font: 400 15px/1 var(--text);
  padding: 18px 30px; border: 1px solid var(--green); border-radius: 30px;
  cursor: pointer; transition: background .18s, color .18s, border-color .18s;
  /* measured on the original: 4px 4px 10px rgba(0,0,0,.31) */
  box-shadow: 4px 4px 10px rgba(0,0,0,.31);
}
.btn:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.btn--pill { border-radius: 30px; }
.btn--outline { background: transparent; color: var(--green); }
.btn--outline:hover { background: var(--green); color: #fff; }
.btn--light { background: var(--white); color: var(--green); border-color: var(--white); }
.btn--light:hover { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.btn--block { width: 100%; }
.btn--sm { padding: 12px 20px; font-size: 14px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn .ico { width: 15px; height: 15px; flex: 0 0 auto; }

/* original "Learn More": a plain green text link, 15px, no arrow */
.link-more { font-weight: 400; font-size: 15px; color: var(--green); }
.link-more:hover { text-decoration: underline; }

/* ------------------------------------------------------------------- header */

/* Measured on the live original: the header is TRANSPARENT (rgba(0,0,0,0)) and 96px
   tall, so it melts into the hero — you cannot see where one ends and the other starts. */
.hdr { position: sticky; top: 0; z-index: 100; background: transparent; }
.hdr::before { content: none; }
/* Three columns, exactly as the original: logo 114 · menu · button. */
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 34px; min-height: var(--header-h); }
.hdr__logo { flex: 0 0 auto; }
.nav { flex: 1 1 auto; justify-content: center; }
.hdr__cta { flex: 0 0 auto; box-shadow: 4px 4px 10px rgba(0,0,0,.31); }
.hdr__logo img { width: 114px; height: auto; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav__list { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.nav__list > li { position: relative; }
.nav__list a { font: 400 16px/1 var(--text); color: #2d2d2d; padding: 12px 0; display: inline-block; }
.nav__list a:hover, .nav__list a.is-active { color: var(--green); }
.caret { display: inline-block; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 5px; }

.sub {
  position: absolute; top: 100%; left: -18px; min-width: 268px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
  padding: 8px; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s;
}
.has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.is-open .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.sub a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 15px; }
.sub a:hover { background: var(--green-soft); }
.sub-toggle { display: none; }

.nav__cta { padding: 14px 24px; font-size: 14px; }

.burger { display: none; width: 44px; height: 40px; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; height: 2px; background: var(--ink); margin: 5px 0; transition: .2s; border-radius: 2px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------- hero */

/* The original hero is the whole first screen: measured 687px against a 674px viewport,
   i.e. 100vh, so it must follow the window at any zoom instead of a fixed padding box.
   The header is transparent and sits on top of it, hence min-height:100vh and no offset. */
.hero {
  background: #fff url("../img/hero-block.webp") no-repeat right center / cover;
  overflow: hidden;
  min-height: 100vh; min-height: 100dvh;
  margin-top: calc(var(--header-h) * -1);
  display: flex; align-items: center;
}
.hero__in { padding: var(--header-h) 20px 40px; max-width: var(--wrap); margin: 0 auto; width: 100%; }
.hero__text { max-width: 640px; }
.eyebrow { font: 600 16px/1.4 var(--text); text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
.hero h1 { font-size: clamp(38px, 4.4vw, 60px); line-height: 1.0; margin-bottom: 22px; color: var(--ink); }
.hero h1 .accent { color: var(--green); }
.hero .lede { color: var(--ink); font-size: 16px; line-height: 1.5; max-width: 33em; }
.hero__note { font-weight: 400; color: var(--ink); font-size: 16px; margin: 14px 0 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* -------------------------------------------------------------------- stats */

.stats { background: var(--tint); }
/* The numbers band is the one block the original does NOT keep inside the 1140 container:
   it spreads across the whole screen (measured: full-width row, no 1140 wrapper), which is
   why the figures sit far apart instead of huddling in the middle. */
.stats__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 44px 6vw; text-align: center; max-width: none; }
.stat__n { display: block; font-family: var(--head); font-size: clamp(34px, 3.8vw, 56px); font-weight: 600; color: var(--green); line-height: 1.05; }
.stat__l { display: block; font-size: 16px; color: var(--ink); margin-top: 6px; }

/* ----------------------------------------------------------------- sections */

.section { padding: 96px 0; }
.section--tint { background: var(--tint); }
.kicker { font: 600 20px/1.2 var(--head); text-transform: uppercase; color: var(--green); margin-bottom: 12px; text-align: center; }
.section__title { font-size: clamp(30px, 3.2vw, 42px); color: var(--ink); text-align: center; margin-bottom: 16px; line-height: 1.05; }
.section__title--lg { font-size: clamp(32px, 3.6vw, 48px); }
.section__lede { max-width: 74ch; margin: 0 auto 44px; text-align: center; font-size: 16px; }

.split { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 540px); gap: 60px; align-items: center; justify-content: space-between; }
.split--flip .split__media { order: 2; }
.split__media img { width: 100%; height: auto; }
.split__text h2 { color: var(--green); font-size: clamp(30px, 3.2vw, 42px); margin-bottom: 18px; line-height: 1.05; }
.split__text p { font-size: 16px; line-height: 1.6; max-width: none; }

.checks { list-style: none; padding: 0; margin: 18px 0 26px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; font-size: 16px; color: var(--ink); }
.checks__icon { font-size: 20px; line-height: 1.2; flex: 0 0 auto; }
.checks strong { color: var(--ink); }

/* ------------------------------------------- service cards (icon + text) --- */

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

.card {
  background: #fff; border-radius: 30px; box-shadow: var(--shadow);
  padding: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.card__icon { width: 62px; height: auto; }
.card__body { display: flex; flex-direction: column; gap: 10px; }
.card__body h3 { font-size: 28px; margin: 0; line-height: 1.05; }
.card__body h3 a { color: var(--ink); }
.card__body h3 a:hover { color: var(--green); }
.card__body p { font-size: 16px; line-height: 1.2; margin: 0; }

/* doc cards on service pages: 3-up, icon + h4 + text */
.doc-card {
  background: #fff; border-radius: 30px; box-shadow: var(--shadow);
  padding: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.doc-card__icon { width: 64px; height: auto; }
.doc-card h4 { font-size: 20px; margin: 0; }
.doc-card p { font-size: 16px; line-height: 1.35; margin: 0; }

/* -------------------------------------------------------------------- steps */

.steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { text-align: center; }
.step__media { margin-bottom: 16px; }
.step__media img { width: 100%; height: auto; }
.step h3 { font-size: 20px; line-height: 1.2; margin: 8px 0 10px; }
.step p { font-size: 14px; line-height: 1.55; color: var(--ink); margin-bottom: 10px; }
.step p.step__more { color: var(--body); }

/* ----------------------------------------------------- features (why us) --- */

.features { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.feature { text-align: center; }
.feature img { width: 96px; height: auto; margin: 0 auto 14px; }
.feature h3 { font-size: 20px; line-height: 1.2; margin-bottom: 8px; }
.feature p { font-size: 14px; color: var(--ink); margin: 0; }

/* ------------------------------------------------------------------ reviews */

.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review { margin: 0; background: #fff; border-radius: 30px; box-shadow: var(--shadow); padding: 26px 28px; }
.review__stars { color: var(--amber); letter-spacing: 2px; margin-bottom: 12px; }
.review blockquote { margin: 0 0 14px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.review figcaption { font-weight: 700; color: var(--ink); font-family: var(--head); }

/* ----------------------------------------------------------------- cta band */

.cta-band { background: #fff; }
.cta-band__in {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px;
  padding: 110px 20px;
}
.cta-band h2 { color: var(--ink); font-size: clamp(30px, 3.2vw, 42px); margin-bottom: 12px; line-height: 1.05; }
.cta-band p { color: var(--ink); margin: 0; max-width: 36em; font-size: 16px; }

/* ---------------------------------------------------------------- page head */

.page-head { background: #fff; padding: 64px 0 8px; text-align: center; }
.page-head--slim { padding: 56px 0 0; }
.page-head h1 { font-size: clamp(38px, 4.4vw, 60.8px); color: var(--gray-h1); margin-bottom: 26px; line-height: 1.0; }
.page-head__intro { max-width: 72ch; margin: 0 auto 8px; font-size: 16px; }

/* group headings on service pages */
.group-title { font-family: var(--head); font-weight: 600; font-size: 32px; color: var(--ink); text-align: center; margin: 0 0 34px; }

/* ------------------------------------------------------------------ pricing */

.price-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.price {
  background: #fff; border-radius: 15px; box-shadow: var(--shadow); padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.price h3 { font-family: var(--head); font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--ink); margin: 0; }
.price p { margin: 0; font-size: 16px; line-height: 1.4; }
.price__amount { margin-top: auto; padding-top: 8px; font-family: var(--text); font-size: 18px; font-weight: 700; color: var(--green); }
.price-note { margin-top: 26px; font-size: 15px; color: var(--body); text-align: center; }

/* ---------------------------------------------------------------------- faq */

.faq { }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative;
  font: 700 16px/1.5 var(--text); color: var(--body);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-size: 22px; color: var(--green); font-weight: 400; line-height: 1;
}
.faq__item[open] summary::after { content: "–"; }
.faq__item[open] summary { color: var(--ink); }
.faq__a { padding: 0 0 18px; font-size: 16px; }
.faq__a p { margin: 0; }
.faq__foot { margin-top: 26px; text-align: center; font-size: 16px; }

/* ------------------------------------------------------------------ contact */

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact__info h2 { color: var(--green); }
.contact__list { list-style: none; padding: 0; margin: 26px 0; }
.contact__list li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.contact__label { color: var(--body); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.contact__cta { background: var(--green-soft); border-radius: 30px; padding: 24px 28px; }
.contact__cta p { font-size: 16px; }

.form { background: #fff; border-radius: 30px; box-shadow: var(--shadow); padding: 32px; }
.form h2 { font-size: 26px; color: var(--ink); }
.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 7px; font-family: var(--text); }
.field > span small { font-weight: 400; color: var(--body); }
.field b { color: #b3261e; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px;
  font: 400 15px/1.5 var(--text); color: var(--ink); background: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.field input[type="file"] { padding: 9px; background: #fbfbf9; font-size: 14px; }
.field input[type="file"]::file-selector-button {
  background: var(--green); color: #fff; border: 0; border-radius: 8px;
  padding: 10px 18px; margin-right: 12px; font: 400 14px var(--text); cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { background: var(--green-dark); }
.form-error { background: #fdecea; border: 1px solid #f4c7c3; color: #b3261e; border-radius: 10px; padding: 12px 16px; font-size: 15px; }
.form-ok { background: var(--green-soft); border-radius: 30px; padding: 32px; }
.form-fine { font-size: 13px; color: var(--body); margin: 12px 0 0; }

/* -------------------------------------------------------------------- prose */

/* The legal pages are a single rich-text block on the original: black 16px body,
   the numbered section titles are bold body text (not big headings), <div> blocks
   carry no margin and <p> blocks carry one, and blank lines act as spacers. */
.prose { color: var(--ink); font-size: 16px; line-height: 1.5; }
.prose div, .prose p, .prose ul, .prose ol { font-size: 16px; line-height: 1.5; }
.prose div { margin: 0; }
.prose p { margin: 0 0 1em; }
.prose__h { font: 700 16px/1.5 var(--text); color: var(--ink); margin: 0; }
.prose__h--p { margin: 0 0 1em; }
.prose li { font-size: 16px; line-height: 1.5; }
.prose hr { border: 0; border-top: 1px solid #ccc; margin: 0; }
.prose a { color: var(--green); text-decoration: underline; }

/* ==========================================================================
   Booking flow
   ========================================================================== */

.bk { padding: 48px 0 80px; }
.bk__head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.bk__head h1 { font-size: clamp(34px, 3.8vw, 52px); color: var(--gray-h1); margin-bottom: 12px; line-height: 1.05; }
.bk__head p { font-size: 16px; }

/* one column, steps stacked top to bottom */
.bk-flow { max-width: 880px; margin: 0 auto; }

.bk-step { background: #fff; border-radius: 30px; box-shadow: var(--shadow); padding: 26px 28px 28px; margin-bottom: 20px; }
.bk-step:last-child { margin-bottom: 0; }
.bk-step__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.bk-step__n {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff;
  font: 600 14px/30px var(--head); text-align: center;
}
.bk-step__title { font-family: var(--head); font-weight: 600; font-size: 22px; color: var(--ink); margin: 0; line-height: 1.15; }
.bk-step__hint { font-size: 14px; color: var(--body); margin: -8px 0 16px; }

/* service picker */
.bk-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.bk-service { position: relative; display: block; cursor: pointer; }
.bk-service input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bk-service__box {
  display: block; height: 100%; border: 1.5px solid var(--line); border-radius: 18px; padding: 16px 18px;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.bk-service:hover .bk-service__box { border-color: #b9c7ae; }
.bk-service input:focus-visible + .bk-service__box { outline: 2px solid var(--green); outline-offset: 2px; }
.bk-service input:checked + .bk-service__box { border-color: var(--green); background: #fafcf8; box-shadow: inset 0 0 0 1px var(--green); }
.bk-service__name { display: block; font-family: var(--head); font-weight: 600; font-size: 16px; color: var(--ink); line-height: 1.3; padding-right: 26px; }
.bk-service__blurb { display: block; font-size: 13.5px; color: var(--body); margin: 6px 0 10px; line-height: 1.45; }
.bk-service__meta { display: flex; align-items: baseline; gap: 8px; }
.bk-service__price { font-family: var(--text); font-weight: 700; font-size: 18px; color: var(--green); }
.bk-service__dur { font-size: 13px; color: var(--body); }
.bk-service__tick {
  position: absolute; right: 16px; top: 16px; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff;
}
.bk-service input:checked ~ .bk-service__tick { border-color: var(--green); background: var(--green); }
.bk-service input:checked ~ .bk-service__tick::after {
  content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* add-ons */
.addons { display: grid; gap: 10px; }
.addon {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: #fff;
}
.addon:hover { border-color: #b9c7ae; }
.addon__text { display: grid; gap: 3px; min-width: 0; }
.addon__name { font-family: var(--head); font-weight: 600; font-size: 15.5px; color: var(--ink); }
.addon__note { font-size: 13px; color: var(--body); }
.addon__price { font-size: 13px; font-weight: 700; color: var(--green); }
.addon__check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); white-space: nowrap; cursor: pointer; }
.addon__check input { width: 20px; height: 20px; accent-color: var(--green); }

.qty { display: flex; align-items: center; flex: 0 0 auto; }
.qty__btn {
  width: 36px; height: 38px; border: 1px solid var(--line); background: #fff; cursor: pointer;
  font: 400 18px/1 var(--text); color: var(--green);
}
.qty__btn:first-child { border-radius: 10px 0 0 10px; }
.qty__btn:last-child { border-radius: 0 10px 10px 0; }
.qty__btn:hover { background: var(--green-soft); }
.qty__input {
  width: 52px; height: 38px; text-align: center; border: 1px solid var(--line); border-left: 0; border-right: 0;
  font: 600 15px var(--head); color: var(--ink); -moz-appearance: textfield;
}
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* days + slots */
.days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-width: thin; }
.day {
  flex: 0 0 auto; width: 68px; padding: 10px 0; background: #fff; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 14px; font-family: var(--text); text-align: center; line-height: 1.25;
  transition: border-color .16s, background .16s;
}
.day:hover:not(:disabled) { border-color: #b9c7ae; }
.day.is-selected { background: var(--green); border-color: var(--green); color: #fff; }
.day.is-selected .day__wd, .day.is-selected .day__m { color: rgba(255,255,255,.8); }
.day.is-empty { opacity: .4; cursor: not-allowed; }
.day__wd, .day__m { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--body); }
.day__n { display: block; font: 600 20px/1.2 var(--head); color: inherit; }

.slots { min-height: 44px; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot {
  padding: 12px 6px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  cursor: pointer; font: 600 14px var(--head); color: var(--ink); transition: .16s;
}
.slot:hover { border-color: var(--green); color: var(--green); }
.slot.is-selected { background: var(--green); border-color: var(--green); color: #fff; }

.bk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.consent {
  display: flex; align-items: flex-start; gap: 11px; background: #fafbf8;
  border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 15px; cursor: pointer;
}
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green); flex: 0 0 auto; }
.consent b { color: #b3261e; }

/* One frame around both statements and the single tick that covers them, so the
   checkbox cannot be read as agreeing to the second point only. */
.consent-box { border: 1px solid var(--line); border-radius: 14px; background: #fafbf8; padding: 4px 16px 14px; }
.consent-box__points { margin: 0; padding: 0 0 0 22px; font-size: 15px; line-height: 1.55; }
.consent-box__points li { margin: 12px 0; }
.consent-box__points a { color: var(--green); text-decoration: underline; }
.consent-box .consent--both {
  margin-top: 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: none; padding: 13px 0 0; font-weight: 600;
}
@media (max-width: 640px) {
  .consent-box { padding: 2px 13px 12px; }
  .consent-box__points { padding-left: 19px; }
}

/* final "Review & confirm" step (the old sidebar, now the last block) */
.bk-summary__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; margin: 0 0 6px; }
.bk-summary__row { display: grid; grid-template-columns: 84px 1fr; gap: 10px; font-size: 15px; align-items: baseline; }
.bk-summary__row dt { color: var(--body); }
.bk-summary__row dd { margin: 0; color: var(--ink); font-weight: 600; }
.bk-total { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; margin: 14px 0 8px; }
.bk-total span { font-size: 15px; color: var(--body); }
.bk-total strong { font-family: var(--head); font-size: 30px; color: var(--green); }
.bk-pay-note { font-size: 13.5px; color: var(--body); margin-bottom: 18px; line-height: 1.5; }
.bk-final .btn--block { padding: 20px 30px; font-size: 16px; }
.bk-reassure { list-style: none; padding: 0; margin: 18px 0 0; font-size: 13.5px; color: var(--body); display: flex; flex-wrap: wrap; gap: 8px 26px; }
.bk-reassure li { padding-left: 22px; position: relative; margin: 0; }
.bk-reassure li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.bk-compliance { font-size: 11.5px; line-height: 1.6; color: #a3a3a3; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }

.notice { border-radius: 16px; padding: 14px 18px; margin: 0 0 20px; font-size: 15px; border: 1px solid; }
.notice--warn { background: #fdf6e6; border-color: #f0dcb4; color: #7a5a10; }
.notice--good { background: var(--green-soft); border-color: #cfdcc6; color: #35502a; }
.notice--info { background: #eef3ec; border-color: #cfe0c8; color: #2f4a28; }

/* confirmation / simple app pages */
.app-page { padding: 48px 0 80px; }
.panel { background: #fff; border-radius: 30px; box-shadow: var(--shadow); padding: 34px; max-width: 760px; margin: 0 auto 22px; }
.panel h1 { font-size: clamp(28px, 3.2vw, 38px); }
.panel h2 { font-size: 22px; color: var(--green); margin-top: 28px; }
.tick { width: 52px; height: 52px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; font-size: 26px; font-weight: 700; margin-bottom: 16px; }
.details { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; margin: 22px 0 26px; font-size: 15.5px; }
.details dt { color: var(--body); }
.details dd { margin: 0; font-weight: 600; color: var(--ink); }
.steps-list { padding-left: 20px; }
.steps-list li { margin-bottom: 9px; font-size: 15.5px; }
.tips { margin: 12px 0 18px; padding-left: 20px; font-size: 15.5px; }
.tips li { margin-bottom: 6px; }
.callout { background: var(--green-soft); border-radius: 18px; padding: 16px 20px; margin: 22px 0; font-size: 15.5px; color: #35502a; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 6px; }
.pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font: 700 12px/1.5 var(--text); }
.pill--good { background: var(--green-soft); color: #35502a; }
.pill--warn { background: #fdf6e6; color: #7a5a10; }

/* ------------------------------------------------------------------- footer */

.ftr { background: var(--tint); padding: 70px 0 0; }
.ftr__in { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr 1.2fr; gap: 34px; padding-bottom: 44px; }
.ftr__brand img { width: 140px; margin-bottom: 16px; }
.ftr__brand p { font-size: 16px; line-height: 1.5; max-width: 32ch; }
.ftr__col h3 { font-family: var(--head); font-size: 17.6px; font-weight: 600; color: var(--ink); margin-bottom: 16px; }
.ftr__col ul { list-style: none; padding: 0; margin: 0; }
.ftr__col li { margin-bottom: 10px; }
.ftr__col a { color: var(--pink); font-size: 16px; }
.ftr__col a:hover { color: var(--green); }
.ftr__contact { margin-top: 18px !important; }
.ftr__contact a { color: var(--pink); font-size: 16px; }
.ftr__contact a:hover { color: var(--green); }

.ftr__legal { border-top: 1px solid var(--line); padding-top: 24px; }
.ftr__legal p { font-size: 13px; line-height: 1.7; color: var(--body); }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding: 20px 20px 28px; }
.ftr__bottom p { font-size: 14px; color: var(--body); margin: 0; }
.ftr__bottom a { color: var(--green); }

.to-top {
  position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--green); color: #fff; display: grid; place-items: center; font-size: 18px;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 90;
}
.to-top.is-on { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .steps__grid { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(3, 1fr); }
  .ftr__in { grid-template-columns: 1fr 1fr; }
  .bk-summary__rows { grid-template-columns: 1fr; }

  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .hero { background-position: 78% center; }
  .hero__text { background: rgba(255,255,255,.82); border-radius: 20px; padding: 18px; backdrop-filter: blur(2px); }
}

@media (max-width: 980px) {
  :root { --header-h: 74px; }
  .hdr__in { justify-content: space-between; }
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; background: #fff; flex-direction: column;
    align-items: stretch; gap: 0; padding: 12px 20px 26px; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; display: none;
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li { border-bottom: 1px solid var(--line); }
  .nav__list a { padding: 14px 0; font-size: 16px; }
  .caret { display: none; }
  .sub-toggle { display: block; position: absolute; right: 0; top: 6px; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; }
  .sub-toggle::after { content: "+"; font-size: 22px; color: var(--green); }
  .has-sub.is-open .sub-toggle::after { content: "–"; }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; border: 0; padding: 0 0 10px 12px; min-width: 0; }
  .has-sub.is-open .sub { display: block; }
  .nav__cta { margin-top: 16px; }

  /* the header is transparent and 74px tall here: less top padding than that and
     the eyebrow slides under the logo (measured on a 390px phone) */
  .hero__in { padding: calc(var(--header-h) + 18px) 20px 54px; }
  .split, .contact { grid-template-columns: 1fr; gap: 34px; }
  .split--flip .split__media { order: -1; }
  .cards--2, .cards--3 { grid-template-columns: 1fr; }
  .section { padding: 62px 0; }
  .cta-band__in { grid-template-columns: 1fr; padding: 70px 20px; }
}

@media (max-width: 620px) {
  .stats__in { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .steps__grid, .reviews__grid, .price-list { grid-template-columns: 1fr; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .ftr__in { grid-template-columns: 1fr; gap: 28px; }
  .btn { width: 100%; }
  .hero__actions .btn, .btn-row .btn { width: auto; flex: 1 1 auto; }
  .contact__list li, .details { grid-template-columns: 1fr; gap: 2px; }
  .bk-step { padding: 20px 18px 22px; }
  .panel { padding: 24px 20px; }
  .addon { flex-direction: column; align-items: flex-start; gap: 10px; }
  .bk-two { grid-template-columns: 1fr; }
}


/* ── parity with northnotary.ca, measured section by section (2026-08-12) ────────
   Services and "Why clients choose" sit on #f4f3ee; hero, Ready, How it works,
   About, CTA and reviews are white. Icons in the feature row are 51px on the
   original, not 96. The steps are numbered and centred. */
#services { background: var(--tint); }
.section--tint { background: var(--tint); }
.feature img { width: 51px; height: auto; }
.steps__grid .step { text-align: center; }
.step h3 { display: flex; align-items: center; justify-content: center; gap: 10px; }
.step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--green); color: #fff; font: 600 15px/1 var(--text);
}
.step__more { text-align: left; }
.ready__next { font: 600 21px/1.3 var(--head); color: var(--ink); margin: 26px 0 8px; }
.ftr__phone { margin-top: 10px; }
.ftr__phone a { color: inherit; }


/* ── second parity pass, all values measured on northnotary.ca ───────────────── */

/* Header: invisible over the hero, solid once you scroll — so menu text never
   lands on top of the content underneath. */
.hdr.is-stuck { background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06); }

/* How it works: the original shows NO picture in this block (its images compute to
   width:0) and puts the step number in its own centred lane above the title. */
.steps__grid .step__media { display: none; }
.steps__grid .step { text-align: center; }
.step > .step__n {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--green); color: #fff; font: 600 20px/1 var(--text);
}
.step h3 { display: block; text-align: center; }

/* About: the original splits the row into two equal halves (540 / 540 of 1140),
   so the text column is as wide as the picture and the button sits on its line. */
.split--about .split__text { max-width: none; }
.split--about .split__text .btn { padding: 18px 44px; }

/* The call-to-action band, centred like the original: kicker, title, text, button. */
.cta-band__in { display: block; text-align: center; }
.cta-band__in .kicker { margin-bottom: 10px; }
.cta-band__text { max-width: 760px; margin: 0 auto 26px; }

/* Reviews are a slider on the original, not a wall of cards. */
.reviews { position: relative; }
.reviews__track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track .review { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; }
.reviews__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--green); font-size: 24px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.reviews__nav--prev { left: -22px; }
.reviews__nav--next { right: -22px; }
.review__role { display: block; font-size: 14px; color: var(--body); }
@media (max-width: 980px) { .reviews__track .review { flex: 0 0 86%; } .reviews__nav { display: none; } }


/* ── third parity pass: measured after the lazy images finally rendered ─────────
   The step pictures DO exist on the original — they simply had not loaded when I
   measured, which is why I wrongly removed them. Real sizes: ~105px tall. */
.steps__grid .step__media { display: block; margin: 0 auto 14px; }
.steps__grid .step__media img { width: auto; height: 105px; max-width: 100%; object-fit: contain; }
.step > .step__n {
  width: 30px; height: 30px; font-size: 20px; margin: 0 auto 10px;
}

/* Footer links: the visible text on the original is BLACK (the pink sits on the
   <a>, but every label is a <span> that overrides it). */
.ftr__col a, .ftr__col a span { color: #000; }
.ftr__col a:hover { color: var(--green); }
.ftr__contact a { color: #000; font-weight: 600; }

/* The call-to-action band is left-aligned inside the container, like the original. */
.cta-band__in { text-align: left; }
.cta-band__text { margin-left: 0; }


/* ── the call-to-action band, measured on the original at last ──────────────────
   It is a FULL-BLEED section 1965x397 carrying ChatGPT-Image-8.webp as a cover
   background (position 0% 0%, padding 0). The photo is applied lazily by Elementor,
   which is why three earlier scans found nothing and I wrongly reported "no image".
   The copy sits in the 1140 container on the left, over the pale part of the photo. */
.cta-band {
  background: #efe9e2 url("../img/ChatGPT-Image-8.webp") no-repeat 0 0 / cover;
  padding: 0;
}
.cta-band__in {
  min-height: 397px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  text-align: left; padding-top: 0; padding-bottom: 0;
}
.cta-band .kicker { color: var(--green); margin-bottom: 8px; }
.cta-band h2 { color: var(--ink); max-width: 560px; margin-bottom: 16px; }
.cta-band__text { max-width: 560px; margin: 0 0 26px; }
@media (max-width: 780px) {
  .cta-band { background-position: 30% 0; }
  .cta-band__in { min-height: 340px; }
  .cta-band h2, .cta-band__text { max-width: 100%; }
}

/* The original pages the reviews with dots under the row, not side arrows. */
.reviews__nav { display: none; }
.reviews__dots { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.reviews__dot {
  width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: #d7d7d1;
}
.reviews__dot.is-on { background: var(--green); }


/* CTA band rhythm, measured on the original: kicker→title 20px, title→text 20px,
   text→button 34px, and the whole group is vertically centred in a 397px band. */
.cta-band .kicker { margin: 0 0 20px; }
.cta-band h2 { margin: 0 0 20px; }
.cta-band__text { margin: 0 0 34px; }
.cta-band__in { padding-top: 56px; padding-bottom: 56px; }

/* The reviews heading sits 100px below the band on the original, not 5px. */
.section.reviews { padding-top: 100px; }


/* About-us hero, measured on the original: ChatGPT-Image-26.webp as a cover
   background, 331px tall, padding 170/0/100, centred #595959 H1, no button. */
.page-head--photo {
  background: #efeae4 url("../img/ChatGPT-Image-26.webp") no-repeat 50% 50% / cover;
  padding: 170px 0 100px;
  text-align: center;
}
.page-head--photo h1 { color: #595959; margin: 0; }


/* About-us hero overlay: the original lays #f4f3ee at 0.9 opacity over the photo,
   which is why the picture reads as a pale tint and the grey H1 stays legible. */
.page-head--photo { position: relative; }
.page-head--photo::before {
  content: ""; position: absolute; inset: 0; background: #f4f3ee; opacity: .9;
}
.page-head--photo .wrap { position: relative; z-index: 1; }

/* "We Offer Trusted Notary Services": 432 / 648 columns, green title on the left. */
.offer { display: grid; grid-template-columns: 432px minmax(0, 648px); gap: 60px; align-items: start; }
.offer__intro h2 { color: var(--green); font-size: clamp(30px, 3.2vw, 42px); line-height: 1.05; margin-bottom: 18px; text-align: left; }
.offer__intro p { font-size: 16px; line-height: 1.6; margin-bottom: 26px; }
.offer__cards { grid-template-columns: 1fr 1fr; }
@media (max-width: 980px) { .offer { grid-template-columns: 1fr; gap: 30px; } }


/* ==========================================================================
   Fourth parity pass — the inner pages (services · pricing · FAQ · contact ·
   about), measured element by element against northnotary.ca on 2026-08-13.
   Everything below is scoped to body.inner so the home page keeps the rhythm
   that was already signed off.
   ========================================================================== */

/* The 1140px Elementor container carries no side padding on desktop, so the
   content box must be 1140 wide — .wrap adds 20px a side, hence 1180. */
body.inner .wrap { max-width: 1180px; }

/* Every container on these pages is 60px top and bottom (40px at <=1024). */
body.inner .section { padding: 60px 0; }

/* Elementor switches layout at 1024 and 767, not at our 980/620. */
@media (max-width: 1024px) {
  body.inner .section { padding: 40px 0; }
  body.inner .split { grid-template-columns: 1fr; gap: 30px; }
  /* both image columns carry --order:99999 on the original: the picture always
     drops BELOW the text, in the flipped block as well */
  body.inner .split__media,
  body.inner .split--flip .split__media { order: 2; }
  body.inner .cards--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  body.inner .cards--2,
  body.inner .cards--3,
  body.inner .price-list { grid-template-columns: 1fr; }
  body.inner .price-note { text-align: start; }
  body.inner .split__text,
  body.inner .split__text h2 { text-align: center; }
  body.inner .cta-center .btn,
  body.inner .split__text .btn { width: 100%; }
}

/* ---- hero: the same photo box on every inner page, only the picture changes.
   The original's header is transparent and sits ON the photo (the hero starts at
   y=-4, i.e. behind it), so the band must be pulled up under our header too —
   otherwise every inner page shows a 96px white strip the original does not have. */
.page-head--photo { margin-top: calc(var(--header-h) * -1); }
.page-head--photo23 { background-image: url("../img/ChatGPT-Image-23.webp"); }
.page-head--photo24 { background-image: url("../img/ChatGPT-Image-24.webp"); }
.page-head--photo h1 { font-size: 60.8px; line-height: 1; }   /* 3.8em on the original */
@media (max-width: 1024px) {
  .page-head--photo { padding: 140px 20px 40px; }
  .page-head--photo h1 { font-size: 41.6px; }                 /* 2.6em */
  .page-head--photo24 { padding: 150px 30px 50px; }           /* contact differs */
}
@media (max-width: 767px) {
  .page-head--photo { padding: 140px 20px 30px; }
  .page-head--photo h1 { font-size: 40px; }                   /* 2.5em */
  .page-head--photo24 { padding: 140px 20px 40px; }
}

/* ---- card groups: 32px black heading, 20px of air on both sides of a grid */
.group-title { margin: 0 0 20px; }
.cards + .group-title { margin-top: 20px; }

/* ---- doc cards: the icon is a percentage of the card width (measured 15-25%),
   and the inside rhythm is image 20 → title 15 → price 15 → text 0. */
.doc-card { gap: 0; }
.doc-card__icon { width: 20%; height: auto; margin-bottom: 20px; }
.doc-card h3, .doc-card h4 { font-size: 20px; margin: 0 0 15px; line-height: 1.3; }
.doc-card__price { font: 600 20px/1.3 var(--head); color: var(--green); margin: 0 0 15px; }
.doc-card p { margin: 0; }

/* ---- the green button the original puts under the last card grid */
.cta-center { margin: 20px 0 0; text-align: center; }
.cta-center .btn { width: auto; }

/* ---- splits: 50/50 columns, flat 42px green heading, button in the text column */
body.inner .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; }
body.inner .split__text h2 { font-size: 42px; }
body.inner .split__text .btn { margin-top: 4px; }

/* ---- pricing: the amount follows the description immediately (-20px pull-up on
   the original), and sits flush under the heading when a card has no description */
.price { gap: 0; }
.price h3 { margin: 0 0 15px; }
.price p { margin: 0 0 20px; }
.price__amount { font: 700 18px/1.3 var(--head); color: var(--green); margin: 0; padding: 0; }
.price p ~ .price__amount { margin-top: -20px; }
.price-note { font-size: 16px; }

/* ---- FAQ: the original accordion has NO +/- marker and 5px white separators;
   title DM Sans 1.1em/700 #595959, padding 15/20, answer padding 15/20. */
.faq__item { border: 5px solid #fff; }
.faq__item + .faq__item { border-top: 0; }
/* the question row sits on #f4f3ee — the 5px white borders are the gaps between rows */
.faq__item summary { font: 700 17.6px/1 var(--head); color: var(--gray-h1); background: var(--tint); padding: 30px 20px; }
.faq__item summary::after { content: none; }
.faq__item[open] summary { color: var(--gray-h1); }
.faq__a { border-top: 5px solid #fff; padding: 15px 20px; color: var(--body); font-size: 16px; }
@media (max-width: 1024px) { .faq__item summary { padding: 20px 10px; } }
@media (max-width:  767px) { .faq__a { padding: 7px 15px; } }

/* ---- contact: grey heading, two green circle icon boxes, and a bare form —
   the original has no card, no extra rows and no second CTA. */
body.inner .contact { grid-template-columns: 1fr 1fr; gap: 60px; }
/* "Get In Touch" is the kit's default h2 — 3em = 48px, grey, left-aligned */
.contact__info h2 { color: var(--gray-h1); font-size: 48px; text-align: start; }
.form-submit { margin: 0; text-align: center; }   /* the original centres an auto-width Submit */

/* ---- about-us offer cards: 314px wide, icon 15-17% of the card, 18px black title */
.offer__cards .card { gap: 0; }
/* internal rhythm measured on the original card: icon 41 → 10 → title 18 → 5 → body → link */
.offer__cards .card__icon { height: auto; margin-bottom: 10px; }
.offer__cards .card__body { display: block; }
.offer__cards .card__body h3 { font-size: 18px; color: var(--ink); margin: 0 0 5px; line-height: 1; }
.offer__cards .card__body p { font-size: 16px; line-height: 1.5; margin: 0 0 14px; }
.contact__info .lede { margin-bottom: 10px; }
.contact__box { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.contact__ico {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--green);
  display: grid; place-items: center;
}
.contact__ico svg { width: 18px; height: 18px; fill: #fff; }
.contact__box-title { font: 600 19.2px/1.2 var(--head); color: var(--gray-h1); }
.contact__box-title:hover { color: var(--green); }
body.inner .form { background: none; border-radius: 0; box-shadow: none; padding: 0; }
body.inner .field { margin-bottom: 20px; }
body.inner .field input, body.inner .field textarea { border-color: var(--tint); padding: 15px 20px; }
.field__sr { position: absolute; left: -9999px; }
@media (max-width: 767px) { body.inner .contact { grid-template-columns: 1fr; gap: 30px; } }

/* the burger keeps its three bars: the screen-reader word is out of flow */
.burger .field__sr { position: absolute; left: -9999px; }


/* ---- home-page details measured against the original (2026-08-13) --------- */

/* "What happens next?" is bold body text on the original, not a heading */
.ready__next { font: 400 16px/1.5 var(--text); color: var(--ink); margin: 26px 0 8px; }
.ready__next strong { font-weight: 700; }

/* the checklist labels are not bold on the original */
.checks li span:last-child { color: var(--ink); }

/* the hero picture is a phones-only element there (elementor-hidden-desktop/tablet) */
.hero__media { display: none; }
@media (max-width: 767px) {
  .hero__media { display: block; margin: 26px auto 0; max-width: 420px; }
  .hero__media img { width: 100%; height: auto; }
}


/* ==========================================================================
   Mobile pass — measured in a 390px viewport on the live site (2026-08-14).
   ========================================================================== */

/* The header CTA cannot shrink inside the flex row, so below the burger
   breakpoint it moves into the menu. This alone was 163px of horizontal
   scroll on EVERY page. */
.nav__cta { display: none; }
@media (max-width: 980px) {
  .hdr__cta { display: none; }
  .nav__cta { display: inline-flex; width: 100%; margin-top: 16px; }
}

/* Safety net against a future stray-wide element. It must be `clip`, not `hidden`:
   `hidden` turns the element into a scroll container and kills position:sticky on
   the header (measured — the header scrolled away with the page). */
body.site { max-width: 100%; overflow-x: clip; }

/* Comfortable tap targets on the small text links and the FAQ rows. */
@media (max-width: 767px) {
  .link-more { display: inline-block; padding: 9px 0; }
  .ftr__col a, .ftr__contact a { display: inline-block; padding: 4px 0; }
  .nav__list a { padding: 15px 0; }
  /* the slider dots stay 10px but get a finger-sized hit area */
  .reviews__dots { gap: 4px; }
  .reviews__dot { background-clip: content-box; border: 9px solid transparent; width: 28px; height: 28px; border-radius: 50%; }
}


/* ==========================================================================
   Fifth pass — defects confirmed by the 2026-08-14 mobile/SEO audit.
   This block is last on purpose: the desktop split rule above it is
   unconditional, so only a later media query can beat it.
   ========================================================================== */

@media (max-width: 1024px) {
  /* the two-column photo blocks DID stay two-column on phones: the desktop rule
     further up the file outranked the mobile one by source order */
  body.inner .split { grid-template-columns: 1fr !important; gap: 30px; }
  body.inner .split__text h2 { font-size: clamp(26px, 6vw, 42px); }
}

@media (max-width: 767px) {
  /* body copy floor: nothing under 14px */
  .ftr__legal p { font-size: 14px; line-height: 1.65; }
  .bk-compliance, .form-fine, .small, .bk-service__blurb, .addon__note, .addon__price,
  .bk-pay-note, .step p, .feature p { font-size: 14px; }

  /* finger-sized targets in the footer and on the contact page */
  .ftr__col li { margin-bottom: 2px; }
  .ftr__col a, .ftr__contact a { display: block; padding: 11px 0; }
  .contact__box { margin-bottom: 2px; }
  .contact__box-title { display: block; padding: 9px 0; }

  /* iOS zooms the page in when a focused field is under 16px */
  .field input, .field textarea, .field select { font-size: 16px; }

  /* a wrapped FAQ question collided with itself at line-height 1 */
  .faq__item summary { line-height: 1.35; }
}

/* An add-on that another add-on forces on: visible, ticked, and not clickable. */
.addon--forced .addon__check { opacity: .55; pointer-events: none; }
.addon__forced { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--green); }

/* ==========================================================================
   Phones: the hero. Measured at 390px on the live site, 2026-08-15.
   ==========================================================================
   What it looked like: .hero paints hero-block.webp with `cover` behind a
   100vh section, so on a 390-wide screen the photo is blown up and cropped to
   a meaningless slice — a keyboard, half a video-call window, part of a face,
   a red hang-up button. On top of that slice floats .hero__text as a
   translucent card with a heavy shadow, and directly beneath it .hero__media
   shows the SAME scene a second time. Three problems stacked on the first
   thing anyone sees on a phone.

   The fix is to stop fighting: on a phone the photo is not readable as a
   background at all, so drop it, let the words sit on the page cleanly, and
   keep the one properly-composed picture underneath. */
@media (max-width: 767px) {
  .hero {
    background-image: none;
    background-color: #fff;
    /* content height, not a full screen of mostly-photo */
    min-height: 0;
    display: block;
  }
  .hero__in { padding: calc(var(--header-h) + 26px) 20px 8px; }

  /* No photo behind it any more, so the frosted card has nothing to do — and
     the shadow made it look like a stray dialog box. */
  .hero__text {
    background: none; border-radius: 0; padding: 0; backdrop-filter: none;
    box-shadow: none; max-width: none;
  }
  .hero h1 { font-size: clamp(32px, 9.2vw, 42px); line-height: 1.06; margin-bottom: 18px; }
  .hero .eyebrow { font-size: 13px; letter-spacing: .02em; margin-bottom: 10px; }
  .hero .lede { max-width: none; }
  .hero__actions { margin-top: 24px; }

  /* the one picture that survives — full-bleed, its own proportions kept */
  .hero__media { margin: 26px 0 0; max-width: none; }
  .hero__media img { width: 100%; height: auto; border-radius: 16px; }
}

/* ==========================================================================
   Phone pass 2 — every defect below was seen in a 390px screenshot of the
   LIVE site and measured, 2026-08-15. Grouped by what a person would notice
   first. (The burger's own fix is in _layout.php: the three bars are now the
   first children, so the existing nth-child animation finally lands on them.)
   ========================================================================== */

/* The floating "back to top" button sat on top of everything. Measured: it is
   fixed at x 322-368, every .btn on a phone is x 20-370, so elementFromPoint at
   the button's centre returned the FAB and not "Book an Appointment" — the tap
   went to the wrong control. On /book-an-appointment it covered the 4:15 PM
   slot. A phone already scrolls to the top by tapping the status bar. */
@media (max-width: 767px) {
  .to-top { display: none !important; }
}

@media (max-width: 767px) {
  /* The four step pictures all sat hard against the left gutter while their
     numbers and captions were centred: `margin:0 auto` was on the block, but
     the image inside it is display:block;width:auto and had no auto margins. */
  .steps__grid .step__media img { margin-left: auto; margin-right: auto; }

  /* Inner pages set the whole text column centred, so 7- and 10-line paragraphs
     came out ragged on both edges. Headings stay centred; the copy reads left. */
  body.inner .split__text { text-align: center; }
  body.inner .split__text p,
  body.inner .split__text ul,
  body.inner .split__text ol,
  body.inner .split__text .checks { text-align: left; }

  /* Big block photos were the only square-cornered things on the page. */
  .split__media img { border-radius: 16px; }

  /* A wrapped page title had zero leading — three 40px lines packed into 120px. */
  .page-head--photo h1 { line-height: 1.14; }

  /* "Get In Touch" (48px) was bigger than the page's own H1 (40px) above it. */
  .contact__info h2 { font-size: clamp(26px, 7vw, 32px); }

  /* Form hints inherited <small> with no size of their own, landing at 13px —
     smaller than anything else on the page, and it is the text that explains
     where the room link goes and which files are accepted. */
  .field > span small { font-size: 14px; }

  /* Tick boxes you must hit to book. 20px is not a thumb target. */
  .consent input, .addon__check input { width: 26px; height: 26px; }
  .qty__btn { width: 44px; height: 44px; }
  .qty__input { height: 44px; }
}

/* The FAQ had no open/close affordance at all: 20 identical grey blocks. The
   base "+" marker was cancelled outright, and below 1024px the summary lost the
   right-hand lane the marker lives in, so when a row WAS open the "–" welded
   itself onto the last word of the question — it read as a typo. */
.faq__item summary::after { content: "+"; }
.faq__item[open] summary::after { content: "–"; }
@media (max-width: 1024px) {
  .faq__item summary { padding: 20px 34px 20px 10px; }
}
@media (max-width: 767px) {
  .faq__a { padding: 7px 10px 18px; }
}

/* The policy pages rendered as one unbroken wall of grey: every block inside
   .prose had margin 0, so 44 of the 45 gaps between children measured 0px, and
   the section headings were the same 16px as the body with no air around them.
   A legal document has to be skimmable — that is most of its job. */
@media (max-width: 767px) {
  .prose div { margin: 0 0 1em; }
  .prose div.prose__space { margin: 0; }
  .prose__h { font-size: 20px; line-height: 1.3; margin: 1.8em 0 .55em; }
  .prose__h--p { margin: 1.8em 0 .55em; }
  .prose, .prose div, .prose p, .prose ul, .prose ol, .prose li { line-height: 1.65; }
}

/* Two full phone screens of stacked footer links — 1,656px on every page, which
   on /contact was 60% of the whole document. Two columns, tighter rhythm. */
@media (max-width: 620px) {
  .ftr { padding-top: 44px; }
  .ftr__in { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .ftr__brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .ftr__col a, .ftr__contact a { padding: 9px 0; }
  /* The phone and email hung under the "Policies" heading with none of their
     own, so they read as two more policies. */
  .ftr__contact { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
}

/* Five features in a two-column grid left the fifth alone beside an empty cell,
   and the headings wrapped inside 165px columns. One clean list instead. */
@media (max-width: 620px) {
  .features { grid-template-columns: 1fr; gap: 26px; }
}

/* Same disease as the hero: a photo used as a `cover` background becomes an
   unrecognisable beige haze on a 390px screen, and it cost half a screen. */
@media (max-width: 620px) {
  .cta-band { background-image: none; background-color: var(--tint); }
  .cta-band__in { padding: 48px 20px; }
}

/* 100px of white above the reviews heading was unconditional, so it beat the
   62px mobile section rhythm and read as a gap where something failed to load. */
@media (max-width: 980px) {
  .section.reviews { padding-top: 62px; }
}

/* The three paper-signing steps on the wills / POA page. Numbered, roomy, and readable
   on a phone — this is the part a client must not skim. */
.how-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.how-steps li { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 22px; font-size: 17px; line-height: 1.55; color: var(--ink); }
.how-steps li:last-child { margin-bottom: 0; }
.how-steps__n {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff;
  display: grid; place-items: center; font: 600 16px/1 var(--head);
}
@media (max-width: 767px) {
  .how-steps li { font-size: 16px; gap: 13px; }
  .how-steps__n { width: 30px; height: 30px; font-size: 15px; }
}

/* ── the four big steps on the Wills / POA page ──────────────────────────────
   They replace a small numbered list: the client asked for them "крупно, со
   крупными значками", because printing and signing on paper is the one thing a
   visitor must understand before booking. Four across on a desktop, two on a
   tablet, one per row on a phone. */
.steps-big {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.steps-big__item {
  position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 20px;
  padding: 34px 24px 28px; text-align: center;
}
.steps-big__icon { display: block; width: 88px; height: 74px; margin: 0 auto 16px; }
.steps-big__n {
  position: absolute; top: 16px; left: 16px;
  width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff;
  display: grid; place-items: center; font: 600 16px/1 var(--head);
}
.steps-big__text { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }

@media (max-width: 1023px) { .steps-big { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 599px) {
  /* One card per row, read left to right: icon, then the sentence. The number moves
     into the corner — stacking it above the text would squeeze the text into a
     column two words wide. */
  .steps-big { grid-template-columns: 1fr; gap: 14px; }
  .steps-big__item {
    display: grid; grid-template-columns: 66px 1fr; grid-template-areas: "icon text";
    gap: 16px; align-items: center; text-align: left; padding: 20px 44px 20px 18px;
  }
  .steps-big__icon { grid-area: icon; width: 66px; height: 56px; margin: 0; }
  .steps-big__text { grid-area: text; font-size: 16px; }
  .steps-big__n { top: 12px; left: auto; right: 12px; width: 28px; height: 28px; font-size: 14px; }
}

/* A drawn illustration is not a photograph: it does not need the full 540px column,
   and at that size the line work reads as oversized. The client asked for these
   blocks smaller and more compact, in the style of the "How it works" icons. */
.split__media img[src$=".svg"] { max-width: 400px; margin-inline: auto; }
@media (max-width: 1023px) { .split__media img[src$=".svg"] { max-width: 340px; } }

/* ── a service group: one icon for the whole group, plain rows for the documents ──
   Replaces the old grid of one card-with-picture per document. Sixty-eight documents
   with sixty-eight illustrations was noise; the icon now belongs to the group and the
   documents are a clean, scannable list. */
.svc-group { margin: 0 0 52px; }
.svc-group:last-of-type { margin-bottom: 0; }
.svc-group__head { display: flex; align-items: center; gap: 18px; margin: 0 0 22px; }
.svc-group__icon { flex: 0 0 auto; width: 62px; height: 52px; }
.svc-group__head h2 { margin: 0; font: 600 clamp(22px, 2.2vw, 30px)/1.15 var(--head); color: var(--green); }

.svc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.svc-list li {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 5px;
}
.svc-list__name { font: 600 16px/1.35 var(--head); color: var(--ink); }
.svc-list__note { font-size: 14px; line-height: 1.5; color: var(--body); }

@media (max-width: 1023px) { .svc-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) {
  .svc-list { grid-template-columns: 1fr; gap: 10px; }
  .svc-group__head { gap: 14px; margin-bottom: 18px; }
  .svc-group__icon { width: 52px; height: 44px; }
  .svc-list li { padding: 14px 16px; }
}

/* ── "Who Accepts Our Documents?" ──────────────────────────────────────────── */
.lede { font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0 0 14px; }
.lede:last-child { margin-bottom: 0; }

.accepts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.accepts__card { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 26px 28px 24px; }
.accepts__list { margin: 0; padding-left: 20px; }
.accepts__list li { font-size: 15px; line-height: 1.6; color: var(--body); margin-bottom: 9px; }
.accepts__list li:last-child { margin-bottom: 0; }
.accepts__note {
  margin: 30px 0 0; padding: 18px 22px; border-radius: 14px;
  background: var(--green-soft); color: var(--ink); font-size: 15px; line-height: 1.6;
}

/* The wall of institutional marks. Same idea as the reference the client sent: the
   logos do the talking, hairline cells, plenty of air. Files are the institutions' own
   published logos — the note under the wall keeps it identification, not endorsement. */
.logo-wall {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
}
.logo-wall li {
  background: var(--white); min-height: 122px; padding: 22px 24px;
  display: flex; align-items: center; justify-content: center;
}
.logo-wall img { max-width: 100%; max-height: 54px; width: auto; height: auto; object-fit: contain; }
.logo-wall__note { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: #9a958a; text-align: center; }

/* Ten groups under the wall: a coloured rule carries the identity, no pictures. */
.accepts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.accepts__card {
  display: flex; gap: 20px; align-items: stretch;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px;
}
.accepts__rule { flex: 0 0 auto; width: 4px; border-radius: 99px; background: var(--green); }
.accepts__body h2 { margin: 0 0 10px; font: 600 19px/1.25 var(--head); color: var(--ink); }
.accepts__card--federal .accepts__rule { background: #C8102E; }
.accepts__card--ontario .accepts__rule { background: #0F5132; }
.accepts__card--courts .accepts__rule { background: #12386B; }
.accepts__card--border .accepts__rule { background: #334155; }
.accepts__card--embassy .accepts__rule { background: #1B4F8A; }
.accepts__card--health .accepts__rule { background: #0F766E; }
.accepts__card--construction .accepts__rule { background: #B45309; }
.accepts__card--insurance .accepts__rule { background: #1D4ED8; }
.accepts__card--financial .accepts__rule { background: #0F3057; }
.accepts__card--regulatory .accepts__rule { background: #9A6B00; }

@media (max-width: 1023px) {
  .accepts { grid-template-columns: 1fr; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .accepts__card { padding: 22px 20px; }
  .logo-wall { grid-template-columns: 1fr; }
  .logo-wall li { min-height: 104px; padding: 20px; }
  .logo-wall img { max-height: 44px; }
  .accepts__card { padding: 20px; gap: 16px; }
  .accepts__body h2 { font-size: 18px; }
  .lede { font-size: 17px; }
}

/* A drawn card icon sits at its own size, not at a percentage of the card: the old
   raster illustrations were sized per item because each had a different crop. */
.doc-card__icon--svg { width: 62px !important; height: 52px; }