:root {
  --bg: #070707;
  --bg-soft: #0d0d0d;
  --panel: #111111;
  --panel-2: #151515;
  --text: #f3efe8;
  --muted: #a9a39a;
  --muted-2: #7e786f;
  --line: rgba(255,255,255,.11);
  --orange: #ff6a00;
  --orange-hot: #ff8a1c;
  --orange-soft: rgba(255,106,0,.16);
  --max: 1220px;
  --pad: clamp(1.15rem, 3vw, 2.25rem);
  --radius-lg: 30px;
  --radius-md: 22px;
  --shadow: 0 30px 80px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,106,0,.045), transparent 32rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--orange); color: #080808; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 76px;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.site-header.scrolled {
  background: rgba(7,7,7,.78);
  border-color: var(--line);
  backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: .8rem; min-width: 0; }
.brand-text { font-size: .98rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.brand-text small { color: var(--orange); font-size: .66em; letter-spacing: .14em; }
.brand-mark { width: 25px; height: 27px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; align-items: end; }
.brand-mark span { display: block; width: 3px; justify-self: center; background: var(--orange); border-radius: 4px; box-shadow: 0 0 12px rgba(255,106,0,.4); }
.brand-mark span:nth-child(1), .brand-mark span:nth-child(3) { height: 17px; transform: translateY(-1px); }
.brand-mark span:nth-child(2) { height: 27px; }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.3rem); }
.site-nav a { color: rgba(243,239,232,.78); font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; transition: color .2s ease; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--orange-hot); }
.nav-toggle { display: none; border: 0; background: transparent; width: 42px; height: 42px; padding: 9px; }
.nav-toggle span { display: block; height: 2px; margin: 5px 0; background: var(--text); border-radius: 4px; transition: transform .2s ease, opacity .2s ease; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  align-items: center;
  isolation: isolate;
  background: #050505;
}
.hero-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) scale(1.012);
  transition: transform .22s ease-out;
  will-change: transform;
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.6) 33%, rgba(0,0,0,.16) 57%, rgba(0,0,0,.2) 100%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 30%, transparent 68%, rgba(0,0,0,.64) 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  z-index: -1;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}
.hero-content {
  width: min(var(--max), calc(100% - (var(--pad) * 2)));
  margin-inline: auto;
  padding-top: 5rem;
  padding-bottom: 4rem;
}
.eyebrow, .kicker {
  margin: 0 0 1rem;
  color: var(--orange-hot);
  font-size: .76rem;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hero h1 {
  margin: 0;
  max-width: 7ch;
  font-size: clamp(3.8rem, 9vw, 8.2rem);
  line-height: .88;
  letter-spacing: -.055em;
  font-weight: 760;
  text-wrap: balance;
}
.hero-lead {
  max-width: 650px;
  margin: 1.5rem 0 2rem;
  color: rgba(243,239,232,.85);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.45;
  text-wrap: balance;
}
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .8rem 1.25rem; border-radius: 999px; font-weight: 760; letter-spacing: .01em; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.button-primary { background: var(--orange); color: #090909; box-shadow: 0 12px 34px rgba(255,106,0,.24); }
.button-primary:hover, .button-primary:focus-visible { transform: translateY(-2px); background: var(--orange-hot); box-shadow: 0 16px 40px rgba(255,106,0,.32); }
.scroll-cue { position: absolute; right: var(--pad); bottom: 2rem; display: flex; align-items: center; gap: .7rem; color: rgba(243,239,232,.65); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.scroll-cue i { width: 1px; height: 46px; background: linear-gradient(var(--orange), transparent); animation: cue 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%,100%{transform:scaleY(.7);opacity:.45} 50%{transform:scaleY(1);opacity:1} }

.section { position: relative; padding: clamp(5.5rem, 10vw, 9rem) var(--pad); }
.section-shell { width: min(var(--max), 100%); margin-inline: auto; }
.split-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2.5rem, 8vw, 7rem); align-items: start; }
.section-heading h2, .services-intro h2, .systems-panel h2, .contact h2 {
  margin: 0;
  font-size: clamp(2.3rem, 5vw, 4.8rem);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 720;
  text-wrap: balance;
}
.about { background: var(--bg); }
.about-copy { color: #cfc9c0; font-size: clamp(1.03rem, 1.35vw, 1.18rem); }
.about-copy p { margin: 0 0 1.4rem; }
.about-copy strong { color: var(--text); font-weight: 760; }
.location-line { color: var(--muted-2); font-size: .88rem; letter-spacing: .08em; text-transform: uppercase; }

.services { background: linear-gradient(180deg, #090909 0%, #0b0b0b 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.services-intro { max-width: 850px; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.services-intro > p:last-child { max-width: 650px; margin-top: 1.3rem; color: var(--muted); }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.2rem; align-items: stretch; }
.service-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.service-card:hover { transform: translateY(-5px); border-color: rgba(255,106,0,.34); box-shadow: 0 34px 95px rgba(0,0,0,.44); }
.service-image { position: relative; overflow: hidden; aspect-ratio: 16/10; background: #0a0a0a; border-bottom: 1px solid var(--line); }
.service-image::after { content:""; position:absolute; inset:0; box-shadow: inset 0 -70px 70px -60px rgba(0,0,0,.72); pointer-events:none; }
.service-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.service-card:hover .service-image img { transform: scale(1.018); }
/* V1.1: all three logo images use `contain` so no branding or text is clipped.
   Each letterbox background is sampled from that logo's own canvas edge so the
   fill reads as part of the artwork rather than as empty space.
   gecko edge = #000000 (invisible on this site) | splash edge = #ecf1f5
   poolpay edge is a diagonal steel gradient, so a matching gradient is used. */
.service-image-surface img { object-fit: contain; background: #000; }
.service-image-splash img  { object-fit: contain; background: #eef4f7; }
.service-image-poolpay img { object-fit: contain; background: linear-gradient(90deg, #a8b4bd, #5c6c7a); }
.service-body { display: flex; flex: 1; flex-direction: column; padding: clamp(1.4rem, 2.3vw, 2rem); }
.service-index { margin: 0 0 .9rem; color: var(--orange); font-size: .78rem; font-weight: 850; letter-spacing: .15em; }
.service-card h3 { margin: 0; font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.16; letter-spacing: -.025em; }
.service-card .service-body > p:not(.service-index) { margin: 1.1rem 0 1.7rem; color: var(--muted); font-size: .96rem; }
.managed-label { margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--line); display: grid; gap: .25rem; }
.managed-label span { color: var(--orange-hot); font-size: .64rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.managed-label strong { color: #d7d1c7; font-size: .78rem; font-weight: 680; line-height: 1.35; }

.systems { background: var(--bg); }
.systems-panel {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid rgba(255,106,0,.22);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 90% 10%, rgba(255,106,0,.13), transparent 32%),
    linear-gradient(145deg, #121212, #0d0d0d);
  box-shadow: var(--shadow);
}
.systems-copy { align-self: end; }
.systems-copy p { margin: 0 0 1.3rem; color: var(--muted); font-size: 1.02rem; }
.text-link { display: inline-flex; gap: .55rem; align-items: center; color: var(--text); font-weight: 760; }
.text-link span { color: var(--orange); transition: transform .2s ease; }
.text-link:hover span { transform: translate(3px,-3px); }

.contact { background: #0b0b0b; border-top: 1px solid var(--line); }
.contact-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: end; }
.contact-copy { max-width: 600px; margin: 1.4rem 0 0; color: var(--muted); }
.contact-action { justify-self: end; display: grid; gap: .35rem; text-align: right; }
.phone { font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.04em; font-weight: 760; transition: color .2s ease; }
.phone:hover { color: var(--orange-hot); }
.contact-action span { color: var(--muted-2); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }

.site-footer { background: #070707; border-top: 1px solid var(--line); padding: 1.4rem var(--pad); }
.footer-inner { display: flex; justify-content: space-between; gap: 1rem; color: #777169; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---------------------------------------------------------------------------
   V1.1 ADDITIONS
   --------------------------------------------------------------------------- */

/* Footer development credit. Muted by default, orange on hover. */
.dev-credit { color: #6f6960; }
.dev-credit a { color: var(--orange);  border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.dev-credit a:hover, .dev-credit a:focus-visible { color: var(--orange-hot); border-color: rgba(255,138,28,.45); }

/* Sub-page hero. Shorter than the homepage hero: no image, no parallax, just
   enough height to clear the fixed header and establish the page. */
.page-hero { padding-top: calc(76px + clamp(3.5rem, 8vw, 6.5rem)); padding-bottom: clamp(2rem, 4vw, 3rem); }
.page-hero h1 { margin: 0; font-size: clamp(2.6rem, 6.5vw, 5.2rem); line-height: .96; letter-spacing: -.05em; font-weight: 740; text-wrap: balance; }
.page-lead { max-width: 660px; margin: 1.4rem 0 0; color: rgba(243,239,232,.82); font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.45; }

/* Text-only card grid for the Business Systems page. Same visual language as
   .service-card, without the image frame. */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.info-card { padding: clamp(1.4rem, 2.3vw, 1.9rem); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); transition: transform .25s ease, border-color .25s ease; }
.info-card:hover { transform: translateY(-4px); border-color: rgba(255,106,0,.34); }
.info-card h3 { margin: 0 0 .7rem; font-size: 1.12rem; letter-spacing: -.02em; }
.info-card p { margin: 0; color: var(--muted); font-size: .95rem; }
.fine-print { max-width: 640px; margin: clamp(2.5rem, 5vw, 4rem) 0 0; color: var(--muted-2); font-size: .86rem; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.75,.25,1); }
.reveal.visible { opacity: 1; transform: none; }
.cursor-trail { position: fixed; inset: 0; z-index: 100; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

@media (max-width: 980px) {
  .service-grid { grid-template-columns: 1fr; }
  .service-card { display: grid; grid-template-columns: .9fr 1.1fr; }
  .service-image { aspect-ratio: auto; min-height: 360px; border-bottom: 0; border-right: 1px solid var(--line); }
  .split-layout, .systems-panel, .contact-layout { grid-template-columns: 1fr; }
  .contact-action { justify-self: start; text-align: left; }
}

@media (max-width: 760px) {
  :root { --radius-lg: 24px; }
  .site-header { height: 68px; }
  .brand-text { font-size: .78rem; }
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    padding: .6rem var(--pad) 1rem;
    background: rgba(7,7,7,.95);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: .2s ease;
  }
  .site-nav.open { opacity: 1; visibility: visible; transform: none; }
  .site-nav a { padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero { min-height: 92svh; }
  .hero-media img { object-position: 56% center; transform: none !important; }
  .hero-shade { background: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.18) 36%, rgba(0,0,0,.12) 57%, rgba(0,0,0,.78) 100%); }
  .hero-content { align-self: end; padding-top: 8rem; padding-bottom: 7.5rem; }
  .hero h1 { font-size: clamp(3.6rem, 18vw, 5.7rem); }
  .eyebrow { max-width: 32rem; font-size: .65rem; }
  .hero-lead { max-width: 28rem; font-size: 1.06rem; }
  .scroll-cue { display: none; }

  .section { padding-block: 5rem; }
  .service-card { display: flex; }
  .service-image { aspect-ratio: 16/10; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  /* V1.1: SPLASH stays `contain` on mobile. Reverting to `cover` clipped the
     "SWIMMING POOL LABOR | AND SCHEDULING HUB" subtitle on narrow screens. */
  .footer-inner { flex-direction: column; }
}

@media (hover: none), (pointer: coarse) {
  .cursor-trail { display: none; }
  .service-card:hover { transform: none; }
  .info-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .cursor-trail { display: none; }
  .hero-media img { transform: none !important; }
}