/* ===== WaTo — homepage-only styles (home.css) =====
   Loaded only on index.html, alongside the shared styles.css.
   Inner/service-page styles live in pages.css.

   Modern CSS: nesting, logical properties, :is(), fluid units. */

:root {
  /* Stronger custom easing curves (Emil Kowalski's design-engineering
     defaults) — the built-in CSS keyword easings read as weak/generic.
     Used on the hero rotator crossfade and quick-links hover below. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Hero (light, grid texture) ---------- */
.hero {
  position: relative; overflow: hidden; padding-block-start: 1.5em;
  background:
    radial-gradient(51.25rem 28.75rem at 86% -10%, rgba(55,189,242,.30), transparent 60%),
    radial-gradient(42.5rem 30rem at -6% 112%, rgba(55,189,242,.16), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #ecf6fe 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.625rem), 0 100%);

  &::before { /* diamond lattice texture */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      repeating-linear-gradient(45deg, rgba(55,189,242,.16) 0 1px, transparent 1px 1.6875rem),
      repeating-linear-gradient(-45deg, rgba(55,189,242,.16) 0 1px, transparent 1px 1.6875rem);
    mask-image: linear-gradient(170deg, rgba(0,0,0,.55), transparent 80%);
  }
  &::after { /* soft cyan blob behind photo */
    content: ""; position: absolute; right: -4%; top: 4%; width: 35rem; height: 35rem; border-radius: 999px;
    background: radial-gradient(circle, rgba(55,189,242,.22), transparent 64%); filter: blur(0.5rem); pointer-events: none;
  }

  & h1 { color: #050505; }
  & h1 span { display: block; color: var(--cyan-text); }
  & .lead { font-size: 1.05rem; color: #2b3440; max-width: 50ch; margin-block-start: 0.625rem; }
}
.hero-inner {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(16.25rem, .8fr);
  gap: 2.5rem; align-items: start; padding-block: 0.75rem 1.375rem;
}

/* rotating tagline banner (visual showpiece — not the H1) */
.hero-head { margin: 0 0 .25em; font-weight: 800; }
.hero-rotator {
  display: block; position: relative; min-height: 3.3em;
  font-family: var(--display); font-size: clamp(1.55rem, 3.1vw, 2.3rem);
  line-height: 1.1; letter-spacing: .01em; text-transform: uppercase; color: #050505;

  & .rot-line {
    position: absolute; left: 0; right: 0; top: 0; margin: 0; opacity: 0;
    transform: translateY(0.5rem); transition: opacity var(--t-4) var(--e-out), transform var(--t-4) var(--e-spring);
    pointer-events: none; color: #050505;

    &.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
  }
}
/* static keyword H1 — the real headline for people & Google */
.hero-h1 {
  font-family: var(--head); font-size: clamp(1.25rem, 2.3vw, 1.9rem); font-weight: 800;
  text-transform: none; letter-spacing: -.01em; line-height: 1.25; color: var(--ink);
  margin: 0.625rem 0 0; max-width: 26ch;
}
/* Each button is a full 24px touch target; the visible dot is its ::before.
   The negative margin lines the first dot back up with the text above. */
.rot-dots {
  display: flex; margin-block-start: 0; margin-inline-start: -0.40625rem;

  & button {
    position: relative; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer;

    &::before {
      content: ""; position: absolute; inset: 0; margin: auto; width: 0.6875rem; height: 0.6875rem; border-radius: 999px;
      background: rgba(18,23,42,.22); transition: background var(--t-2) var(--e-out), transform var(--t-2) var(--e-spring);
    }
    &:hover::before { background: rgba(18,23,42,.4); }
    &.on::before { background: var(--cyan); transform: scale(1.15); }
  }
}
@media (max-width: 980px) { .hero-rotator { min-height: 4.8em; } }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-block-start: 1.125rem; }

/* Quick-links strip: lives BELOW the hero's headline/CTA column (its own
   full-width row, separated by a hairline) rather than inside the hero
   copy block, so it doesn't count against hero text-element discipline
   and doesn't compete with the single primary CTA above it. */
.hero-quicklinks {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 0.625rem; margin-block-start: 2.25rem; padding-block-start: 1.375rem;
  border-block-start: 1px solid rgba(18,23,42,.10);

  & .hql-label {
    font-family: var(--head); font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted); margin-inline-end: 0.25rem;
  }
  & a {
    font-family: var(--head); font-size: .78rem; font-weight: 600; color: var(--cyan-text);
    background: rgba(55,189,242,.12); padding: 0.4375rem 0.9375rem; border-radius: 999px;
    text-decoration: none; transition: background var(--t-2) var(--e-out), color var(--t-2) var(--e-out);
  }
  & a:hover { background: var(--cyan); color: #fff; }
}
@media (max-width: 600px) { .hero-quicklinks { display: none; } }

/* the small photo and caption under the lead: phones only (see the 600px block) */
.hero-face { display: none; }

/* hero photo on cyan circle */
.hero-photo {
  position: relative; display: grid; place-items: center;

  & .ring {
    position: absolute; width: min(110%, 23.25rem); aspect-ratio: 1;
    border: 2px dashed rgba(18,152,207,.45); border-radius: 999px;
    animation: spin 44s linear infinite; pointer-events: none;
  }
  & .dots {
    position: absolute; right: 2%; bottom: 6%; width: 7.5rem; height: 7.5rem;
    z-index: 2; pointer-events: none;
    background-image: radial-gradient(rgba(18,152,207,.55) 2px, transparent 2px);
    background-size: 1rem 1rem;
  }
  & .disc {
    position: relative; z-index: 1; width: min(100%, 20.75rem); aspect-ratio: 1; border-radius: 999px;
    background: var(--cyan); display: grid; place-items: end center; overflow: hidden;
    box-shadow: 1rem 1rem 0 0 rgba(55,189,242,.28), var(--shadow-lg, var(--shadow));

    & img { width: 92%; height: auto; align-self: end; }
  }
  & .tagchip {
    position: absolute; z-index: 3; bottom: 1.125rem; left: 50%; transform: translateX(-50%);
    background: var(--ink); color: #fff; font-family: var(--head); font-weight: 700; font-size: .8rem;
    letter-spacing: .04em; text-transform: uppercase; padding: 0.5rem 1.125rem; border-radius: 999px; white-space: nowrap;
  }
}

/* ---------- Brand logo band ---------- */
.logo-band {
  padding: 0; margin-block-start: -3rem; position: relative; z-index: 4;

  /* uneven thirds instead of a perfectly symmetrical 3-up row: IT & Web
     Hosting are the two entry doors most visitors take, so they get a
     little more room than Business in the middle */
  & .grid { display: grid; grid-template-columns: 1.12fr 0.86fr 1.12fr; gap: 1.375rem; }

  & :is(a, .cell) {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: 1.875rem 1.625rem; text-align: center;
    transition: transform var(--t-2) var(--e-spring), box-shadow var(--t-2) var(--e-out), border-color var(--t-2) var(--e-out); display: block;
  }
  & a:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(55,189,242,.55); }
  & img { height: 4.875rem; width: auto; margin: 0 auto 0.875rem; object-fit: contain; }
  & p { margin: 0; color: var(--muted); font-size: .95rem; }
}

/* ---------- Hero motion ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes heroIn { from { opacity: 0; transform: translateY(1.125rem); } to { opacity: 1; transform: none; } }
.hero-inner > div { animation: heroIn .7s cubic-bezier(.2,.7,.2,1) both; }
.hero-inner > .hero-photo { animation-delay: .12s; }
.logo-band a { animation: heroIn .7s cubic-bezier(.2,.7,.2,1) both; }
.logo-band a:nth-child(2) { animation-delay: .08s; }
.logo-band a:nth-child(3) { animation-delay: .16s; }

/* ---------- How it works (steps) ----------
   Deliberately NOT a card grid (the pain section already used a divided
   list, and Industries below uses cards) — this one is plain type in
   columns divided by a hairline, so all three sections read differently.
   Named .flow-step (not .step) on purpose: 3d-cards.css's card tilt/glow
   hover effect is keyed to ".step" for the old boxed-card treatment, and
   would look broken (a floating glow blob with no card to anchor it) on
   this borderless layout — a different class name sidesteps that without
   needing to touch 3d-cards.css. */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; position: relative;
}
.flow-step {
  padding-inline-start: 2.25rem; border-inline-start: 1px solid var(--line);

  &:first-child { padding-inline-start: 0; border-inline-start: 0; }

  & .flow-step-no {
    font-family: var(--display); display: block; font-size: 2.5rem; font-weight: 700;
    color: var(--cyan); line-height: 1; margin-block-end: 0.75rem;
  }
  & h3 { font-size: 1.12rem; letter-spacing: -.01em; }
  & p { color: var(--muted); font-size: .95rem; margin: 0; }
}
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .flow-step { padding-inline-start: 0; border-inline-start: 0; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); }
  .flow-step:first-child { padding-block-start: 0; border-block-start: 0; }
}

/* ---------- Pain points: asymmetric lead + list, not a 3-up card row ----------
   A single highlighted statement panel on the left, a plain divided list of
   the three points on the right (icon + heading + copy, hairline between
   rows). No card boxes here, so this section reads differently from the
   "How it works" and "Industries" grids further down the page. */
.pain-wrap {
  display: grid; grid-template-columns: minmax(15rem, .78fr) 1.22fr; gap: 2.75rem; align-items: center;
}
.pain-lead {
  position: sticky; top: 6.5rem;
}
.pain-line {
  margin: 0 0 1.375rem; font-family: var(--head); font-weight: 700;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem); color: var(--ink); line-height: 1.3;

  & span { color: var(--cyan-text); }
}
.pain-list { display: flex; flex-direction: column; }
.pain-row {
  display: flex; gap: 1.125rem; align-items: flex-start;
  padding-block: 1.375rem; border-block-end: 1px solid var(--line);

  &:first-child { padding-block-start: 0; }
  &:last-child { border-block-end: 0; padding-block-end: 0; }

  & .pain-ico {
    flex: none; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; display: grid; place-items: center;
    background: rgba(55,189,242,.12); color: var(--cyan-text);
    & svg { width: 1.375rem; height: 1.375rem; }
  }
  & h3 { font-size: 1.08rem; letter-spacing: -.01em; margin-block-end: .3em; }
  & p { color: var(--muted); font-size: .96rem; margin: 0; }
}
@media (max-width: 900px) {
  .pain-wrap { grid-template-columns: 1fr; gap: 1.5rem; }
  .pain-lead { position: static; }
}
.char-thinking { width: 7.5rem; height: auto; margin: 0 auto 0.5rem; display: block; filter: drop-shadow(0 0.625rem 1.125rem rgba(17,24,39,.12)); }

/* ---------- About / WaTo character ---------- */
.about {
  display: grid; grid-template-columns: .92fr 1.08fr; gap: 3rem; align-items: center;
}
.about-art {
  position: relative; display: grid; place-items: center;

  &::before { content: ""; position: absolute; width: min(90%, 26.25rem); aspect-ratio: 1; border-radius: 999px; background: radial-gradient(circle, rgba(55,189,242,.20), transparent 66%); }
  & img { position: relative; width: 100%; max-width: 28.75rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
}
.about-copy h2 span { color: var(--cyan-text); }
.checklist {
  list-style: none; padding: 0; margin: 0 0 1.5rem;

  & li { position: relative; padding-inline-start: 1.875rem; margin-block-end: .6em; }
  & li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 1rem; height: 1rem; border-radius: 999px; background: rgba(55,189,242,.18); }
  & li::after { content: "✓"; position: absolute; left: 3px; top: 0; color: var(--cyan-text); font-weight: 800; }
}
@media (max-width: 980px) {
  .about { grid-template-columns: 1fr; gap: 1.625rem; }
  .about-art { order: -1; }
  .about-art img { max-width: 18.75rem; }
}

/* ---------- Industries: bento, not a plain N-up grid (scoped to the
   homepage's .industries-grid so the shared .svc-grid used on other pages
   is untouched). One enlarged feature tile, five regular tiles, and a
   dark "ask us" tile that closes the grid instead of leaving a gap. ---------- */
@media (min-width: 981px) {
  .industries-grid {
    grid-template-columns: repeat(4, 1fr);

    & .svc-feature { grid-column: span 2; }
  }
}
/* Stagger the Industries grid cards on scroll-reveal — each card enters 40-80ms after the previous */
.industries-grid .svc-card:nth-child(1) { --reveal-delay: 0ms; }
.industries-grid .svc-card:nth-child(2) { --reveal-delay: 40ms; }
.industries-grid .svc-card:nth-child(3) { --reveal-delay: 80ms; }
.industries-grid .svc-card:nth-child(n+4) { --reveal-delay: 120ms; }
.industries-grid .svc-card { transition-delay: var(--reveal-delay, 0ms); }
.svc-ask {
  background: var(--ink); border-color: var(--ink);

  & h3 { color: #fff; text-transform: uppercase; }
  & p { color: rgba(255,255,255,.72); }
  & .more { color: var(--cyan); }
  &:hover { border-color: var(--cyan); }
}

/* ---------- Stats ---------- */
.trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 4rem; align-items: center;

  & .stat { text-align: center; }
  & .stat b { font-family: var(--head); display: block; font-size: 2.4rem; color: var(--ink); line-height: 1; }
  & .stat span { font-size: .9rem; color: var(--muted); }
}

/* ---------- Intro / promise / triage ---------- */
.promobar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.875rem 1.875rem; margin: 0 0 1.75rem;

  & span {
    display: inline-flex; align-items: center; gap: 0.5625rem;
    font-family: var(--head); font-weight: 600; font-size: .92rem; color: var(--ink);

    &::before {
      content: "✓"; display: grid; place-items: center; width: 1.375rem; height: 1.375rem;
      border-radius: 999px; background: rgba(55,189,242,.16); color: var(--cyan-text); font-weight: 800; font-size: .78rem;
    }
  }
}
.triage {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem; margin-block-start: 1.75rem;
}
.triage-label { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; color: var(--muted); }
.triage-btn {
  font-family: var(--head); font-weight: 700; font-size: .9rem; padding: 0.6875rem 1.25rem;
  border-radius: 999px; border: 2px solid var(--line); color: var(--ink);
  transition: transform var(--t-1) var(--e-spring), background var(--t-1) var(--e-out), border-color var(--t-1) var(--e-out), color var(--t-1) var(--e-out);

  &:hover { border-color: var(--blue); background: var(--blue); color: #fff; transform: translateY(var(--lift-sm)); }
}

/* ---------- Tech partner badges ---------- */
.techbar { text-align: center; }
.techbar-label { font-family: var(--head); font-weight: 700; font-size: 1rem; color: var(--ink); margin: 0; }
.techbar .tlist {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
  margin-block-start: 0.625rem; position: relative; z-index: 1;

  & span {
    font-family: var(--head); font-weight: 600; font-size: .85rem; color: var(--body);
    background: #fff; border: 1px solid var(--line); padding: 0.5625rem 1rem;
    border-radius: 999px; box-shadow: var(--shadow-sm);
  }
}

/* ---------- Whosts hosting band ----------
   A centred content band (logo + headline + horizontal chip row), not an
   image/text 50-50 split — the "About" section above already owns that
   layout family, so this one is deliberately different: no side photo,
   checklist becomes a wrapping row of chips instead of a vertical list. */
.hostband {
  background: var(--soft-2); border-block: 1px solid var(--line);
}
.hostband-head {
  text-align: center; max-width: 42rem; margin-inline: auto;

  & h2 span { color: var(--cyan-text); }
  & p { color: var(--muted); font-size: 1.05rem; }
  & p a { color: var(--blue); text-decoration: underline; text-underline-offset: 0.15em; }
}
.hostband-logo { width: 9.5rem; height: auto; margin: 0 auto 1.25rem; }
.hostband-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;
  max-width: 54rem; margin: 2rem auto 0;

  & span {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 0.75rem 1.125rem; font-size: .88rem; color: var(--body);
  }
  & strong { color: var(--ink); }
}
.hostband-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-block-start: 2rem; }

/* ---------- Homepage responsive (must live here so it beats the base hero rules above) ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-photo { order: 2; margin-block-start: 0.5rem; }
  .hero-photo .disc { width: min(72%, 20rem); }
  .logo-band .grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero-photo { display: none; }                 /* the big photo is too tall for a phone; .hero-face below takes its place */
  .hero-face {
    display: flex; align-items: center; gap: 0.75rem; margin: 0.25rem 0 1rem;
    font-family: var(--head); font-weight: 700; font-size: .82rem; letter-spacing: .02em; line-height: 1.3; color: var(--ink);

    & img {
      flex: none; width: 4rem; height: 4rem; border-radius: 999px; background: var(--cyan);
      object-fit: cover; object-position: center top; box-shadow: 0.25rem 0.25rem 0 0 rgba(55,189,242,.28);
    }
  }
  .hero-copy .lead { margin-block-end: 0.5rem; }
  .hero-call { display: inline-flex !important; }
  .hero-inner { padding-block-start: 1.375rem; }
}

/* ---------- Viewport-fill hero + logo-band peek (large desktops) ----------
   Hero stretches to fill the screen so the logo-band cards sit with
   just their logos peeking above the fold. The cyan blob behind John's
   photo moves with the content because it's anchored to the grid.
   Kicks in only when the screen is wide AND tall enough to look right. */
@media (min-width: 1100px) and (min-height: 680px) {
  .hero {
    min-height: 84dvh;                  /* blue extends to just under card tops — dvh for mobile accuracy */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;                    /* flexbox handles vertical centering now */
  }
  .hero > .container {
    padding-block-end: 5rem;           /* offset so content centres above the logo overlap zone */
  }
  /* cyan blob tracks the vertically-centred content instead of fixed top */
  .hero::after {
    top: 50%;
    transform: translateY(-55%);
  }
  .logo-band {
    margin-block-start: -10.5vh;       /* vh-based overlap scales with screen height */
  }
}

/* ---------- "What do you need help with?" picture cards (2026-10-04) ----------
   Card styles live in cards.css (.pl-other*), shared with the pillar pages.
   Row gap clears the next row's characters, which rise out of the card top. */
.intro .triage-label { display: block; text-align: center; margin: 2.5rem 0 6.25rem; font-size: .9rem; }
.triage-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5.5rem 1.1rem; max-width: 68rem; margin-inline: auto; }
/* Bigger than the pillar footer cards: this is the page's main "pick one". */
.triage-cards .pl-other { padding-bottom: 1.2rem; }
.triage-cards .pl-other-art { height: 7rem; margin-top: -2.75rem; }
.triage-cards .pl-other-art::before { width: 6rem; height: 6rem; }
.triage-cards .pl-other-art img { height: 9.5rem; }
.triage-cards .pl-other-name { font-size: 1.02rem; }
.home-call { margin-top: 6.5rem; }
@media (max-width: 900px) { .triage-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) {
  .triage-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-call { margin-top: 8rem; }
}
/* The hero ring and the industry cards' slide-in start just past the right edge
   on ~1024px screens, which made the whole page scroll sideways. clip (not hidden)
   creates no scroll container, so sticky elements keep working. */
main { overflow-x: clip; }  /* any wrapper: site search added div.page-content around main (2026-10-05) */