#page-home .hero{padding-top:76px;padding-bottom:0}
#page-home .hero h1{font-size:clamp(33px,5vw,50px);font-weight:700;max-width:820px}
#page-home .hero p.lead{font-size:19px;max-width:600px;margin-top:22px;color:var(--slate)}
#page-home .gran{font-size:12.5px;color:var(--muted);margin-top:20px}

#page-home .ticker{margin-top:40px;overflow:hidden;border-top:.5px solid var(--line);border-bottom:.5px solid var(--line);padding:17px 0}
#page-home .ticker-track{display:flex;gap:56px;width:max-content;animation:scrollx 70s linear infinite}
#page-home .ticker:hover .ticker-track{animation-play-state:paused}
#page-home .ti-stat{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
#page-home .ti-stat .v{font-family:var(--display);font-weight:600;font-size:21px;color:var(--navy);letter-spacing:-.02em}
#page-home .ti-stat .l{font-size:13px;color:var(--muted)}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* The grey band carries the standard section gap above it, like every other
   band. Without this it would inherit .band-soft's margin-top:0 (chrome.css)
   and hug the hero, leaving it a different gap from the second grey band. */
#page-home .whyus{margin-top:var(--section-gap)}
#page-home .whyus h2{font-size:clamp(27px,3.4vw,36px);font-weight:700;max-width:560px}
#page-home .whyus p{font-size:17px;max-width:640px;margin-top:14px;color:var(--slate)}

#page-home .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
#page-home .chip{border:1px solid var(--chip-border);background:var(--bg);border-radius:22px;padding:9px 17px;font-size:13.5px;color:var(--navy);cursor:pointer;transition:.14s}
#page-home .chip:hover{border-color:var(--navy);background:var(--navy);color:var(--bg)}

/* The chooser doors on the merged What we do section. The .seg toggle itself
   is shared chrome; the panels are wrapper divs, so the [hidden] attribute
   needs an explicit rule (the cards grid inside would otherwise still show).
   Each door's own lead line reuses the section .sub type, extended to cover
   this location too, rather than a second lead-line style. */
#page-home .seg{margin-top:24px}
#page-home [data-door-panel][hidden]{display:none}
#page-home [data-door-panel]>.sub{font-size:16px;max-width:580px;margin-top:22px}
#page-home .rt-opts{display:flex;flex-wrap:wrap;gap:9px}
#page-home [data-door-panel]>.rt-opts{margin-top:22px}
#page-home .rt-opt{border:1px solid var(--chip-border);background:var(--bg);border-radius:22px;padding:9px 17px;font-size:13.5px;color:var(--navy);cursor:pointer;transition:.14s;font-family:var(--body);display:inline-flex;align-items:center;gap:8px}
#page-home .rt-opt:hover{border-color:var(--navy);background:var(--navy);color:var(--bg)}
#page-home .rt-soon{font-size:10px;letter-spacing:.06em;text-transform:uppercase;background:var(--rt-soon-bg);color:var(--slate);border-radius:5px;padding:2px 6px;font-weight:600}
#page-home .rt-opt:hover .rt-soon{background:rgba(255,255,255,.22);color:var(--bg)}

#page-home .sec{margin-top:var(--section-gap)}
#page-home .sec>h2,#page-home #needs .wrap>h2{font-size:30px;font-weight:700}
#page-home .sec>.sub{font-size:16px;max-width:580px;margin-top:8px}

#page-home .grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px}
#page-home .card{background:var(--bg);border:.5px solid var(--line);border-radius:14px;padding:26px 24px;transition:.18s;cursor:pointer;display:block}
#page-home .card:hover{transform:translateY(-3px);border-color:var(--card-border-hover);box-shadow:0 22px 44px -26px rgba(8,46,74,.3)}
#page-home .card .ic{width:46px;height:46px;border-radius:12px;background:var(--icon-bg);display:flex;align-items:center;justify-content:center;color:var(--cyan-ink)}
#page-home .card h3{font-size:19px;font-weight:600;margin:16px 0 8px}
#page-home .card p{font-size:14px;line-height:1.55}
#page-home .card .tags{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:16px;line-height:1.7}
#page-home .card .go{display:inline-flex;align-items:center;gap:6px;color:var(--cyan-ink);font-size:13.5px;font-weight:500;margin-top:14px}
#page-home .card:hover .go{gap:9px}

/* The navy card is the fifth job, sitting inside the chooser's jobs door directly
   below the four job cards (see docs/definitions), not a separate section below the
   band. --group-gap keeps it tucked close to the four cards as one block. */
#page-home .saas{margin-top:var(--group-gap);background:var(--navy);border-radius:20px;padding-top:48px;padding-bottom:48px;padding-left:46px;padding-right:46px;color:var(--saas-text);overflow:hidden}
#page-home .saas .eyebrow{color:var(--cyan-pale);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:10px}
#page-home .saas h2{color:var(--bg);font-size:28px;font-weight:700;max-width:520px}
#page-home .saas p{color:var(--cta-text-soft);font-size:15.5px;max-width:620px;margin-top:14px}
#page-home .saas .tz{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:30px}
#page-home .saas .tz-card{display:block;border:.5px solid var(--navy-line);background:var(--navy-panel);border-radius:14px;padding:24px;transition:border-color .15s}
#page-home .saas .tz-card:hover{border-color:var(--cyan)}
#page-home .saas .tz-card .lab{display:block;font-family:var(--display);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-pale);font-weight:600;margin-bottom:10px}
#page-home .saas .tz-card .sh{display:block;font-family:var(--display);font-size:20px;font-weight:700;color:var(--bg);letter-spacing:-.02em;line-height:1.3}
#page-home .saas .tz-card .soon{display:inline-block;margin-top:10px;font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--saas-muted);border:.5px solid var(--cta-border);border-radius:999px;padding:4px 10px}
#page-home .saas .tz-card .go{display:block;margin-top:14px;font-weight:600;font-size:13.5px;color:var(--cyan)}
/* A little more breathing room than the shared .flowsteer default (chrome.css) gives,
   since it follows the navy card's own bottom padding rather than a plain card. */
#page-home #doorSteer{margin-top:28px}

#page-home .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:30px}
#page-home .story{display:block;color:inherit;text-decoration:none;border:.5px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg);transition:.18s;cursor:pointer}
#page-home .story:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(8,46,74,.3)}
/* 16:10 matches the proportions the blog's featured images come in (1024x647),
   so the picture shows whole instead of having the words baked into it sliced
   off top and bottom. */
#page-home .snap{aspect-ratio:16/10;background:var(--bg-band);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--snap-icon);border-bottom:.5px solid var(--line)}
#page-home .snap span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-top:8px}
/* A blog post's featured image fills the strip, cropped to it, so cards keep a
   uniform height whatever shape the picture is. */
#page-home .snap img{display:block;width:100%;height:100%;object-fit:cover;flex:1 0 auto}
#page-home .story .b{padding:18px 20px}
#page-home .story .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-ink);font-weight:600}
#page-home .story h3{font-size:16.5px;font-weight:600;margin:8px 0 6px;line-height:1.25}
#page-home .story p{font-size:13.5px;line-height:1.5}
#page-home .seelink{display:inline-flex;align-items:center;gap:7px;color:var(--cyan-ink);font-weight:500;font-size:14.5px;margin-top:24px}
#page-home .pcard{border:.5px solid var(--line);border-radius:12px;padding:18px 20px;font-size:14px;color:var(--navy);display:flex;gap:10px;align-items:flex-start}
#page-home .pcard .gic{color:var(--cyan-ink);flex:0 0 auto;margin-top:1px}

/* The shared .cta-band (chrome.css) has margin-top:0; give it the standard gap
   here so the dark band sits an even distance below the section above it. */
#page-home .cta-band{margin-top:var(--section-gap)}
/* Bottom spacing so the form and the tall contact-info box clear the footer's
   top divider, which sits immediately below this section (the footer supplies
   the space beneath the line, this supplies the space above it). */
#page-home .contact{margin-top:var(--section-gap);padding-bottom:64px}
#page-home .cgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;margin-top:26px}
#page-home .form label{display:block;font-size:13px;color:var(--navy);font-weight:500;margin:14px 0 6px}
#page-home .form input,#page-home .form select,#page-home .form textarea{width:100%;border:1px solid var(--chip-border);border-radius:9px;padding:11px 13px;font-family:var(--body);font-size:14.5px;color:var(--navy);background:var(--bg)}
#page-home .form input:focus,#page-home .form select:focus,#page-home .form textarea:focus{outline:none;border-color:var(--cyan)}
#page-home .form textarea{min-height:96px;resize:vertical}
#page-home .form button{margin-top:18px;background:var(--navy);color:var(--bg);border:0;border-radius:var(--btn-radius);padding:13px 26px;font-size:15px;font-weight:600;cursor:pointer;font-family:var(--body)}
#page-home .form button:hover{background:var(--navy-2)}
#page-home .form .caveat{max-width:520px}
#page-home .form .caveat a,#page-home .thanks a{color:var(--cyan-ink);font-weight:600}
/* Shown after Send hands the enquiry to the visitor's email program. It sits
   under the form rather than replacing it, because the send is still theirs to
   make and they may need the form's details again. */
#page-home .thanks{display:none;background:var(--bg-soft);border:.5px solid var(--line);border-radius:12px;padding:24px;margin-top:18px;font-size:15px;color:var(--navy);line-height:1.6}
#page-home .cinfo{background:var(--bg-soft);border:.5px solid var(--line);border-radius:14px;padding:26px}
#page-home .cinfo h3{font-size:16px;margin-bottom:14px}
#page-home .cinfo .ci{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--navy);margin-bottom:14px}
#page-home .cinfo .ci .gic{color:var(--cyan-ink)}

/* Quiet press strip: no rules or box, just centred grey label and logos with
   even air above and below. The old top/bottom borders were a leftover from
   this strip's previous home at the foot of the page (moved 2026-07-23). */
#page-home .trust{margin-top:var(--section-gap);padding-top:34px;padding-bottom:34px}
#page-home .creds{display:flex;flex-wrap:wrap;justify-content:center;gap:40px 48px;margin-top:36px;align-items:flex-start}
#page-home .cred{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;width:200px;font-size:13.5px;font-weight:500;color:var(--navy);line-height:1.45}
#page-home .press .pe{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;text-align:center}
#page-home .press .names{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px 28px}
#page-home .press .names .acc-logo{height:24px;max-width:120px}

#page-home .hero h1,#page-home .hero p.lead,#page-home .hero .ticker,#page-home .hero .gran{animation:up .7s cubic-bezier(.2,.7,.2,1) both}
#page-home .hero p.lead{animation-delay:.08s}
#page-home .hero .ticker{animation-delay:.16s}
#page-home .hero .gran{animation-delay:.22s}

@media(max-width:760px){
  #page-home .saas{padding-top:34px;padding-bottom:34px;padding-left:26px;padding-right:26px}
  #page-home .cgrid{grid-template-columns:1fr}
  #page-home .cinfo{order:-1}
}
@media(max-width:640px){
  #page-home .grid4{grid-template-columns:1fr}
}