/* Comcert (Resicert Commercial) website
   Brand values read live from Canva design DAHX9tcJIGw,
   "Resicert Commercial Brand Guidelines", on 2026-11-10.

   PRIMARY is the gradient. NAVY, LIME GREEN and ORANGE are SECONDARY.
   Read off the rendered page, not guessed: the PRIMARY label sits over the
   gradient swatch and the SECONDARY label sits over the other three.

   Type: Barmeno is the brand primary and has no free web licence.
   The brand guide says Proxima Nova is the face to use ONLINE, so that is
   what this stack asks for first. Montserrat is the free fallback that
   renders until a licence is in place. Nothing breaks either way.
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --navy: #233949;
  --lime: #9ac436;
  --orange: #f58520;
  --grad-a: #3ca580;
  --grad-b: #378db4;
  --gradient: linear-gradient(135deg, #3ca580 0%, #378db4 100%);

  --ink: #233949;
  --ink-soft: #52616e;
  --line: #dfe5e9;
  --paper: #ffffff;
  --paper-tint: #f4f7f8;

  --font: 'proxima-nova', 'Proxima Nova', 'Montserrat', -apple-system,
          BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --wrap: 1100px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---- header ---- */

.topbar { background: var(--lime); height: 6px; }

header.site {
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(180%) blur(8px);
}

.navrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px 0;
}

.brand { text-decoration: none; color: var(--navy); display: block; }
.brand .mark { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; display: block; }
.brand .desc {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grad-a); font-weight: 600; display: block; margin-top: 2px;
}

nav.site ul { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; flex-wrap: wrap; }
nav.site a {
  text-decoration: none; color: var(--ink-soft); font-weight: 500; font-size: 15px;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
nav.site a:hover { color: var(--navy); }
nav.site a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--grad-a); }

/* ---- hero ---- */

.hero { background: var(--gradient); color: #fff; padding: 82px 0 74px; }
/* Lime green, matching the section labels in the approved Capability
   Statement 2026 (Canva DAHZSdF2Q1A), where WHO WE ARE and OUR SERVICES sit in
   lime on the gradient panel. */
.hero .eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px;
  font-weight: 700; color: var(--lime); margin: 0 0 14px;
}
.hero h1 {
  font-size: clamp(32px, 5vw, 50px); line-height: 1.12; margin: 0 0 20px;
  font-weight: 700; letter-spacing: -0.02em; max-width: 19ch;
}
.hero p.lede { font-size: clamp(17px, 2vw, 20px); margin: 0; max-width: 62ch; opacity: 0.95; }

/* ---- sections ---- */

section { padding: 68px 0; }
section.tint { background: var(--paper-tint); }

h2 {
  font-size: clamp(25px, 3.2vw, 33px); line-height: 1.2; margin: 0 0 18px;
  font-weight: 700; letter-spacing: -0.015em;
}
h3 { font-size: 20px; margin: 0 0 10px; font-weight: 700; }
p { margin: 0 0 18px; max-width: 72ch; }
p:last-child { margin-bottom: 0; }

.section-lede { font-size: 19px; color: var(--ink-soft); max-width: 68ch; }

/* ---- cards ---- */

.grid { display: grid; gap: 22px; margin-top: 34px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 28px 26px;
}
.card .num {
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--grad-b); display: block; margin-bottom: 10px;
}
.card .one-line { font-weight: 600; color: var(--grad-a); margin-bottom: 12px; }
.card p { font-size: 16px; color: var(--ink-soft); }

.delivers {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.delivers .label {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px;
  font-weight: 700; color: var(--ink-soft); display: block; margin-bottom: 10px;
}
.delivers ul { margin: 0; padding-left: 20px; }
.delivers li { font-size: 15.5px; color: var(--ink-soft); margin-bottom: 8px; }
.delivers li:last-child { margin-bottom: 0; }

.relevant {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-soft);
}
.relevant .label {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px;
  font-weight: 700; display: block; margin-bottom: 8px; color: var(--navy);
}

/* ---- pull band ---- */

.band {
  background: var(--navy); color: #fff; border-radius: 12px;
  padding: 40px 36px; margin: 56px 0 0; text-align: center;
}
.band p { font-size: clamp(18px, 2.4vw, 22px); margin: 0 auto; max-width: 60ch; line-height: 1.45; }
.band a { color: var(--lime); }

/* ---- buttons ---- */

.btn {
  display: inline-block; background: var(--orange); color: #fff;
  text-decoration: none; font-weight: 600; font-size: 16px;
  padding: 14px 28px; border-radius: 8px; border: 0; cursor: pointer;
  font-family: var(--font);
}
.btn:hover { filter: brightness(0.94); }
.btn.ghost { background: transparent; border: 2px solid #fff; }

/* ---- forms ---- */

form.enquiry { max-width: 640px; margin-top: 26px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font); font-size: 16px; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--grad-b); outline-offset: 1px; border-color: var(--grad-b);
}

/* ---- contact detail ---- */

.detail { margin: 0 0 14px; }
.detail .k {
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px;
  font-weight: 700; color: var(--ink-soft); display: block;
}
.detail .v { font-size: 18px; font-weight: 600; }

/* A value nobody has confirmed yet. Deliberately loud so it cannot ship. */
.unconfirmed {
  background: #fff3e6; color: #a04f00; border: 1px dashed var(--orange);
  border-radius: 6px; padding: 2px 8px; font-size: 15px; font-weight: 600;
}

/* ---- footer ---- */

footer.site {
  background: var(--navy); color: #c9d4dc; padding: 46px 0 34px; margin-top: 72px;
  font-size: 15px;
}
footer.site a { color: #fff; }
footer.site .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
footer.site h4 {
  color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
  margin: 0 0 12px;
}
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: 8px; }
footer.site .legal {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 13.5px; color: #93a4b0;
}
footer.site .fbrand { color: #fff; font-weight: 700; font-size: 18px; display: block; }
footer.site .fdesc { color: var(--lime); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600; margin-top: 3px; display: block; }

/* ---- small screens ---- */

@media (max-width: 860px) {
  .grid.three { grid-template-columns: 1fr 1fr; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .navrow { flex-direction: column; align-items: flex-start; gap: 14px; }
  nav.site ul { gap: 18px; }
  .hero { padding: 58px 0 52px; }
  section { padding: 50px 0; }
  .grid.two, .grid.three { grid-template-columns: 1fr; }
  .band { padding: 30px 24px; }
  footer.site .cols { grid-template-columns: 1fr; }
}

/* A card that is itself a link. */
a.linkcard { display: block; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.linkcard:hover { border-color: var(--grad-a); transform: translateY(-2px); }
a.linkcard h3 { margin-bottom: 8px; }
a.linkcard .go { font-size: 14px; font-weight: 600; color: var(--grad-b); }

/* Footer links: underline on hover only, so the list is not a wall of rules. */
footer.site li a { text-decoration: none; }
footer.site li a:hover { text-decoration: underline; }

/* ── the real logo ───────────────────────────────────────────────────────── */
/* 3. Combination Mark.png and 1. Pictorial.png, pulled from the Resicert
   shared drive on 2026-11-10 and cropped to their content. */

.brand img { display: block; height: 42px; width: auto; }
footer.site .brand img { height: 38px; filter: brightness(0) invert(1); }

/* ── image slots ─────────────────────────────────────────────────────────── */
/* Every photograph the approved Capability Statement layout calls for, held
   open with a labelled block so the page reads correctly before the designer
   drops the real picture in. Each one states what it needs. */

.imgslot {
  position: relative; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, #e8eef1 0%, #dce6ea 100%);
  border: 1px dashed #9db3bf; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 26px;
  min-height: 240px;
}
.imgslot.tall { min-height: 420px; }
.imgslot.wide { min-height: 300px; }
.imgslot .slotlabel { max-width: 46ch; }
.imgslot .slotkind {
  display: inline-block; background: var(--navy); color: #fff;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; padding: 4px 10px; border-radius: 4px; margin-bottom: 12px;
}
.imgslot .slotbrief { font-size: 14.5px; line-height: 1.5; color: #3d5666; margin: 0; }
.imgslot .slotref {
  display: block; margin-top: 10px; font-size: 12.5px; color: #5d7a8c;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* A slot sitting on the gradient hero needs its own treatment. */
.hero .imgslot {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.45);
}
.hero .imgslot .slotbrief, .hero .imgslot .slotref { color: rgba(255,255,255,0.92); }
.hero .imgslot .slotkind { background: #fff; color: var(--navy); }

/* ── hero with an image beside it ────────────────────────────────────────── */
.hero.split .wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center; }

/* ── numbered steps, as the capability statement sets them ──────────────── */
.steps { counter-reset: step; margin-top: 34px; display: grid; gap: 16px; }
.step {
  display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px;
}
.step .n {
  width: 46px; height: 46px; border-radius: 50%; background: var(--gradient);
  color: #fff; font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { margin: 6px 0 6px; }
.step p { font-size: 16px; color: var(--ink-soft); margin: 0; }

/* ── the offer block ─────────────────────────────────────────────────────── */
.offer {
  background: var(--navy); color: #fff; border-radius: 14px; padding: 46px 42px;
  margin-top: 56px;
}
.offer .eyebrow {
  color: var(--lime); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 12px; font-weight: 700; margin: 0 0 14px;
}
.offer h2 { color: #fff; margin-bottom: 14px; }
.offer p { color: rgba(255,255,255,0.9); max-width: 64ch; }
.offer .btn { margin-top: 12px; }

@media (max-width: 860px) {
  .hero.split .wrap { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 680px) {
  .brand img { height: 34px; }
  .offer { padding: 30px 24px; }
  .step { grid-template-columns: 38px 1fr; gap: 14px; padding: 18px; }
  .step .n { width: 38px; height: 38px; font-size: 16px; }
}