/* ============================================================
   GNR General Painting LLC — single-page site
   Palette pulled from the logo: steel blue, gold, charcoal.
   ============================================================ */

:root {
  --blue: #347a98;
  --blue-deep: #235e80;
  --yellow: #fbb418;
  --ink: #3d3e42;
  --ink-soft: #5c5e66;
  --paper: #fdfcfa;
  --paper-tint: #edf3f7;
  --line: #e4e1d9;
  /* Background baked into logo.JPG — flip to #fff once the logo is
     re-exported with a white background */
  --logo-bg: #f7f7f7;
  --radius: 18px;
  --shadow: 0 20px 45px -25px rgba(35, 94, 128, 0.35);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Outfit", system-ui, -apple-system, sans-serif;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2.4rem, 5.5vw, 3.9rem);
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
}

h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.35em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--blue-deep);
}

::selection {
  background: var(--yellow);
  color: #2b2b2e;
}

.wrap {
  max-width: 1100px;
  margin-inline: auto;
}

section {
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 5vw, 3rem);
  scroll-margin-top: 84px;
}

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 0.9em;
}

.section-lead {
  max-width: 46ch;
  margin-bottom: 2.5rem;
}

/* Painterly highlight behind key words */
.marker {
  padding: 0 0.1em;
  background-image: linear-gradient(
    100deg,
    rgba(246, 168, 33, 0) 2%,
    rgba(246, 168, 33, 0.38) 10%,
    rgba(246, 168, 33, 0.38) 90%,
    rgba(246, 168, 33, 0) 98%
  );
  background-repeat: no-repeat;
  background-size: 100% 44%;
  background-position: 0 82%;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  transition:
    background-position 0.35s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.btn:active {
  transform: scale(0.98);
}

/* "Wet paint" sweep: a darker coat rolls across on hover */
.btn-solid {
  color: #fff;
  background-image: linear-gradient(
    100deg,
    var(--blue-deep) 50%,
    var(--blue) 50.5%
  );
  background-size: 220% 100%;
  background-position: 99% 0;
}

.btn-solid:hover {
  background-position: 0 0;
}

.btn-ghost {
  color: var(--ink);
  border: 1.5px solid var(--line);
  background-image: linear-gradient(
    100deg,
    var(--paper-tint) 50%,
    transparent 50.5%
  );
  background-size: 220% 100%;
  background-position: 99% 0;
}

.btn-ghost:hover {
  background-position: 0 0;
  border-color: var(--blue);
}

.btn-sm {
  padding: 0.5rem 1.1rem;
  font-size: 0.92rem;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.65rem clamp(1.25rem, 4vw, 3rem);
  background: var(--logo-bg);
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, var(--blue), var(--yellow), var(--ink)) 1;
}

.brand {
  margin-right: auto;
  display: flex;
}

.brand img {
  height: 46px;
  width: auto;
}

.site-header nav {
  display: flex;
  gap: 1.6rem;
}

.site-header nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.98rem;
  padding-bottom: 2px;
  background-image: linear-gradient(90deg, var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-size: 0% 2.5px;
  background-position: 0 100%;
  transition: background-size 0.3s ease;
}

.site-header nav a:hover {
  background-size: 100% 2.5px;
}

/* ---------- Hero ---------- */

.hero {
  background: var(--paper-tint);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--blue-deep);
}

.lead {
  font-size: 1.14rem;
  max-width: 52ch;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.8rem 0;
}

.badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

.badges li {
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--blue-deep);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
}

.badges em {
  font-style: normal;
  opacity: 0.6;
}

/* The logo as a "canvas", with CSS paint drips running off the artwork
   itself. The canvas hugs the image exactly (no padding), so each
   drip's left/top percentages are coordinates on logo.JPG — nudge them
   to line up with the artwork. */
.hero-art {
  display: flex;
  justify-content: center;
}

.canvas {
  position: relative;
  background: var(--logo-bg);
  border-radius: 14px;
  box-shadow: var(--shadow);
  rotate: -2deg;
  transition: rotate 0.4s ease;
  max-width: 420px;
}

.canvas:hover {
  rotate: 0deg;
}

.canvas img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.drip {
  position: absolute;
  border-radius: 0 0 999px 999px;
  transform-origin: top center;
  animation: drip-grow 5.5s ease-in-out infinite alternate;
}

/* A droplet detaches from the tip of each drip and falls */
.drip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: inherit;
  opacity: 0;
  animation: droplet-fall 3.4s ease-in infinite;
}

/* From the bottom of the yellow tower */
.drip.d1 {
  left: 15.5%;
  top: 92%;
  width: 2.6%;
  height: 16%;
  background: var(--yellow);
  animation-duration: 6.5s;
}

/* From the bottom of the right blue band */
.drip.d2 {
  left: 26%;
  top: 92%;
  width: 3%;
  height: 22%;
  background: var(--blue);
  animation-delay: 0.9s;
}

.drip.d2::after {
  animation-delay: 1.4s;
}

/* From the paintbrush at the bottom right */
.drip.d3 {
  left: 70%;
  top: 90%;
  width: 2.8%;
  height: 16%;
  background: var(--yellow);
  animation-delay: 1.7s;
}

.drip.d3::after {
  animation-delay: 2.6s;
}

@keyframes drip-grow {
  from {
    transform: scaleY(0.72);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes droplet-fall {
  0%,
  55% {
    transform: translateY(0);
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  100% {
    transform: translateY(70px);
    opacity: 0;
  }
}

/* Dripping edge between hero and the rest of the page */
.drip-divider {
  background: var(--paper);
  margin-top: -1px;
}

.drip-divider svg {
  display: block;
  width: 100%;
  height: clamp(40px, 6vw, 80px);
}

.drip-divider path {
  fill: var(--paper-tint);
}

/* ---------- Services ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 1.2rem;
}

.card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.6rem 1.9rem;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--blue);
  box-shadow: var(--shadow);
}

/* A stripe of paint rolls along the bottom edge on hover */
.card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.card:hover::after {
  transform: scaleX(1);
}

.card .icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--paper-tint);
  color: var(--blue);
  margin-bottom: 1.1rem;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.card:hover .icon {
  background: var(--blue);
  color: #fff;
}

.card .icon svg {
  width: 26px;
  height: 26px;
}

.card p {
  margin: 0;
  font-size: 0.98rem;
}

/* ---------- Benefits ---------- */

.benefits {
  background: var(--paper-tint);
}

.benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.4rem;
}

.benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.benefit-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--yellow);
  color: #2b2b2e;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.benefit-list p {
  margin: 0.45rem 0 0;
}

/* ---------- Before / after comparison ---------- */

.work {
  background: var(--paper);
}

.compare {
  margin: 0 auto 1rem;
  max-width: 880px;
}

.compare-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: ew-resize;
}

.compare-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.compare-frame .img-before {
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

/* Before/After chips. Each sits in a frame-sized layer clipped in sync
   with the slider, so a label only shows over its own photo and slides
   away as the handle crosses it. */
.label-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.layer-before {
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

.layer-after {
  clip-path: inset(0 0 0 var(--pos, 50%));
}

.compare-label {
  position: absolute;
  top: 1rem;
  padding: 0.4rem 1rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.label-before {
  left: 1rem;
  background: rgba(61, 62, 66, 0.92);
  color: #fff;
}

.label-after {
  right: 1rem;
  background: var(--yellow);
  color: #2b2b2e;
}

/* A 44px-wide grab strip centered on the divider. It is the only part
   of the slider that blocks touch gestures, so vertical swipes on the
   photos scroll the page normally. The visible 3px line is drawn by
   the gradient. */
.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 44px;
  transform: translateX(-50%);
  touch-action: none;
  cursor: ew-resize;
  background: linear-gradient(
    90deg,
    transparent calc(50% - 1.5px),
    #fff calc(50% - 1.5px),
    #fff calc(50% + 1.5px),
    transparent calc(50% + 1.5px)
  );
}

.compare-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.compare-handle::after {
  content: "◂ ▸";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -52%;
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: var(--blue-deep);
}

/* Keyboard & screen-reader control only — pointer input goes to the
   handle (touch) or the frame (mouse) via script.js */
.compare-frame input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Visible focus ring when the slider is driven by keyboard */
.compare-frame:focus-within {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.compare figcaption {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 1rem;
  color: var(--ink-soft);
}

.compare figcaption em {
  opacity: 0.65;
}

/* Additional before/after pairs, two-up under the main slider */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  max-width: 880px;
  margin: 1.2rem auto 0;
}

.compare-grid .compare {
  margin: 0;
}

.compare-grid .compare-label {
  top: 0.75rem;
  font-size: 0.7rem;
  padding: 0.28rem 0.7rem;
}

.compare-grid .label-before {
  left: 0.75rem;
}

.compare-grid .label-after {
  right: 0.75rem;
}

.compare-grid .compare-handle::before {
  width: 38px;
  height: 38px;
}

/* ---------- Gallery ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}

.tile {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
}

.tile img {
  display: block;
  width: 100%;
  height: 225px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tile:hover img {
  transform: scale(1.05);
}

.tile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 1rem 0.7rem;
  font-size: 0.85rem;
  color: #fff;
  background: linear-gradient(transparent, rgba(25, 35, 45, 0.8));
}

.tile-video .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  display: grid;
  place-items: center;
  transition: transform 0.3s ease;
}

.tile-video:hover .play {
  transform: translate(-50%, -50%) scale(1.08);
}

.tile-video .play::after {
  content: "";
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--blue);
  margin-left: 5px;
}

/* ---------- Contact ---------- */

.contact {
  background: #33353a;
}

.contact h2 {
  color: #fff;
}

.contact .kicker {
  color: var(--yellow);
}

.contact .section-lead {
  color: rgba(255, 255, 255, 0.75);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.1rem;
  margin-bottom: 2.2rem;
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.6rem 1.5rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-decoration: none;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  border-color: var(--yellow);
  background: rgba(255, 255, 255, 0.09);
}

.contact-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--yellow);
}

.contact-value {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: #fff;
  overflow-wrap: anywhere;
}

.fineprint {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0.3rem 0;
}

.fineprint.note {
  color: rgba(246, 168, 33, 0.75);
}

/* ---------- Footer ---------- */

.site-footer {
  background: #2b2d31;
}

.footer-inner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem clamp(1.25rem, 5vw, 3rem);
}

.footer-logo {
  height: 40px;
  width: auto;
  border-radius: 6px;
}

.footer-inner p {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
}

.paint-bar {
  height: 7px;
  background: linear-gradient(
    90deg,
    var(--blue) 0 30%,
    var(--yellow) 30% 55%,
    var(--blue-deep) 55% 80%,
    var(--yellow) 80% 100%
  );
}

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* Stagger siblings slightly */
.cards .reveal:nth-child(2),
.gallery .reveal:nth-child(2),
.contact-grid .reveal:nth-child(2),
.benefit-list .reveal:nth-child(2) {
  transition-delay: 0.08s;
}

.cards .reveal:nth-child(3),
.gallery .reveal:nth-child(3),
.contact-grid .reveal:nth-child(3),
.benefit-list .reveal:nth-child(3) {
  transition-delay: 0.16s;
}

.cards .reveal:nth-child(5),
.gallery .reveal:nth-child(5) {
  transition-delay: 0.08s;
}

.cards .reveal:nth-child(6),
.gallery .reveal:nth-child(6) {
  transition-delay: 0.16s;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-art {
    order: -1;
  }

  .canvas {
    max-width: 320px;
  }
}

@media (max-width: 620px) {
  .site-header nav {
    display: none;
  }

  .tile img {
    height: 190px;
  }

  /* Bigger grab circle for thumbs */
  .compare-handle::before {
    width: 54px;
    height: 54px;
  }

  .compare-grid .compare-handle::before {
    width: 48px;
    height: 48px;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .drip,
  .drip::after {
    animation: none;
  }

  .canvas,
  .tile img,
  .card,
  .contact-card,
  .btn {
    transition: none;
  }
}