/* ==========================================================================
   SUPERIOR INTERIORS — Professional Painting Services
   Markham, ON · serving the GTA · 416-569-3205

   Rebuilt by HumanPlanet Media. Hand-built, no framework, no build step.

   EVERYTHING ON THIS SITE IS REAL. The photographs are Wayne's own work, the
   testimonials are the ones from the previous site, the phone number is his.
   Nothing here is invented — this is a real company, so nothing may be.

   COLOUR
   Drawn from the logo: #0270BB blue with a red rule. Unlike a hi-vis yellow,
   this blue is 5.2:1 on white, so it can carry text as well as fill a shape.
   The red is used exactly as the logo uses it — a short rule, never a field.
   ========================================================================== */

:root {
  color-scheme: light;

  --paper:    #FFFFFF;
  --paper-2:  #F4F7F9;   /* cool off-white, sits under the blue            */
  --paper-3:  #E7EDF2;

  --ink:      #10222F;   /* 16.3:1 — deep blue-black, all display type     */
  --ink-2:    #46586A;   /*  7.4:1 — body                                  */
  --ink-3:    #5F7080;   /*  5.1:1 — the floor for small text              */

  --blue:      #0270BB;  /*  5.2:1 — the logo blue. Text-safe.             */
  --blue-deep: #015A96;  /*  7.2:1 — hover, and type on pale grounds       */
  --blue-ink:  #0B3D63;  /* 11.3:1 — headings on tinted panels             */
  --blue-soft: rgba(2,112,187,.08);

  --red:      #C8102E;   /*  5.9:1 — the logo rule. A line, never a field. */

  --rule:     rgba(16,34,47,.16);
  --rule-2:   rgba(16,34,47,.08);

  --display: "Barlow Condensed", "Archivo", Helvetica, Arial, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw: 1200px;
  --gut:  1.25rem;
  --r:    10px;
  --r-sm: 6px;
  --tap:  46px;

  --shadow-1: 0 1px 2px rgba(16,34,47,.06), 0 8px 22px rgba(16,34,47,.08);
  --shadow-2: 0 2px 8px rgba(16,34,47,.08), 0 22px 50px rgba(16,34,47,.14);
  --ease: cubic-bezier(.22,.61,.36,1);
}
@media (min-width: 700px)  { :root { --gut: 2rem; } }
@media (min-width: 1000px) { :root { --gut: 3rem; } }

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--paper); color: var(--ink-2);
  font-family: var(--sans); font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

/* --------------------------------------------------------------------------
   TYPE — condensed for the headings, the way trade signage and truck livery
   is set. `pretty` not `balance`, so lines fill the measure.
   -------------------------------------------------------------------------- */
h1, h2, h3, .display {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  letter-spacing: -.01em; line-height: 1.06;
  text-wrap: pretty; overflow-wrap: break-word;
}
h1 { font-size: clamp(2.4rem, 1rem + 6.4vw, 5rem); }
h2 { font-size: clamp(1.95rem, 1rem + 3.4vw, 3.3rem); }
h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.012em;
     font-size: clamp(1.1rem, .96rem + .5vw, 1.3rem); line-height: 1.3; }

.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-deep);
}
/* The logo's red rule, reused as the section marker. */
.eyebrow::after {
  content: ""; display: block; width: 34px; height: 3px;
  background: var(--red); margin-top: .5rem;
}
.eyebrow.no-rule::after { display: none; }

.lede  { font-size: clamp(1.08rem, 1rem + .55vw, 1.3rem); color: var(--ink-2); line-height: 1.55; }
.small { font-size: .95rem; color: var(--ink-2); line-height: 1.55; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }
@media (min-width: 700px) { .small { font-size: .88rem; } }

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.wrap    { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap-nr { max-width: 860px;      margin-inline: auto; padding-inline: var(--gut); }
section  { padding-block: clamp(3rem, 7vw, 6.5rem); }
.band    { background: var(--paper-2); border-block: 1px solid var(--rule-2); }
.dark    { background: var(--ink); color: #C6D2DC; }
.dark h2, .dark h3 { color: #fff; }
.dark .lede { color: #C6D2DC; }
.dark .eyebrow { color: #6FB4E4; }
.sec-head { max-width: 70ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.sec-head h2 { margin-block: .7rem .7rem; }

/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */
.nav { background: var(--paper); border-bottom: 1px solid var(--rule-2); z-index: 50; }
.nav .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; padding-block: .7rem 0; }
.nav > .wrap > .btn { display: none; }
.mark { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.mark img { height: 34px; width: auto; }
.mark-txt { display: flex; flex-direction: column; line-height: 1.05; }
.mark-name { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--ink); letter-spacing: -.01em; }
.mark-sub { font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

.nav-links {
  order: 3; flex: 0 0 100%; display: flex; justify-content: space-between; gap: .2rem;
  list-style: none; padding: 0; margin: .55rem 0 0; border-top: 1px solid var(--rule-2);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.nav-links a {
  display: flex; align-items: center; min-height: var(--tap); padding: 0 .35rem; white-space: nowrap;
  text-decoration: none; font-size: .93rem; font-weight: 600; color: var(--ink-2);
  border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .18s, border-color .18s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); border-color: var(--red); }
@media (min-width: 940px) {
  .nav { position: sticky; top: 0; }
  .nav .wrap { flex-wrap: nowrap; gap: 1.5rem; height: 82px; padding-block: 0; }
  .nav > .wrap > .btn { display: inline-flex; }
  .nav-links { order: 0; flex: 0 1 auto; margin: 0 0 0 auto; justify-content: flex-start; gap: 1.5rem; border-top: 0; overflow: visible; }
  .nav-links a { min-height: 0; padding: .3rem 0; margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap); padding: .8rem 1.4rem; border-radius: var(--r-sm);
  border: 2px solid transparent; font-size: 1rem; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .14s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn-blue { background: var(--blue); color: #fff; box-shadow: var(--shadow-1); }
.btn-blue:hover { background: var(--blue-deep); box-shadow: var(--shadow-2); }
.btn-ghost { border-color: var(--rule); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-lg { min-height: 54px; padding: 1rem 1.7rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }
.cta-row .btn { width: 100%; }
@media (min-width: 480px) { .cta-row .btn { width: auto; } }

/* Phone — the most important control on any trades site. */
.tel { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem; text-decoration: none; }
.tel-num { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.3rem); color: var(--ink); letter-spacing: -.01em; }
.tel-lab { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   HERO — Wayne in front of his own mural. The most credible single frame the
   business owns: the man and the work at scale, in one photograph.
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 5vw, 3.5rem); }
.hero .wrap { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.hero-copy { max-width: 56ch; }
.hero h1 { margin-block: .9rem .2rem; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero .lede { margin-top: 1.15rem; max-width: 54ch; }
.hero-tel { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.hero-shot { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-2); }
.hero-shot img { width: 100%; height: auto; }
.hero-shot figcaption {
  position: absolute; left: .75rem; bottom: .75rem; background: rgba(255,255,255,.95);
  color: var(--ink); font-size: .75rem; font-weight: 600; padding: .45rem .8rem;
  border-radius: var(--r-sm); box-shadow: var(--shadow-1);
}
@media (min-width: 950px) { .hero .wrap { grid-template-columns: 1fr 1.05fr; } }

/* Two-column split for the copy-plus-panel sections. */
.split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 950px) { .split { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   STATS
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.6rem 1.2rem; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4,1fr); } }
.stat-n { font-family: var(--display); font-weight: 700; font-size: clamp(2.5rem,1.4rem+4vw,3.6rem); line-height: 1; color: var(--blue); }
.stat-l { font-size: .92rem; line-height: 1.45; color: var(--ink-2); margin-top: .45rem; max-width: 22ch; }

/* --------------------------------------------------------------------------
   WORK GRID — real photographs, so let them be big.
   -------------------------------------------------------------------------- */
.work { display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 620px) { .work { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 980px) { .work { grid-template-columns: repeat(3,1fr); } }
.shot { position: relative; border-radius: var(--r); overflow: hidden; background: var(--paper-3); box-shadow: var(--shadow-1); }
.shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .6s var(--ease); }
.shot:hover img { transform: scale(1.04); }
.shot figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.5rem .9rem .8rem;
  background: linear-gradient(transparent, rgba(16,34,47,.82));
  color: #fff; font-size: .87rem; font-weight: 600;
}
.shot.is-tall img { aspect-ratio: 3/4; }
@media (min-width: 980px) { .shot.is-wide { grid-column: span 2; } .shot.is-wide img { aspect-ratio: 8/5; } }

/* --------------------------------------------------------------------------
   BEFORE / AFTER — Wayne's own photographs of one wall.
   -------------------------------------------------------------------------- */
.ba { border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-1); background: var(--paper-3); }
.ba-stage { position: relative; aspect-ratio: 4/3; user-select: none; touch-action: pan-y; cursor: ew-resize; }
@media (min-width: 700px) { .ba-stage { aspect-ratio: 16/10; } }
.ba-layer { position: absolute; inset: 0; }
.ba-layer img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ba-after { clip-path: inset(0 0 0 var(--wipe, 50%)); }
.ba-hand { position: absolute; top: 0; bottom: 0; left: var(--wipe, 50%); width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(16,34,47,.35); transform: translateX(-1px); pointer-events: none; }
.ba-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 2px solid var(--ink);
  display: grid; place-items: center; color: var(--ink);
}
.ba-knob svg { width: 24px; height: 24px; }
.ba-tag {
  position: absolute; bottom: .75rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; background: #fff; color: var(--ink); padding: .36rem .7rem;
  border-radius: var(--r-sm); pointer-events: none; box-shadow: var(--shadow-1);
}
.ba-tag.is-a { left: .75rem; } .ba-tag.is-b { right: .75rem; }

/* --------------------------------------------------------------------------
   VISUALISER
   Shades of this site's own palette, not a rainbow. Six tones that actually
   belong together, washed over one of Wayne's rooms with a blend mode — so
   the preview is his real wall, not a drawing of one.
   -------------------------------------------------------------------------- */
.vis { border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-1); background: var(--paper); }
.vis-stage { position: relative; aspect-ratio: 4/3; overflow: hidden; }
@media (min-width: 700px) { .vis-stage { aspect-ratio: 16/10; } }
.vis-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vis-wash {
  position: absolute; inset: 0; background-color: transparent;
  /* No `opacity` here. Opacity on the same element as mix-blend-mode gives it
     its own stacking context, which isolates the blend and the wash silently
     does nothing. Strength is baked into the rgba instead. */
  mix-blend-mode: multiply;
  transition: background-color .45s var(--ease);
}
.vis-name {
  position: absolute; left: .75rem; bottom: .75rem; background: rgba(255,255,255,.95);
  color: var(--ink); font-size: .8rem; font-weight: 700; padding: .4rem .8rem;
  border-radius: var(--r-sm); box-shadow: var(--shadow-1);
}
.vis-bar { display: flex; flex-wrap: wrap; gap: .45rem; padding: .8rem; border-top: 1px solid var(--rule); }
.vis-sw {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  padding: .45rem .85rem .45rem .5rem; border: 2px solid var(--rule); border-radius: var(--r-sm);
  background: transparent; cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--ink);
  transition: border-color .18s, background .18s;
}
.vis-sw:hover { border-color: var(--ink-3); }
.vis-sw[aria-pressed="true"] { border-color: var(--ink); background: var(--paper-2); }
.vis-sw i { width: 22px; height: 22px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px rgba(16,34,47,.22); }

/* --------------------------------------------------------------------------
   FRONT DESK — the same machine as the TRADES kit, in Superior's colours.
   -------------------------------------------------------------------------- */
.fd { border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--paper); box-shadow: var(--shadow-2); }
.fd-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .7rem .9rem; background: var(--ink); color: #fff; }
.fd-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; }
.fd-title { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fd-for { font-size: .76rem; margin-left: auto; opacity: .72; }
.fd-panel { padding: 1.4rem 1.2rem; display: flex; flex-direction: column; justify-content: center; gap: .8rem; min-height: 330px; }
.fd-panel[hidden] { display: none; }
.fd-q { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: clamp(1.4rem,1.05rem+1.6vw,1.85rem); line-height: 1.15; }
.fd-sub { font-size: .95rem; color: var(--ink-2); line-height: 1.5; }
.fd-opts { display: grid; gap: .55rem; }
.fd-opt {
  display: block; width: 100%; min-height: 56px; padding: .8rem 1rem; text-align: left;
  border: 2px solid var(--rule); border-radius: var(--r-sm); background: var(--paper); cursor: pointer;
  transition: border-color .16s, background .16s, transform .14s var(--ease);
}
.fd-opt:hover { border-color: var(--blue); background: var(--blue-soft); transform: translateY(-2px); }
.fd-opt b { display: block; font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.fd-opt span { display: block; font-size: .85rem; color: var(--ink-3); }
.fd-field { display: block; margin-bottom: .6rem; }
.fd-field span { display: block; font-size: .8rem; font-weight: 700; color: var(--ink); margin-bottom: .3rem; }
.fd-field input {
  width: 100%; min-height: var(--tap); font-size: 16px;  /* 16px or iOS zooms */
  padding: .7rem .85rem; border: 2px solid var(--rule); border-radius: var(--r-sm); background: var(--paper);
}
.fd-field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.fd-note { font-size: .82rem; color: var(--red); font-weight: 600; }
.fd-back { align-self: flex-start; background: none; border: 0; cursor: pointer; color: var(--ink-3); font-size: .87rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: .4rem 0; }
.fd-done { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; }
.fd-done svg { width: 22px; height: 22px; }
.fd-tag { align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .28em .6em; border-radius: 3px; background: var(--blue); color: #fff; }
.fd-tag.is-hot { background: var(--red); }
.fd-tag.is-cool { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 2px var(--rule); }
.fd-foot { padding: .75rem .9rem; border-top: 1px solid var(--rule); background: var(--paper-2); font-size: .87rem; color: var(--ink-2); }
.fd-foot b { color: var(--ink); }

/* --------------------------------------------------------------------------
   QUOTES — the three real testimonials from the previous site, verbatim.
   -------------------------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(3,1fr); } }
.quote { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
.dark .quote { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.quote p { font-size: 1.06rem; line-height: 1.5; color: var(--ink); }
.dark .quote p { color: #fff; }
.quote footer { margin-top: auto; display: flex; align-items: center; gap: .55rem; font-size: .86rem; font-weight: 600; color: var(--ink-3); }
.dark .quote footer { color: #9FB3C4; }
.quote footer::before { content: ""; width: 20px; height: 3px; background: var(--red); flex: none; }

/* --------------------------------------------------------------------------
   SERVICES / STEPS
   -------------------------------------------------------------------------- */
.svc { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
@media (min-width: 700px) { .svc { grid-template-columns: repeat(3,1fr); } }
.svc-item { background: var(--paper); padding: 1.6rem 1.4rem; }
.svc-item h3 { margin-bottom: .45rem; }
.svc-item p { font-size: .96rem; color: var(--ink-2); line-height: 1.55; }
.svc-n { font-size: .74rem; font-weight: 700; letter-spacing: .13em; color: var(--blue-deep); margin-bottom: .7rem; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.foot { background: var(--ink); color: #A9BAC7; padding-block: 3rem 2rem; }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 620px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.foot h4 { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: .8rem; font-weight: 700; }
.foot ul { list-style: none; padding: 0; display: grid; gap: .1rem; font-size: .96rem; }
.foot li { padding-block: .3rem; }
.foot a { color: #C6D2DC; text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.foot a:hover { color: #fff; }
.foot-base { margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between; font-size: .82rem; color: #8DA1B1; }

/* --------------------------------------------------------------------------
   REVEAL + STICKY CALL
   -------------------------------------------------------------------------- */
.rise { opacity: 0; transform: translateY(15px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rise.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

.sticky-call {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: .65rem var(--gut) calc(.65rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 2px solid var(--ink);
}
body { padding-bottom: 5rem; }
@media (min-width: 940px) { .sticky-call { display: none; } body { padding-bottom: 0; } }