/* ==========================================================================
   BlueGrid — homepage rhythm
   The old page ran seven identical sections back to back. This adds pace:
   full-bleed bands break up contained sections, density changes between
   blocks, and the interactive proof moves above the fold.
   Uses existing tokens only. Separate file so a cached styles.css
   can never swallow it.
   ========================================================================== */

/* ---- full-bleed band: the change of pace ---- */
.band{position:relative;padding:96px 0;margin-top:104px;
  background:linear-gradient(180deg,rgba(13,21,38,.85),rgba(7,12,22,0) 96%);
  border-top:1px solid var(--hairline)}
.band::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(77,159,255,.5),transparent)}
.band-inner{max-width:1160px;margin:0 auto;padding:0 40px;position:relative;z-index:1}
.band .section-sub{max-width:62ch}

/* ---- The Reality: tension, before any claims ---- */
.reality{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:52px;
  border-top:1px solid var(--hairline)}
.real{padding:30px 32px 26px;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.real:nth-child(even){border-right:0}
.real:nth-child(3),.real:nth-child(4){border-bottom:0}
.real:nth-child(odd){padding-left:0}
.real-num{font-family:var(--mono);font-size:34px;font-weight:400;color:rgba(77,159,255,.32);
  letter-spacing:-.02em;line-height:1}
.real h3{font-family:var(--display);font-weight:600;font-size:19px;margin-top:16px;line-height:1.25}
.real p{color:var(--slate);font-size:15.5px;margin-top:11px;max-width:46ch}
.reality-close{margin-top:36px;font-family:var(--display);font-weight:600;
  font-size:clamp(19px,2.4vw,26px);letter-spacing:-.015em;line-height:1.4;max-width:40ch;color:var(--paper)}

/* ---- hero: tighter, with the proof pulled up under it ---- */
.hero-inner .hero-sub{max-width:56ch}

/* ---- work slider promoted directly beneath the hero ---- */
#work{padding-top:64px}
#work .ba{box-shadow:0 26px 70px rgba(0,0,0,.42)}

/* ---- pricing band: the one loud moment ---- */
.band-price{background:
    radial-gradient(760px 320px at 22% 0%,rgba(77,159,255,.16),transparent 70%),
    linear-gradient(180deg,rgba(13,21,38,.9),rgba(7,12,22,0) 96%)}
.price-flex{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;margin-top:44px}
.price-hero .price-big{font-family:var(--display);font-weight:700;font-size:clamp(64px,9vw,104px);
  letter-spacing:-.035em;line-height:.95}
.price-hero .price-flat{font-family:var(--mono);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal);margin-top:12px}
.price-hero .btn{margin-top:26px}
.promise-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.promise-strip .p{border-top:2px solid var(--hairline);padding-top:18px;position:relative}
.promise-strip .p::before{content:'';position:absolute;top:-2px;left:0;width:32px;height:2px;background:var(--signal)}
.promise-strip h3{font-family:var(--display);font-weight:600;font-size:17px}
.promise-strip p{color:var(--slate);font-size:14.5px;margin-top:9px}

/* ---- a breath between heavy blocks ---- */
.pull{max-width:1160px;margin:104px auto 0;padding:0 40px}
.pull p{font-family:var(--display);font-weight:600;font-size:clamp(24px,3.2vw,38px);
  letter-spacing:-.02em;line-height:1.26;max-width:22ch}
.pull p .accent{color:var(--signal)}
.pull .who{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin-top:20px}

@media(max-width:900px){
  .price-flex{grid-template-columns:1fr;gap:36px}
  .promise-strip{grid-template-columns:1fr;gap:22px}
}
@media(max-width:820px){
  .band{padding:72px 0;margin-top:84px}
  .band-inner,.pull{padding:0 22px}
  .pull{margin-top:84px}
  .reality{grid-template-columns:1fr;margin-top:38px}
  .real{border-right:0;border-bottom:1px solid var(--hairline);padding:26px 0 20px}
  .real:nth-child(odd){padding-left:0}
  .real:nth-child(3){border-bottom:1px solid var(--hairline)}
  .real:last-child{border-bottom:0}
  #work{padding-top:52px}
}

/* ---- owning the price ---- */
.lean{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border-top:1px solid var(--hairline)}
.lean-item{padding:28px 28px 4px;border-right:1px solid var(--hairline)}
.lean-item:last-child{border-right:0}
.lean-item h3{font-family:var(--display);font-weight:600;font-size:18.5px;line-height:1.25}
.lean-item h3::before{content:'';display:block;width:26px;height:2px;background:var(--signal);margin-bottom:16px}
.lean-item p{color:var(--slate);font-size:15.5px;margin-top:11px}
.lean-note{margin-top:34px;font-family:var(--display);font-weight:600;font-size:clamp(18px,2.2vw,24px);
  letter-spacing:-.015em;line-height:1.4;max-width:44ch;color:var(--paper)}

/* ---- the two of us ---- */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:48px}
.member{display:flex;gap:22px;align-items:flex-start;border:1px solid var(--hairline);border-radius:14px;
  background:var(--panel);padding:28px;transition:border-color .25s}
.member:hover{border-color:rgba(77,159,255,.45)}
.avatar{flex:0 0 auto;width:88px;height:88px;border-radius:12px;object-fit:cover;object-position:center top;
  display:grid;place-items:center;background:linear-gradient(160deg,rgba(77,159,255,.22),rgba(13,21,38,1));
  border:1px solid rgba(77,159,255,.4);color:var(--sky);font-family:var(--display);font-weight:700;
  font-size:26px;letter-spacing:.02em}
.member-body h3{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.015em}
.member-body .role{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);margin-top:7px}
.member-body p{color:var(--slate);font-size:15px;margin-top:13px}

/* ---- WhatsApp: a direct line, not a form ---- */
.nav-wa{display:inline-flex;align-items:center;gap:9px;margin-right:14px;white-space:nowrap;
  font-family:var(--mono);font-size:13px;color:var(--sky);
  border:1px solid rgba(37,211,102,.35);border-radius:999px;padding:8px 15px;
  transition:border-color .2s,background .2s,color .2s}
.nav-wa:hover{border-color:#25D366;background:rgba(37,211,102,.1);color:var(--paper)}
.wa-mark{width:16px;height:16px;flex:0 0 auto;fill:#25D366}
.nav-wa:hover .wa-mark{fill:#3BEA7C}

.menu-wa{display:flex!important;align-items:center;gap:11px;margin-top:20px;
  border:1px solid rgba(37,211,102,.4)!important;border-radius:10px;padding:14px 16px!important;
  font-family:var(--body)!important;font-size:16px!important;font-weight:500!important;color:var(--paper)}
.menu-wa .wa-mark{width:20px;height:20px}

/* On small screens the full label pushed the hamburger off-screen.
   Collapse to an icon-only tap target; the labelled link lives in the menu. */
@media(max-width:900px){
  /* The base stylesheet hides .nav-links here but leaves .nav-cta in the bar.
     With the WhatsApp pill added, brand + pill + CTA + burger no longer fit and
     the hamburger was pushed off-screen. Both links live in the mobile menu. */
  .nav-cta{display:none}
}
@media(max-width:820px){
  .nav-wa{margin-right:10px;padding:9px 11px;gap:0}
  .nav-wa span{display:none}
  .wa-mark{width:19px;height:19px}
}

@media(max-width:900px){
  .lean{grid-template-columns:1fr;margin-top:36px}
  .lean-item{border-right:0;border-bottom:1px solid var(--hairline);padding:24px 0 18px}
  .lean-item:last-child{border-bottom:0}
  .team{grid-template-columns:1fr;gap:16px}
}
@media(max-width:820px){
  .member{padding:22px;gap:18px}
  .avatar{width:68px;height:68px;font-size:21px}
}

/* ==========================================================================
   Visual anchors — icons, progress, emphasis
   ========================================================================== */

/* sprite carrier: present in the DOM, never rendered */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* monoline icons drawn from the same grid language as the logo */
.ico{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:11px;
  background:linear-gradient(160deg,rgba(77,159,255,.16),rgba(77,159,255,.03));
  border:1px solid rgba(77,159,255,.28);color:var(--signal);margin-bottom:18px;
  transition:border-color .25s,background .25s,transform .25s}
.ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.svc:hover .ico,.step:hover .ico{border-color:rgba(77,159,255,.6);transform:translateY(-2px);
  background:linear-gradient(160deg,rgba(77,159,255,.26),rgba(77,159,255,.06))}
.step .ico{margin-bottom:14px}

/* scroll progress — one hairline, no chrome */
.scrollrail{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none}
.scrollrail i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--signal),var(--sky));will-change:transform}

/* headline emphasis: a drawn underline, not a highlighter block */
mark.hl{background:none;color:inherit;position:relative;white-space:normal}
mark.hl::after{content:'';position:absolute;left:0;right:0;bottom:.06em;height:.30em;
  background:linear-gradient(90deg,rgba(77,159,255,.55),rgba(77,159,255,.16));
  border-radius:2px;z-index:-1}

@media(max-width:820px){
  .ico{width:40px;height:40px;border-radius:9px;margin-bottom:14px}
  .ico svg{width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){
  .scrollrail{display:none}
  .ico,.svc:hover .ico,.step:hover .ico{transition:none;transform:none}
}

/* ---- the full service list: readable, not a spec sheet ---- */
/* 4 headline services -> 4 columns, so the row fills exactly (no orphan card) */
.svc2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;
  border-top:1px solid var(--hairline);border-left:1px solid var(--hairline)}
/* the hidden set -> 3 columns; the full list on services.html stays at 4 */
.svc2-grid--more{grid-template-columns:repeat(3,1fr)}
/* neither count divides evenly, so the final card absorbs the remainder
   rather than leaving a hole at the end of the grid */
.svc2-grid--more .svc2:last-child,
.svc2-grid--full .svc2:last-child{grid-column:span 2}
.svc2{padding:30px 28px 28px;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  display:flex;flex-direction:column;transition:background .25s}
.svc2:hover{background:rgba(77,159,255,.035)}
.svc2 h3{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.3}
.svc2-price{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--signal);margin-top:9px}
.svc2 p{color:var(--slate);font-size:15.5px;line-height:1.6;margin-top:14px}
.svc2-kicker{color:var(--sky)!important;font-size:14.5px!important;font-style:italic;
  border-left:2px solid rgba(77,159,255,.45);padding-left:13px;margin-top:16px!important}

@media(max-width:1180px){
  .svc2-grid,.svc2-grid--more{grid-template-columns:repeat(2,1fr)}
  /* odd counts in 2 columns leave one over — give it the full width */
  .svc2-grid--more .svc2:last-child,
  .svc2-grid--full .svc2:last-child{grid-column:1 / -1}
}
@media(max-width:720px){
  .svc2-grid,.svc2-grid--more{grid-template-columns:1fr;border-left:0}
  .svc2-grid--more .svc2:last-child,
  .svc2-grid--full .svc2:last-child{grid-column:auto}
  .svc2{border-right:0;padding:26px 0 24px}
}

/* ---- expandable service list ---- */
.svc2-more{overflow:hidden;transition:max-height .52s cubic-bezier(.33,1,.68,1)}
/* collapsing is opt-in and added by JS, so with JS off all 13 services stay visible */
.svc2-more.js-collapsible{max-height:0}
.svc2-grid--more{border-top:0;margin-top:0}
.svc2-more .svc2{padding-top:28px}
.svc2-more .svc2{opacity:1;transform:none;
  transition:opacity .42s ease,transform .42s cubic-bezier(.2,.7,.3,1),background .25s}
.svc2-more.is-collapsed .svc2{opacity:0;transform:translateY(12px)}

.more-wrap{display:flex;justify-content:center;margin-top:34px}
.more-toggle{display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  font-family:var(--mono);font-size:14px;background:none}
.more-toggle .more-count{font-size:12px;color:var(--slate);letter-spacing:.06em}
.more-toggle .more-chev{width:16px;height:16px;fill:none;stroke:var(--signal);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.33,1,.68,1)}
.more-toggle.is-open .more-chev{transform:rotate(180deg)}
.more-toggle:hover{border-color:var(--signal)}

/* if JS never runs, show everything rather than hiding nine services */

@media(prefers-reduced-motion:reduce){
  .svc2-more{transition:none}
  .svc2-more .svc2,.svc2-more.is-collapsed .svc2{transition:none;opacity:1;transform:none}
  .more-toggle .more-chev{transition:none}
}