/* Mora IT — site stylesheet
   Locked visual system: charcoal + teal, Sora (headlines) + IBM Plex Sans (body). */

/* Self-hosted fonts — no request leaves the site to render text.
   Latin subset, WOFF2 only. Licences and provenance in /fonts/README.txt.
   font-display: swap means text paints immediately in the fallback and
   swaps when the webfont arrives, rather than sitting invisible. */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/sora-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/sora-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-500.woff2') format('woff2');
}
/* 600 was never loaded from Google even though the stylesheet uses it in
   seven places — buttons, active nav, eyebrows, card links, form labels and
   legal table headers were all browser-synthesised fake bold until now. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-600.woff2') format('woff2');
}

:root {
  --charcoal: #20242B;
  --charcoal-deep: #1B1F24;
  --charcoal-darkest: #0f1216;
  --teal: #2F8F86;
  --grey-mid: #6B7278;
  --grey-light: #AEB8B8;
  --border: #DDE3E3;
  --offwhite: #F4F6F6;
  --white: #FFFFFF;
  --hero-placeholder: #2B3038;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--charcoal-deep);
  background: var(--white);
}

h1, h2, h3, .heading {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  color: var(--charcoal);
  margin: 0;
}

/* Justified body copy sitewide. text-align-last keeps the final line of a
   paragraph from being stretched, and hyphens avoid large gaps when a narrow
   column forces a long word to wrap.

   IMPORTANT: text-align is an INHERITED property, and inheritance always
   loses to a rule that matches the element directly — however low its
   specificity. So a centred section does NOT centre its own paragraphs
   through this rule; this rule wins and justifies them instead. Centred
   areas have to say so explicitly, which is what the block below is for.
   (An earlier comment here claimed centred containers would override this.
   They don't, and seven paragraphs across the site were quietly justified
   inside centred sections because of it.) */
p, blockquote {
  text-align: justify;
  text-align-last: left;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Centred areas: heading, copy and button share one axis. Centred text is
   never justified — the two ideas contradict each other, and justifying
   centred copy is what produced the ragged full-width paragraphs. */
.center,
.center p,
.cta-dark p,
.faq-hero p,
.about-hero p,
.legal-hero p,
.pillar-hero.center p,
.trust-strip {
  text-align: center;
  text-align-last: center;
  -webkit-hyphens: none;
  hyphens: none;
}

/* Centred copy still needs a readable measure. Left unbounded it runs the
   full width of the viewport, which is what the CTA paragraphs were doing. */
.cta-dark p,
.faq-hero p,
.center > p {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

a { text-decoration: none; }

.wrap { max-width: 1440px; margin: 0 auto; }

/* Buttons */
.btn {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  background: var(--teal);
  color: var(--charcoal-darkest);
  font-size: 15px;
  padding: 14px 28px;
}
.btn-nav {
  font-weight: 500;
  font-size: 14px;
  padding: 10px 20px;
  color: var(--offwhite);
}

/* Header / nav */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 64px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 16px;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-text {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.logo-text .charcoal { color: var(--charcoal); }
.logo-text .teal { color: var(--teal); }
.nav { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
.nav a {
  font-size: 14px;
  color: var(--charcoal-deep);
}
.nav a.active {
  color: var(--charcoal);
  font-weight: 600;
  border-bottom: 2px solid var(--teal);
  padding-bottom: 4px;
}

/* Footer */
/* A three-column grid rather than flex: the two outer columns are forced to
   equal width with minmax(0, 1fr), so the middle column lands on the exact
   centre line of the page no matter how long the contact line gets. Flex
   could not do this — with flex-basis: 0 the contact block's own padding is
   added to its base size, which made it wider than the logo column and threw
   the links 43px off centre. */
.site-footer {
  padding: 36px 64px;
  background: var(--charcoal-darkest);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 24px;
}
.site-footer > .logo { justify-self: start; }
.site-footer .logo-text { color: var(--offwhite); font-size: 16px; }
.footer-legal { justify-self: center; display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.footer-legal a { font-size: 13px; color: var(--grey-mid); }
.footer-legal a:hover { color: var(--offwhite); }
.footer-contact {
  justify-self: end;
  text-align: right;
  font-size: 13px;
  color: var(--grey-mid);
}
/* Clearance for the Zendesk chat launcher, which floats at the bottom-right
   of the viewport — exactly where this line sits once you scroll to the
   bottom, and it covered the tail of "Melbourne, Australia". Applied only
   when the widget is actually on, so the footer is not left with a stray
   inset while the chat is switched off. */
body.has-chat-widget .footer-contact { padding-right: 40px; }
.footer-contact a { color: var(--grey-mid); }
.footer-contact a:hover { color: var(--offwhite); }

/* Sections */
section { padding: 80px 64px; }
.section-dark { background: var(--charcoal); }
.section-light { background: var(--offwhite); }
.section-white { background: var(--white); }
.section-heading { font-size: 30px; margin-bottom: 44px; text-align: center; }

/* Hero (homepage) */
.hero {
  background: var(--charcoal);
  padding: 88px 64px 96px;
  display: flex;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
}
.hero-copy { flex: 1 1 420px; }
.hero-copy h1 {
  font-size: 52px;
  line-height: 1.12;
  color: var(--offwhite);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.hero-copy p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--grey-light);
  max-width: 520px;
  margin: 0 0 36px;
}
.hero-image-placeholder {
  flex: 1 1 320px;
  min-height: 340px;
  border-radius: 16px;
  background: var(--hero-placeholder);
  border: 1px dashed var(--grey-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--grey-mid);
  font-size: 13px;
  padding: 0 24px;
}
.hero-image {
  flex: 1 1 320px;
  border-radius: 16px;
  overflow: hidden;
  min-height: 340px;
  max-height: 420px;
}
.hero-image picture { display: block; width: 100%; height: 100%; }
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pillar page hero (Everyday IT Care / Security & Compliance) */
.pillar-hero { background: var(--charcoal); padding: 76px 64px; }
.pillar-eyebrow {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 18px;
}
.pillar-hero h1 {
  font-size: 42px;
  line-height: 1.18;
  color: var(--offwhite);
  margin-bottom: 20px;
  max-width: 780px;
}
.pillar-hero p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--grey-light);
  max-width: 640px;
  margin: 0;
}

/* Trust strip */
.trust-strip {
  background: var(--offwhite);
  padding: 22px 64px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--grey-mid);
}

/* Card grids */
.card-grid { display: grid; gap: 24px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  background: var(--white);
}
.card h3 { font-size: 16px; margin-bottom: 8px; }
.card p { font-size: 13.5px; line-height: 1.6; color: var(--charcoal-deep); margin: 0; }

.pillar-card {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px;
  background: var(--white);
}
.pillar-card h2, .pillar-card h3 { font-size: 22px; margin: 20px 0 12px; font-family: 'Sora', system-ui, sans-serif; font-weight: 600; }
.pillar-card p { font-size: 15px; line-height: 1.65; color: var(--charcoal-deep); margin: 0 0 20px; }
.pillar-card .card-link { font-size: 14px; color: var(--teal); font-weight: 600; }
.two-cards { display: flex; gap: 32px; flex-wrap: wrap; }
.two-cards > .pillar-card { flex: 1 1 320px; }
.three-cards { display: flex; gap: 24px; flex-wrap: wrap; }
.three-cards > .pillar-card { flex: 1 1 280px; }

/* Steps */
.steps { display: flex; gap: 28px; flex-wrap: wrap; }
.step { flex: 1 1 240px; background: var(--white); border-radius: 14px; padding: 32px; }
.step .step-number { font-family: 'Sora', system-ui, sans-serif; font-size: 15px; font-weight: 700; color: var(--teal); margin-bottom: 14px; }
.step h3 { font-size: 18px; margin-bottom: 10px; }
.step p { font-size: 14px; line-height: 1.6; color: var(--charcoal-deep); margin: 0; }

/* Starting-something-new banner */
.banner-dark {
  padding: 56px 64px;
  background: var(--charcoal);
}
.banner-dark h2 { font-size: 22px; color: var(--offwhite); margin-bottom: 12px; }
.banner-dark p { font-size: 14px; line-height: 1.65; color: var(--grey-light); max-width: 640px; margin: 0; }

/* Testimonials */
.testimonial-grid { display: flex; gap: 32px; margin-bottom: 16px; flex-wrap: wrap; align-items: stretch; }
/* Column layout so the attribution can be pushed to the bottom of the card —
   otherwise quotes of different lengths leave the names at different heights. */
.testimonial {
  flex: 1 1 320px;
  background: var(--offwhite);
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
/* Not justified: a quote in a ~370px card is too narrow to justify without
   opening visible gaps between words. */
.testimonial blockquote {
  font-size: 16px;
  line-height: 1.6;
  font-style: italic;
  margin: 0 0 16px;
  text-align: left;
  -webkit-hyphens: none;
  hyphens: none;
}
.testimonial cite { font-size: 13px; color: var(--grey-mid); font-style: normal; margin-top: auto; }

/* Two-column teaser row */
.teaser-row { display: flex; gap: 48px; flex-wrap: wrap; }
.teaser-col { flex: 1 1 320px; }
.teaser-col h2 { font-size: 24px; margin-bottom: 14px; }
.teaser-col p { font-size: 15px; line-height: 1.7; color: var(--charcoal-deep); margin: 0; }
.link-teal { color: var(--teal); font-weight: 600; }

/* Contact CTA (dark, centered) */
.cta-dark { background: var(--charcoal); text-align: center; }
.cta-dark h2 { font-size: 28px; color: var(--offwhite); margin-bottom: 14px; }
.cta-dark p { font-size: 15px; color: var(--grey-light); margin: 0 auto 28px; }

/* About page */
.about-hero { background: var(--offwhite); padding: 72px 64px 56px; text-align: center; }
.about-body { padding: 64px 64px 24px; display: flex; gap: 56px; align-items: flex-start; flex-wrap: wrap; }
.about-photo-placeholder {
  flex: 1 1 320px;
  height: 360px;
  border-radius: 16px;
  background: var(--offwhite);
  border: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--grey-mid); font-size: 13px; padding: 0 24px;
}
.about-photo {
  flex: 1 1 320px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--offwhite);
}
.about-photo picture { display: block; width: 100%; }
.about-photo img {
  width: 100%;
  height: auto;
  display: block;
}
.about-copy { flex: 1.3 1 400px; }
.about-copy p { font-size: 16px; line-height: 1.8; color: var(--charcoal-deep); margin: 0 0 20px; }

/* FAQ */
.faq-hero { background: var(--offwhite); padding: 64px; text-align: center; }
.faq-hero p { font-size: 15px; color: var(--grey-mid); margin: 12px auto 0; }
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item { padding: 22px 0; border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-item h2, .faq-item h3 { font-size: 16px; margin-bottom: 8px; font-family: 'Sora', system-ui, sans-serif; font-weight: 600; }
.faq-item p { font-size: 14px; line-height: 1.65; color: var(--charcoal-deep); margin: 0; }

/* Contact */
.contact-grid { display: flex; gap: 72px; flex-wrap: wrap; }
.contact-info { flex: 1 1 380px; }
.contact-info h1 { font-size: 34px; margin-bottom: 18px; }
.contact-info > p { font-size: 16px; line-height: 1.7; color: var(--charcoal-deep); margin: 0 0 36px; max-width: 440px; }
.contact-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.contact-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--offwhite); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--teal); flex: 0 0 auto; }
.contact-link { color: var(--charcoal-deep); }
.contact-link:hover { color: var(--teal); }
.contact-aside { background: var(--offwhite); border-radius: 10px; padding: 18px 20px; max-width: 420px; font-size: 13.5px; }
.contact-form { flex: 1 1 380px; background: var(--offwhite); border-radius: 16px; padding: 40px; }
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-size: 13px; font-weight: 600; color: var(--charcoal); margin-bottom: 6px; }
.form-field input, .form-field textarea {
  width: 100%; height: 44px; border-radius: 8px; background: var(--white);
  border: 1px solid var(--border); font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px; padding: 0 14px;
}
.form-field textarea { height: 90px; padding: 10px 14px; resize: vertical; }
.form-row { display: flex; gap: 16px; }
.form-row .form-field { flex: 1; }
.contact-form .btn { width: 100%; text-align: center; }

/* Legal pages (Terms & Conditions / Privacy Policy) */
.legal-hero { background: var(--offwhite); padding: 64px; text-align: center; }
.legal-hero h1 { font-size: 32px; margin: 8px 0; }
.legal-body { max-width: 820px; margin: 0 auto; }
.legal-section { padding: 26px 0; border-bottom: 1px solid var(--border); }
.legal-section:first-child { padding-top: 0; }
.legal-section:last-child { border-bottom: none; }
.legal-section h2 { font-size: 18px; margin-bottom: 12px; }
.legal-section p { font-size: 14.5px; line-height: 1.75; color: var(--charcoal-deep); margin: 0 0 14px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-table { width: 100%; border-collapse: collapse; margin: 4px 0 14px; font-size: 13.5px; }
.legal-table th, .legal-table td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal-table th { color: var(--charcoal); font-weight: 600; width: 200px; }
.legal-table tr:last-child th, .legal-table tr:last-child td { border-bottom: none; }
.legal-footer-note { max-width: 820px; margin: 32px auto 0; text-align: center; font-size: 13px; color: var(--grey-mid); }

@media (max-width: 900px) {
  .site-header { padding: 18px 24px; }
  /* The nav wraps on narrow screens; the desktop 36px gap left it sprawling
     over three loose rows before any content. Tighter spacing keeps it to
     two compact rows with the button on the end. */
  .nav { gap: 14px 18px; }
  .nav a { font-size: 13.5px; }
  .btn-nav { padding: 9px 16px; }
  section, .hero, .pillar-hero, .banner-dark, .about-body, .about-hero, .faq-hero, .legal-hero { padding-left: 24px; padding-right: 24px; }
  .card-grid.cols-2, .card-grid.cols-3 { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: 36px; }
  .legal-table th { width: auto; }
}

/* Justified text needs a wide enough line to look right. On a phone the
   column is narrow enough that justification opens large gaps between words
   ("rivers"), which is harder to read — so below this width, text runs
   left-aligned and un-hyphenated instead. */
@media (max-width: 760px) {
  .site-footer { grid-template-columns: 1fr; text-align: center; gap: 18px; padding: 32px 24px 88px; }
  .site-footer > .logo { justify-self: center; }
  .footer-contact { justify-self: center; text-align: center; padding-right: 0; }
  .footer-legal { justify-self: center; }
}

@media (max-width: 700px) {
  p, blockquote {
    text-align: left;
    -webkit-hyphens: none;
    hyphens: none;
  }
}