/* The homepage, and only the homepage.

   Everything here is scoped under .ent so none of it can leak into the 57
   other pages that load style.css. Two global rules in style.css have to be
   undone inside the scope rather than fought one selector at a time:

     p        { padding-top: .8rem; font-size: 1.4rem; line-height: 1.5 !important }
     a:link / a:visited  recoloured grey site-wide

   Colours are the site's own tokens: --brand green and --ink navy. Green is
   only ever a fill or a large mark; text in green uses --e-accent-ink, which
   passes AA on white where #34cc99 does not.

   Light theme only, on purpose: the shared header and every other page are
   light, and a homepage that flipped dark on its own would read as a
   different website. Radius follows the site scale (4px inputs, 8px for
   cards, images and buttons).

   Typeface: Geist, loaded by index.php. Lato and Poppins stay on the rest of
   the site. */

.ent {
  --e-ink: #0d1b2a;
  --e-body: #3b4a58;
  --e-muted: #586674;
  --e-line: #dde3e8;
  --e-bg: #ffffff;
  --e-sunk: #f3f5f7;
  --e-accent: #34cc99;
  --e-accent-hover: #2bb889;
  --e-accent-ink: #12684f;
  --e-wash: #e8f9f3;
  --e-r-sm: 4px;
  --e-r: 8px;
  --e-shell: 1200px;
  --e-ease: cubic-bezier(0.16, 1, 0.3, 1);

  font-family: "Geist", "Poppins", system-ui, sans-serif;
  color: var(--e-body);
  background: var(--e-bg);
  font-size: 1rem;
}

.ent p {
  padding-top: 0;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6 !important;
}
.ent h1,
.ent h2,
.ent h3 {
  font-family: inherit;
  color: var(--e-ink);
  margin: 0;
  padding: 0;
}
.ent h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.ent h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.ent a:link,
.ent a:visited {
  color: var(--e-accent-ink);
  font-family: inherit;
}
/* height:auto matters: the width/height attributes on each <img> reserve
   space against layout shift, but without this the height attribute wins
   over aspect-ratio and the photo renders at its full pixel height. */
.ent img {
  display: block;
  max-width: 100%;
  height: auto;
}
.ent :focus-visible {
  outline: 2px solid var(--e-accent-ink);
  outline-offset: 2px;
}

.ent-shell {
  max-width: var(--e-shell);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.ent-section {
  padding: 5.5rem 0;
}
.ent-section--sunk {
  background: var(--e-sunk);
}
.ent-lede {
  max-width: 60ch;
  margin-top: 1rem !important;
  color: var(--e-body);
}
.ent-eyebrow {
  font-size: 0.8125rem !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e-accent-ink);
  margin-bottom: 0.875rem !important;
}

/* Buttons ---------------------------------------------------------------- */
.ent-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.375rem;
  border-radius: var(--e-r);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color 0.25s var(--e-ease), border-color 0.25s var(--e-ease),
              transform 0.15s var(--e-ease);
}
.ent-btn:active {
  transform: translateY(1px);
}
.ent a.ent-btn--primary:link,
.ent a.ent-btn--primary:visited,
.ent button.ent-btn--primary {
  background: var(--e-accent);
  color: var(--e-ink);
}
.ent a.ent-btn--primary:hover,
.ent button.ent-btn--primary:hover {
  background: var(--e-accent-hover);
  color: var(--e-ink);
}
.ent a.ent-btn--ghost:link,
.ent a.ent-btn--ghost:visited {
  background: transparent;
  border-color: #b9c3cc;
  color: var(--e-ink);
}
.ent a.ent-btn--ghost:hover {
  border-color: var(--e-ink);
  color: var(--e-ink);
}
.ent button.ent-btn--dark {
  background: var(--e-ink);
  color: #ffffff;
}
.ent button.ent-btn--dark:hover {
  background: #1d3047;
}
.ent-btn i {
  font-size: 0.875em;
  transition: transform 0.25s var(--e-ease);
}
.ent-btn:hover i {
  transform: translateX(3px);
}

/* Hero ------------------------------------------------------------------- */
.ent-hero {
  padding: 4.5rem 0 5rem;
  border-bottom: 1px solid var(--e-line);
}
.ent-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 3.5rem;
  align-items: center;
}
.ent-hero h1 {
  font-size: clamp(2.375rem, 4.4vw, 3.625rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.04;
  max-width: 14ch;
}
.ent-hero-sub {
  margin-top: 1.5rem !important;
  max-width: 44ch;
  font-size: 1.1875rem !important;
  color: var(--e-body);
}
.ent-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}
.ent-hero-media {
  position: relative;
}
.ent-hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--e-r);
}
/* A block of brand green offset behind the photo: the one decorative move on
   the page, and it is the brand colour doing it. */
.ent-hero-media::before {
  content: "";
  position: absolute;
  right: -1.25rem;
  bottom: -1.25rem;
  width: 58%;
  height: 62%;
  background: var(--e-wash);
  border-radius: var(--e-r);
  z-index: 0;
}
.ent-hero-media img {
  position: relative;
  z-index: 1;
}

/* What we build: a three-cell bento -------------------------------------- */
.ent-bento {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.25rem;
  margin-top: 2.75rem;
}
.ent-tile {
  border-radius: var(--e-r);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ent-tile p {
  max-width: 52ch;
}
.ent-tile--saas {
  grid-row: span 2;
  background: var(--e-bg);
  border: 1px solid var(--e-line);
  padding: 0 0 2rem;
  overflow: hidden;
}
.ent-tile--saas img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 0.75rem;
}
.ent-tile--saas h3,
.ent-tile--saas p,
.ent-tile--saas ul {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
}
.ent-tile--ai {
  background: var(--e-ink);
  color: #c9d3dc;
}
.ent-tile--ai h3 {
  color: #ffffff;
}
.ent-tile--ai .ent-tile-icon {
  background: rgba(52, 204, 153, 0.16);
  color: var(--e-accent);
}
.ent-tile--internal {
  background: var(--e-wash);
}
.ent-tile-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--e-r);
  display: grid;
  place-items: center;
  background: var(--e-bg);
  color: var(--e-accent-ink);
  font-size: 1.05rem;
  /* Icon pinned top, copy pinned bottom, so the two short tiles fill the
     height the tall SaaS tile gives them. */
  margin-bottom: auto;
}
.ent-tile-icon + h3 {
  margin-top: 1.5rem;
}
.ent-ticks {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
  font-size: 0.9375rem;
  color: var(--e-ink);
}
.ent-ticks li {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}
.ent-ticks i {
  color: var(--e-accent-ink);
  font-size: 0.8rem;
}

/* How a project runs ----------------------------------------------------- */
.ent-process-media {
  margin-top: 2.75rem;
}
.ent-process-media img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  border-radius: var(--e-r);
}
.ent-steps {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  counter-reset: none;
}
.ent-steps li {
  border-top: 2px solid var(--e-ink);
  padding-top: 1.25rem;
}
.ent-steps li:first-child {
  border-top-color: var(--e-accent);
}
.ent-steps h3 {
  margin-bottom: 0.625rem;
}
.ent-steps p {
  font-size: 1rem !important;
  color: var(--e-body);
}

/* Security --------------------------------------------------------------- */
.ent-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 4rem;
  align-items: stretch;
}
.ent-split-media img {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: var(--e-r);
}
.ent-assurances {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 2.5rem;
  margin: 2.5rem 0 0;
}
.ent-assurances dt {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--e-ink);
  margin-bottom: 0.5rem;
}
.ent-assurances dt i {
  color: var(--e-accent-ink);
  width: 1.1rem;
  text-align: center;
}
.ent-assurances dd {
  margin: 0;
  font-size: 0.9875rem;
  line-height: 1.6;
  color: var(--e-body);
}

/* Project form ----------------------------------------------------------- */
.ent-form-section {
  background: var(--e-sunk);
  border-top: 1px solid var(--e-line);
  border-bottom: 1px solid var(--e-line);
  scroll-margin-top: 1rem;
}
.ent-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 4rem;
  align-items: start;
}
.ent-next {
  list-style: none;
  padding: 0;
  margin: 2.25rem 0 0;
  display: grid;
  gap: 1.25rem;
}
.ent-next li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 1rem;
  color: var(--e-ink);
}
.ent-next-icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--e-r);
  display: grid;
  place-items: center;
  background: var(--e-bg);
  border: 1px solid var(--e-line);
  color: var(--e-accent-ink);
  font-size: 0.85rem;
}
.ent-next span:last-child {
  padding-top: 0.25rem;
  line-height: 1.5;
}
.ent-direct {
  margin-top: 2rem !important;
  font-size: 0.9375rem !important;
  color: var(--e-muted);
}

.ent-form {
  background: var(--e-bg);
  border: 1px solid var(--e-line);
  border-radius: var(--e-r);
  padding: 2.25rem;
  display: grid;
  gap: 1.25rem;
  box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04), 0 12px 32px -12px rgba(13, 27, 42, 0.12);
}
.ent-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.ent-field {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}
.ent-field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--e-ink);
  margin: 0;
}
.ent-field .ent-req {
  color: #b42318;
}
.ent-field .ent-opt {
  font-weight: 400;
  color: var(--e-muted);
}
.ent-field input,
.ent-field select,
.ent-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--e-ink);
  background: var(--e-bg);
  border: 1px solid #a9b4be;
  border-radius: var(--e-r-sm);
  padding: 0.7rem 0.8rem;
  transition: border-color 0.2s var(--e-ease), box-shadow 0.2s var(--e-ease);
}
.ent-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--e-ink) 50%),
                    linear-gradient(135deg, var(--e-ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}
.ent-field textarea {
  min-height: 9rem;
  resize: vertical;
}
.ent-field input:focus,
.ent-field select:focus,
.ent-field textarea:focus {
  outline: none;
  border-color: var(--e-accent-ink);
  box-shadow: 0 0 0 3px rgba(52, 204, 153, 0.35);
}
.ent-field [aria-invalid="true"] {
  border-color: #b42318;
}
.ent-help {
  font-size: 0.875rem !important;
  color: var(--e-muted);
}
.ent-err {
  font-size: 0.875rem !important;
  font-weight: 600;
  color: #b42318;
}
.ent-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.25rem;
}
.ent-fine {
  font-size: 0.875rem !important;
  color: var(--e-muted);
}
.ent-note {
  border-radius: var(--e-r-sm);
  padding: 0.9rem 1rem;
  font-size: 0.975rem !important;
  font-weight: 500;
  border-left: 3px solid;
}
.ent-note--ok {
  color: #0b4f3a;
  background: var(--e-wash);
  border-left-color: var(--e-accent-ink);
}
.ent-note--bad {
  color: #8a1c12;
  background: #fdecea;
  border-left-color: #b42318;
}
.ent-trap {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Small business: the original services, now secondary ------------------- */
.ent-smb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  margin-top: 2.75rem;
}
.ent-smb-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--e-line);
}
.ent-smb-head a {
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.ent-plans {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ent-plan a:link,
.ent-plan a:visited {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0.75rem;
  margin: 0 -0.75rem;
  border-radius: var(--e-r);
  color: var(--e-ink);
  text-decoration: none;
  transition: background-color 0.2s var(--e-ease);
}
.ent-plan a:hover {
  background: var(--e-sunk);
}
.ent-plan-name {
  font-weight: 600;
  font-size: 1.0625rem;
}
.ent-plan-desc {
  display: block;
  font-size: 0.9rem;
  color: var(--e-muted);
  margin-top: 0.15rem;
}
.ent-plan-price {
  text-align: right;
  font-weight: 600;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ent-plan-price small {
  display: block;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--e-muted);
}
.ent-services {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.ent-services a:link,
.ent-services a:visited {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--e-line);
  border-radius: var(--e-r);
  background: var(--e-bg);
  color: var(--e-ink);
  font-size: 0.975rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s var(--e-ease), transform 0.2s var(--e-ease);
}
.ent-services a:hover {
  border-color: var(--e-accent-ink);
  transform: translateY(-1px);
}
.ent-services i {
  color: var(--e-accent-ink);
  width: 1.1rem;
  text-align: center;
}

.ent-quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin: 3.5rem 0 0;
  padding: 2.5rem 0 0;
  border-top: 1px solid var(--e-line);
}
.ent-quotes blockquote {
  margin: 0;
}
.ent-quotes blockquote p {
  font-size: 1.125rem !important;
  color: var(--e-ink);
}
.ent-quotes footer {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--e-muted);
}
.ent-quotes cite {
  font-style: normal;
  font-weight: 600;
  color: var(--e-ink);
}

.ent-news {
  margin-top: 3.5rem;
  padding: 1.75rem 2rem;
  border-radius: var(--e-r);
  background: var(--e-bg);
  border: 1px solid var(--e-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem 2.5rem;
  align-items: center;
  scroll-margin-top: 1rem;
}
.ent-news h3 {
  font-size: 1.125rem;
}
.ent-news p {
  font-size: 0.975rem !important;
  margin-top: 0.25rem !important;
}
.ent-news form {
  display: flex;
  gap: 0.625rem;
}
.ent-news input[type="email"] {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--e-ink);
  border: 1px solid #a9b4be;
  border-radius: var(--e-r-sm);
  padding: 0.7rem 0.8rem;
}
.ent-news input[type="email"]:focus {
  outline: none;
  border-color: var(--e-accent-ink);
  box-shadow: 0 0 0 3px rgba(52, 204, 153, 0.35);
}
.ent-news .ent-note {
  grid-column: 1 / -1;
}

/* Motion ------------------------------------------------------------------
   Two moves only. The hero assembles on load (headline, then the rest) so
   the eye lands on the value line first; sections fade up as they enter, so
   a long page reads in order. Both are off under reduced motion. A block is
   only hidden once home.js has seen the observer report it off-screen, so
   nothing is ever hidden from a visitor whose browser cannot animate it. */
@media (prefers-reduced-motion: no-preference) {
  .ent-hero-copy > *,
  .ent-hero-media {
    animation: ent-rise 0.8s var(--e-ease) both;
  }
  .ent-hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .ent-hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  .ent-hero-media { animation-delay: 0.12s; }

  .ent-js .ent-reveal {
    transition: opacity 0.7s var(--e-ease), transform 0.7s var(--e-ease);
  }
  .ent-js .ent-reveal.is-pending {
    opacity: 0;
    transform: translateY(20px);
  }
}
@keyframes ent-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Below 900px every multi-column block becomes one column. ---------------- */
@media (max-width: 900px) {
  .ent-section { padding: 4rem 0; }
  .ent-hero { padding: 2.5rem 0 3.5rem; }
  .ent-hero-grid,
  .ent-split,
  .ent-form-grid,
  .ent-smb-grid,
  .ent-news {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .ent-hero-media::before { right: -0.75rem; bottom: -0.75rem; }
  .ent-bento { grid-template-columns: 1fr; }
  .ent-tile--saas { grid-row: auto; }
  .ent-steps { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .ent-split-media img { min-height: 14rem; max-height: 18rem; }
  .ent-process-media img { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .ent-shell { padding: 0 1rem; }
  .ent-steps,
  .ent-assurances,
  .ent-ticks,
  .ent-services,
  .ent-quotes,
  .ent-form-row {
    grid-template-columns: 1fr;
  }
  .ent-tile { padding: 1.5rem; }
  .ent-tile--saas { padding: 0 0 1.5rem; }
  .ent-tile--saas h3,
  .ent-tile--saas p,
  .ent-tile--saas ul {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
  }
  .ent-form { padding: 1.5rem; }
  .ent-news { padding: 1.5rem; }
  .ent-news form { flex-direction: column; }
  .ent-hero-ctas .ent-btn { width: 100%; justify-content: center; }
}