/* ==========================================================================
   Colour theme — loaded after styles.css on every page.
   Pure white ground; content sits in brand-coloured cut-corner boxes
   (pine / stone / aqua / slate) with the meeting photos blended in.
   Text on coloured grounds is pure white. Grew out of the /test experiment.
   ========================================================================== */

/* pure white ground everywhere the page was warm-tinted */
body { background: #ffffff; }
.section--stone { background: #ffffff; }
.site-header { background: rgba(255, 255, 255, 0.94); }

@media (max-width: 1080px) {
  .site-nav { background: #ffffff; }
}

/* ---- the three service cards: pine / stone / aqua ---- */

.card-grid .card {
  border: 0;
  color: var(--white);
  clip-path: polygon(
    var(--bevel-lg) 0, 100% 0,
    100% calc(100% - var(--bevel-lg)), calc(100% - var(--bevel-lg)) 100%,
    0 100%, 0 var(--bevel-lg)
  );
}
.card-grid .card:nth-child(3n + 1) { background: var(--pine); }   /* Dashboards */
.card-grid .card:nth-child(3n + 2) { background: var(--stone); }  /* Automations */
.card-grid .card:nth-child(3n + 3) { background: var(--aqua); }   /* Websites */

/* cards that are links (city grid, service overview) keep their text white */
.card-grid a.card { text-decoration: none; }
.card-grid a.card:hover { filter: brightness(1.08); }
.card-grid .card .card-more { margin-top: auto; padding-top: 1.2rem; font-weight: 700; color: var(--white); }

.card-grid .card h3,
.card-grid .card .tagline,
.card-grid .card .price { color: var(--white); }

/* all card text pure white */
.card-grid .card p,
.card-grid .card .price small { color: var(--white); }

/* the little cube marks read white on the coloured grounds */
.card-grid .card .card-mark { background: var(--white); }

/* ---- hero "See what we build" goes solid aqua ---- */

.hero .btn--ghost {
  background: var(--aqua);
  color: var(--white);
  box-shadow: none;
}
.hero .btn--ghost:hover { background: var(--aqua-dark); color: var(--white); }

/* nav buttons hover aqua ("Say hello" keeps its pine hover — that rule is more specific) */
.site-nav a:hover { background: var(--aqua); }

/* the cards-section CTA ("Explore what we build") goes slate */
.section--stone .btn--primary { background: var(--slate); }
.section--stone .btn--primary:hover { background: var(--slate-soft); }

/* cards section tucks up under the Discovery box — gap matches hero → Discovery */
.t-tight-top { padding-block-start: 0; }

/* the Discovery box's second paragraph matches its lede */
.t-photo-discovery .contact-grid > div > p:not(.eyebrow):not(.lede) {
  font-size: var(--step-1);
  max-width: 54ch;
}

/* ---- whole sections boxed in stone: Discovery Day + "From first chat to launch" ---- */

.t-box-stone { padding-block: var(--space-l); }

.t-box-stone > .wrap {
  background: var(--stone);
  color: var(--white);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  clip-path: polygon(
    var(--bevel-lg) 0, 100% 0,
    100% calc(100% - var(--bevel-lg)), calc(100% - var(--bevel-lg)) 100%,
    0 100%, 0 var(--bevel-lg)
  );
}

.t-box-stone h2,
.t-box-stone .step :is(h2, h3) { color: var(--white); }
.t-box-stone p,
.t-box-stone .lede,
.t-box-stone .step p { color: var(--white); }
.t-box-stone .eyebrow { color: var(--white); }

/* steps chrome on the stone ground — badges cycle teal and lime (slate digits for contrast) */
.t-box-stone .step { border-color: rgba(255, 255, 255, 0.28); }
.t-box-stone .step:nth-child(odd)::before { background: var(--teal); color: var(--slate); }
.t-box-stone .step:nth-child(even)::before { background: var(--lime); color: var(--slate); }

/* buttons inside stone boxes: primary goes slate, ghost goes white-outline */
.t-box-stone .btn--primary { background: var(--slate); color: var(--white); }
.t-box-stone .btn--primary:hover { background: var(--slate-soft); }
.t-box-stone .btn--ghost {
  background: var(--aqua);
  color: var(--white);
  box-shadow: none;
}
.t-box-stone .btn--ghost:hover { background: var(--aqua-dark); color: var(--white); }

/* ---- the meeting photos, blended into the coloured blocks ---- */

.t-photo-discovery > .wrap,
.t-photo-steps > .wrap,
.t-box-slate.t-photo-possible,
.cta-band.t-photo-cta {
  background-size: cover;
  background-position: center;
}
.t-photo-discovery > .wrap {
  background-image:
    linear-gradient(rgba(117, 108, 97, 0.9), rgba(117, 108, 97, 0.9)),
    url("../assets/meeting-4.jpg");
}
.t-photo-steps > .wrap {
  background-image:
    linear-gradient(rgba(117, 108, 97, 0.9), rgba(117, 108, 97, 0.9)),
    url("../assets/meeting-1.jpg");
}
.t-box-slate.t-photo-possible {
  background-image:
    linear-gradient(rgba(34, 31, 32, 0.88), rgba(34, 31, 32, 0.88)),
    url("../assets/meeting-3.jpg");
}
.cta-band.t-photo-cta {
  background-image:
    linear-gradient(rgba(58, 114, 67, 0.9), rgba(58, 114, 67, 0.9)),
    url("../assets/meeting-2.jpg");
}

/* ---- teal box variant — lighter feel, slate text for contrast ---- */

.t-box-stone.t-teal > .wrap {
  background-color: var(--teal);
  color: var(--slate);
}
.t-teal.t-photo-discovery > .wrap {
  background-image:
    linear-gradient(rgba(0, 161, 136, 0.92), rgba(0, 161, 136, 0.92)),
    url("../assets/meeting-4.jpg");
}
.t-teal.t-photo-steps > .wrap {
  background-image:
    linear-gradient(rgba(0, 161, 136, 0.92), rgba(0, 161, 136, 0.92)),
    url("../assets/meeting-1.jpg");
}
.t-teal.t-photo-contact > .wrap {
  background-image:
    linear-gradient(rgba(0, 161, 136, 0.92), rgba(0, 161, 136, 0.92)),
    url("../assets/meeting-3.jpg");
}

/* ---- generic photo box: the page sets the picture (and optionally the tint) inline ----
   <section class="section t-box-stone t-teal t-photo" style="--photo: url('/assets/city-derby.jpg')">
   Tints: teal (default) rgba(0,161,136,.92) · stone rgba(117,108,97,.9) · pine rgba(58,114,67,.9)
          aqua rgba(2,86,97,.9) · slate rgba(34,31,32,.88) */
.t-photo > .wrap {
  --tint: rgba(0, 161, 136, 0.92);
  background-image: linear-gradient(var(--tint), var(--tint)), var(--photo);
  background-size: cover;
  background-position: center;
}
/* city pages: let the skyline show through more */
.t-photo-vivid > .wrap { --tint: rgba(0, 161, 136, 0.86); }
.t-box-stone.t-pine > .wrap { --tint: rgba(58, 114, 67, 0.9); background-color: var(--pine); }
.t-box-stone.t-aqua > .wrap { --tint: rgba(2, 86, 97, 0.9); background-color: var(--aqua); }
.t-box-stone.t-slate > .wrap { --tint: rgba(34, 31, 32, 0.88); background-color: var(--slate); }
.t-box-stone.t-stone > .wrap { --tint: rgba(117, 108, 97, 0.9); }

/* ticks inside coloured boxes read white; the teal box swaps to slate below */
.t-box-stone .ticks li { color: var(--white); }
.t-box-stone .ticks li::before { background: var(--white); }
.t-box-stone .lede + p,
.t-box-stone .contact-grid > div > p:not(.eyebrow):not(.lede):not(.tagline) { max-width: var(--measure); }

/* the teal box needs slate ticks and chips to match its slate text */
.t-box-stone.t-teal .ticks li { color: var(--slate); }
.t-box-stone.t-teal .ticks li::before { background: var(--slate); }
.t-box-stone .tagline { color: var(--white); font-weight: 700; font-size: var(--step-2); line-height: 1.3; margin-bottom: 0.6em; text-wrap: balance; }
.t-box-stone.t-teal .tagline { color: var(--slate); }
.t-box-stone .chips li { color: var(--slate); border: 0; }
.t-box-stone .btn--light { background: var(--white); color: var(--slate); }

.t-box-stone.t-teal h2,
.t-box-stone.t-teal h3,
.t-box-stone.t-teal p,
.t-box-stone.t-teal .lede,
.t-box-stone.t-teal .eyebrow,
.t-box-stone.t-teal .step :is(h2, h3),
.t-box-stone.t-teal .step p,
.t-box-stone.t-teal .step-when,
.t-box-stone.t-teal .big-mail,
.t-box-stone.t-teal a:not(.btn) { color: var(--slate); }

.t-box-stone.t-teal .step { border-color: rgba(34, 31, 32, 0.3); }
.t-box-stone.t-teal .step:nth-child(odd)::before { background: var(--slate); color: var(--white); }
.t-box-stone.t-teal .step:nth-child(even)::before { background: var(--aqua); color: var(--white); }

/* ---- "Anything is possible." + its paragraph boxed in slate ---- */

.t-box-slate {
  background: var(--slate);
  color: var(--white);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  clip-path: polygon(
    var(--bevel-lg) 0, 100% 0,
    100% calc(100% - var(--bevel-lg)), calc(100% - var(--bevel-lg)) 100%,
    0 100%, 0 var(--bevel-lg)
  );
}
.t-box-slate h2 { color: var(--white); }
.t-box-slate .lede { color: var(--white); }
.t-box-slate .eyebrow { color: var(--teal); }

/* ---- no off-white anywhere: text on dark/coloured grounds is pure white ---- */

.hero .lede,
.page-hero .lede,
.section--slate p,
.section--slate .lede,
.section--pine p,
.section--pine .lede,
.site-footer,
.site-footer p,
.site-footer a,
.footer-bottom span,
.site-footer .footer-legal { color: var(--white); }

/* ---- the Discovery Day at-a-glance box goes slate ---- */

.offer-facts {
  background: var(--slate);
  border: 0;
  color: var(--white);
}
.offer-facts dt { color: var(--lime); }
.offer-facts dd { color: var(--white); }
.offer-facts dd small { color: var(--white); }

/* ==========================================================================
   Inner pages
   ========================================================================== */

/* more stone boxes with photos: About's story, Contact's main block */
.t-photo-story > .wrap,
.t-photo-contact > .wrap {
  background-size: cover;
  background-position: center;
}
.t-photo-story > .wrap {
  background-image:
    linear-gradient(rgba(117, 108, 97, 0.9), rgba(117, 108, 97, 0.9)),
    url("../assets/meeting-2.jpg");
}
.t-photo-contact > .wrap {
  background-image:
    linear-gradient(rgba(117, 108, 97, 0.9), rgba(117, 108, 97, 0.9)),
    url("../assets/meeting-3.jpg");
}

/* extra text that must be pure white inside stone boxes */
.t-box-stone h3 { color: var(--white); }
.t-box-stone .step-when { color: var(--white); }
.t-box-stone .big-mail { color: var(--white); }
.t-box-stone a:not(.btn) { color: var(--white); }

/* the contact form stays a white panel — keep its text dark */
.t-box-stone .contact-form { color: var(--slate); }
.t-box-stone .contact-form h3 { color: var(--slate); }
.t-box-stone .contact-form p,
.t-box-stone .contact-form .form-note { color: var(--slate-soft); }
.t-box-stone .contact-form label { color: var(--slate); }
.t-box-stone .contact-form .form-status { color: var(--pine-dark); }
.t-box-stone .contact-form .form-status--error { color: #7a1f1f; }

/* ---- services: each offer is a coloured box ---- */

.offer {
  border-top: 0;
  color: var(--white);
  padding: clamp(1.75rem, 4vw, 3rem);
  clip-path: polygon(
    var(--bevel-lg) 0, 100% 0,
    100% calc(100% - var(--bevel-lg)), calc(100% - var(--bevel-lg)) 100%,
    0 100%, 0 var(--bevel-lg)
  );
}
.offer:first-of-type { padding-top: clamp(1.75rem, 4vw, 3rem); }
.offer + .offer { margin-top: var(--space-m); }

#discovery-day,
.offer--stone {
  background-color: var(--stone);
  background-image:
    linear-gradient(rgba(117, 108, 97, 0.9), rgba(117, 108, 97, 0.9)),
    url("../assets/meeting-4.jpg");
  background-size: cover;
  background-position: center;
}
#dashboards, .offer--pine {
  background-color: var(--pine);
  background-image:
    linear-gradient(rgba(58, 114, 67, 0.9), rgba(58, 114, 67, 0.9)),
    url("../assets/service-dashboards.jpg");
  background-size: cover;
  background-position: center;
}
#websites, .offer--aqua {
  background-color: var(--aqua);
  background-image:
    linear-gradient(rgba(2, 86, 97, 0.9), rgba(2, 86, 97, 0.9)),
    url("../assets/service-websites.jpg");
  background-size: cover;
  background-position: center;
}

/* Automations offer goes teal — slate text for contrast */
#automations, .offer--teal {
  background-color: var(--teal);
  background-image:
    linear-gradient(rgba(0, 161, 136, 0.92), rgba(0, 161, 136, 0.92)),
    url("../assets/service-automations.jpg");
  background-size: cover;
  background-position: center;
}
:is(#automations, .offer--teal) h2,
:is(#automations, .offer--teal) p,
:is(#automations, .offer--teal) .tagline,
:is(#automations, .offer--teal) .eyebrow,
:is(#automations, .offer--teal) .ticks li { color: var(--slate); }
:is(#automations, .offer--teal) .ticks li::before { background: var(--slate); }
:is(#automations, .offer--teal) .btn--primary { background: var(--slate); color: var(--white); }

/* buttons inside the coloured offer boxes */
.offer .btn--primary { background: var(--slate); color: var(--white); }
.offer .btn--primary:hover { background: var(--slate-soft); }

.offer h2,
.offer p,
.offer .tagline,
.offer .eyebrow,
.offer .ticks li { color: var(--white); }
.offer .ticks li::before { background: var(--white); }

/* chips are light panels — keep their text dark */
.offer .chips li { color: var(--slate); border: 0; }

/* ---- about: founder cards go lime with cut corners — slate text ---- */

.founder {
  background: var(--lime);
  border: 0;
  color: var(--slate);
  clip-path: polygon(
    var(--bevel-lg) 0, 100% 0,
    100% calc(100% - var(--bevel-lg)), calc(100% - var(--bevel-lg)) 100%,
    0 100%, 0 var(--bevel-lg)
  );
}
.founder h3,
.founder p,
.founder .role { color: var(--slate); }
.founder a { color: var(--slate); }
.founder a:hover { color: var(--slate); }

/* founder portraits — greyscale on white in a cutout-corner window,
   sitting in the top-right corner of the box, like the email signature */
.founder-photo {
  float: right;
  width: clamp(8.5rem, 16vw, 11rem);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--white);
  padding: 0.5rem;
  filter: grayscale(1);
  clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%);
  margin: 0 0 1rem 1.25rem;
}