:root {
  --paper: #f7f3eb;
  --cream: #eee5d7;
  --card: #fffdf8;
  --ink: #29231e;
  --muted: #766b61;
  --line: #d9cfc1;
  --rust: #a9482b;
  --rust-dark: #7f321e;
  --shell: 82rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 1rem; line-height: 1.6; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration-color: #a99b8d; text-underline-offset: .22em; transition: color .2s var(--ease); }
a:hover { color: var(--rust); }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }
.shell { width: min(calc(100% - (2 * var(--gutter))), var(--shell)); margin-inline: auto; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 20; padding: .75rem 1rem; color: #fff; background: var(--rust-dark); }
.skip-link:focus { top: 1rem; }

.masthead { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid rgba(41,35,30,.12); background: rgba(247,243,235,.92); backdrop-filter: blur(14px); }
.masthead__inner { min-height: 4.75rem; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2rem; }
.wordmark { display: inline-flex; align-items: center; gap: .5rem; width: max-content; text-decoration: none; }
.wordmark__main { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; letter-spacing: -.025em; }
.wordmark__bar { width: 1.75rem; height: 2px; background: var(--rust); }
.wordmark__country { color: var(--muted); font-size: .67rem; font-weight: 700; letter-spacing: .15em; }
.nav { display: flex; gap: 1.75rem; font-size: .86rem; font-weight: 600; }
.nav a, .search-link { text-decoration: none; }
.search-link { padding-bottom: .12rem; border-bottom: 2px solid var(--rust); font-size: .84rem; font-weight: 700; }

h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--serif); font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
h1 { max-width: 12ch; font-size: clamp(3.25rem, 5.8vw, 5.8rem); line-height: .94; }
h2 { font-size: clamp(2.35rem, 4.5vw, 4.5rem); line-height: 1; }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.15; }
.eyebrow { margin: 0 0 1.2rem; color: var(--rust-dark); font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.lede { max-width: 36rem; margin: 1.5rem 0 2rem; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); text-wrap: pretty; }
.text-link { font-weight: 700; text-decoration-thickness: 2px; }

.hero { min-height: calc(100svh - 4.75rem); display: grid; align-items: center; padding: clamp(1.25rem, 2.5vw, 2.5rem) 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(25rem, 1.05fr); align-items: center; gap: clamp(2.5rem, 5vw, 5rem); }
.hero-copy { position: relative; z-index: 1; }
.hero-media, .page-media, .craft-story figure { margin: 0; }
.hero-media { position: relative; }
.hero-media img { height: min(58svh, 34rem); min-height: 22rem; object-fit: cover; border-radius: 45% 45% 1.5rem 1.5rem / 16% 16% 1.5rem 1.5rem; box-shadow: 0 2rem 4rem rgba(79,57,41,.18); }
.hero-media figcaption, .page-media figcaption, .craft-story figcaption { margin-top: .85rem; color: var(--muted); font-family: var(--serif); font-size: .95rem; font-style: italic; }
.hero-stat { position: absolute; right: -1rem; bottom: 2.5rem; padding: 1rem 1.2rem; color: #fff; background: var(--rust); box-shadow: 0 1rem 2rem rgba(79,57,41,.2); }
.hero-stat strong { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1; }
.hero-stat span { font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.find-form { max-width: 37rem; display: grid; grid-template-columns: 1fr auto; gap: .65rem; align-items: end; }
.field label { display: block; margin-bottom: .55rem; color: var(--ink); font-size: .82rem; font-weight: 700; }
input { width: 100%; min-height: 3.75rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: .25rem; color: var(--ink); background: var(--card); }
input::placeholder { color: #918579; }
.button { min-height: 3.75rem; padding: .8rem 1.45rem; border: 1px solid var(--rust); border-radius: .25rem; color: #fff; background: var(--rust); font-weight: 750; cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease); }
.button:hover { background: var(--rust-dark); transform: translateY(-2px); }
.button:active { transform: translateY(1px); }

.city-rail { border-block: 1px solid var(--line); background: var(--cream); }
.city-rail .shell { min-height: 6rem; display: grid; grid-template-columns: 10rem 1fr; align-items: center; gap: 2rem; }
.city-rail > .shell > span, .section-heading > span { color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.city-rail div { display: flex; justify-content: space-between; gap: 1rem; }
.city-rail a { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; text-decoration: none; }

.craft-story { padding: clamp(5rem, 10vw, 9rem) 0; }
.craft-story__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(17rem, .65fr); align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.craft-story img { height: clamp(22rem, 42vw, 36rem); object-fit: cover; border-radius: .5rem; }
.craft-story p:last-child { max-width: 31rem; color: var(--muted); font-size: 1.1rem; }

.section { padding: clamp(5rem, 9vw, 8rem) 0; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.75rem; }
.section-heading a { color: var(--muted); font-size: .88rem; font-weight: 650; text-decoration: none; }
.section-grid { display: grid; grid-template-columns: minmax(14rem, .65fr) minmax(0, 1.35fr); gap: clamp(3rem, 8vw, 8rem); }
.section-grid > div:first-child p { max-width: 24rem; color: var(--muted); }
.index-list, .directory-list { margin: 0; padding: 0; list-style: none; }
.index-list--tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.2vw, 2rem); }
.index-card { display: block; overflow: hidden; color: var(--ink); background: var(--card); text-decoration: none; box-shadow: 0 1rem 2.5rem rgba(79,57,41,.08); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.index-card:hover { color: var(--ink); transform: translateY(-5px); box-shadow: 0 1.5rem 3rem rgba(79,57,41,.14); }
.index-card__media { height: clamp(10rem, 18vw, 15rem); object-fit: cover; transition: transform .6s var(--ease); }
.index-card:hover .index-card__media { transform: scale(1.025); }
.index-card__body { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.35rem 1.4rem; }
.index-card__body strong { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 600; }
.index-card__body span { color: var(--muted); font-size: .78rem; text-align: right; }
/* Compatibility for generated pages made before the editorial card template. */
.index-list--tiles > li:not(:has(.index-card)) { position: relative; overflow: hidden; min-height: 20rem; display: grid; align-content: end; padding: 1.4rem; background: var(--card); box-shadow: 0 1rem 2.5rem rgba(79,57,41,.08); }
.index-list--tiles > li:not(:has(.index-card))::before { content: ""; position: absolute; inset: 0 0 5.5rem; background: var(--card-image, url('/assets/portfolio-install.jpg')) center / cover; }
.index-list--tiles > li:nth-child(1) { --card-image: url('/assets/businesses/9df9fe80d95c-amp-motorsports-inc-xpel-paint-protection-film-ppf-window-tinting-ceramic-coating-detailing-vinyl-wraps-more-1-4868943e54f5.jpg'); }
.index-list--tiles > li:nth-child(2) { --card-image: url('/assets/businesses/1e6ed8d5a8fd-satin-auto-wrap-1-61c9e3a870b1.jpg'); }
.index-list--tiles > li:nth-child(3) { --card-image: url('/assets/businesses/34b886ee432d-wraptors-tricity-wrap-ppf-starlight-paint-protection-film-1-c851ccaed638.jpg'); }
.index-list--tiles > li:nth-child(4) { --card-image: url('/assets/businesses/5686fb59e59b-s-a-signs-wraps-in-mississauga-1-bd56b2debfc5.jpg'); }
.index-list--tiles > li:nth-child(5) { --card-image: url('/assets/businesses/74b5885b5496-summit-wraps-1-9d85fa3b298b.jpg'); }
.index-list--tiles > li:nth-child(6) { --card-image: url('/assets/businesses/8186a13a5c3f-colibri-car-wrap-and-detailing-1-8a3939fe42a5.jpg'); }
.index-list--tiles > li:nth-child(7) { --card-image: url('/assets/businesses/a073d91c65e4-wrap-id-vehicle-wrap-ppf-ceramic-coating-window-tint-digital-print-corporate-events-1-ffe07db5e760.jpg'); }
.index-list--tiles > li:nth-child(8) { --card-image: url('/assets/businesses/c2cdeff7bec9-exotik-wrapz-car-wraps-1-2a0316df88d5.jpg'); }
.index-list--tiles > li:nth-child(9) { --card-image: url('/assets/businesses/dbe2a19f592d-toronto-car-wrap-1-f6ea040c1919.jpg'); }
.index-list--tiles > li:nth-child(10) { --card-image: url('/assets/businesses/e1f17ee98e91-ev1studio-ppf-wraps-ceramic-coating-car-detailing-studio-1-2e0e68073c77.jpg'); }
.index-list--tiles > li:nth-child(11) { --card-image: url('/assets/businesses/94f7e0efd40c-yyz-wraps-1-57c186418b67.jpg'); }
.index-list--tiles > li:nth-child(12) { --card-image: url('/assets/businesses/21ddd028eb6c-mad-graphics-1-19212d15dc09.jpg'); }
.index-list--tiles > li:nth-child(13) { --card-image: url('/assets/businesses/89c424b6860c-wrap-academy-of-canada-1-160a4e86dc04.jpg'); }
.index-list--tiles > li:nth-child(14) { --card-image: url('/assets/businesses/03091bc017ee-halifax-tint-plus-ceramic-coat-ppf-detail-car-wrap-more-1-ef82fcdaf89f.jpg'); }
.index-list--tiles > li:nth-child(15) { --card-image: url('/assets/businesses/120bf35999fd-promax-trois-rivieres-films-solaires-anti-chaleur-uv-residentielles-films-protection-de-peinture-ppf-3m-vitres-teintees-1-3606cff71155.jpg'); }
.index-list--tiles > li:nth-child(16) { --card-image: url('/assets/businesses/229b2abd850b-wrap-central-1-1b3629f4af93.jpg'); }
.index-list--tiles > li:nth-child(17) { --card-image: url('/assets/businesses/29fe2bb2204a-nl-wraps-and-designs-1-f3f0fdcc58c6.jpg'); }
.index-list--tiles > li:nth-child(18) { --card-image: url('/assets/businesses/403a226a193d-amp-motorsports-inc-barrie-xpel-paint-protection-film-ppf-window-tint-detailing-ceramic-coating-paint-correction-1-d10a57a18abf.jpg'); }
.index-list--tiles > li:nth-child(19) { --card-image: url('/assets/businesses/57513f30b594-wrap-it-signs-1-5b490ff84c59.jpg'); }
.index-list--tiles > li:nth-child(20) { --card-image: url('/assets/businesses/7e71a3a58853-la-maison-des-wraps-1-9ce519ac5aee.jpg'); }
.index-list--tiles > li:not(:has(.index-card)) > * { position: relative; z-index: 1; }
.index-list--tiles > li:not(:has(.index-card)) > .mono:first-child { display: none; }
.index-list--tiles > li:not(:has(.index-card)) > a { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; text-decoration: none; }
.index-list--tiles > li:not(:has(.index-card)) > .mono:last-child { color: var(--muted); font-family: var(--sans); font-size: .75rem; }

.crumbs { padding-top: 1.35rem; color: var(--muted); font-size: .78rem; }
.page-head { padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(4rem, 8vw, 7rem); }
.page-head__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(25rem, 1.15fr); align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.page-head h1 { max-width: 13ch; font-size: clamp(3rem, 5vw, 5rem); }
.page-media img { height: clamp(22rem, 44vw, 36rem); object-fit: cover; border-radius: 16rem 16rem .5rem .5rem; }
.page-orbit, .page-note { position: relative; min-height: clamp(22rem, 44vw, 36rem); display: flex; flex-direction: column; justify-content: end; padding: 1.25rem; overflow: hidden; border-radius: 16rem 16rem .5rem .5rem; color: #fff; background: linear-gradient(to top, rgba(32,25,20,.72), transparent 55%), url('/assets/portfolio-install.jpg') center / cover; }
.page-orbit span { font-size: .82rem; font-weight: 700; }
.page-orbit strong { font-family: var(--serif); font-size: 3rem; line-height: 1; }
.page-note { margin: 0; justify-content: end; font-family: var(--serif); font-style: italic; }

.data-band { padding: 1.5rem 0; border-block: 1px solid var(--line); background: var(--cream); }
.data-band__grid { display: flex; gap: clamp(2.5rem, 7vw, 7rem); }
.data-point span { display: block; color: var(--muted); font-size: .76rem; }
.data-point strong { display: block; margin-top: .1rem; font-family: var(--serif); font-size: 1.55rem; font-weight: 600; }

.directory-section { background: var(--card); }
.directory-list { border-top: 1px solid var(--line); }
.directory-row { display: grid; grid-template-columns: minmax(0, 1fr) 7rem auto; gap: 2rem; align-items: center; padding: 1.8rem .25rem; border-bottom: 1px solid var(--line); transition: padding .25s var(--ease), background .25s var(--ease); }
.directory-row:hover { padding-inline: 1rem; background: var(--paper); }
.directory-row h3 a { text-decoration: none; }
.directory-row p { margin: .45rem 0 0; color: var(--muted); font-size: .88rem; }
.rating-block { text-align: right; }
.rating-block strong { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.rating-block span { color: var(--muted); font-size: .72rem; }
.arrow-link { padding-bottom: .15rem; border-bottom: 1px solid var(--rust); text-decoration: none; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.arrow-link span { color: var(--rust); }
.empty-row { padding: 3rem 0; color: var(--muted); }

.facts { margin: 0; }
.fact { display: grid; grid-template-columns: 10rem 1fr; gap: 2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
dt { color: var(--muted); font-size: .78rem; font-weight: 650; }
dd { margin: 0; }
.subhead { margin-top: 3rem; }
.hours-list { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.hours-list li { padding: .85rem 1rem; color: #51483f; background: var(--cream); }

.footer { padding: 4.5rem 0 2rem; border-top: 1px solid var(--line); background: var(--cream); }
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 5rem; }
.footer p { max-width: 22rem; color: var(--muted); }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer li + li { margin-top: .55rem; }
.footer a { text-decoration: none; }
.footer-bottom { margin-top: 4rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }

.will-reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.will-reveal[data-reveal="media"] { transform: translateY(16px) scale(.985); }
.will-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 780px) {
  .masthead__inner { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .hero { min-height: auto; padding-block: 2.5rem 4rem; }
  .hero-grid, .page-head__grid, .craft-story__grid, .section-grid { grid-template-columns: 1fr; }
  .hero-media, .page-media { max-width: 45rem; }
  .page-media img { border-radius: 12rem 12rem .5rem .5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  h1 { font-size: clamp(2.8rem, 13vw, 4.25rem); }
  .search-link { display: none; }
  .hero-grid { gap: 2.5rem; }
  .hero-media img { min-height: 20rem; height: 48vh; }
  .find-form { grid-template-columns: 1fr; }
  .button { width: 100%; }
  .city-rail .shell { grid-template-columns: 1fr; gap: .75rem; padding-block: 1.25rem; }
  .city-rail div { display: grid; grid-template-columns: 1fr 1fr; }
  .index-list--tiles { grid-template-columns: 1fr; }
  .index-card__media { height: 13rem; }
  .section-heading { align-items: start; flex-direction: column; }
  .directory-row { grid-template-columns: 1fr auto; gap: .75rem 1rem; }
  .directory-row .arrow-link { grid-column: 1; justify-self: start; }
  .data-band__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .fact, .hours-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid > :first-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .will-reveal { opacity: 1; transform: none; }
}