/* ==========================================================
   Presentation Technology Ltd – site styles
   ----------------------------------------------------------
   1. Colours and settings (change the look here)
   2. Base
   3. Layout helpers
   4. Buttons
   5. Header
   6. Hero
   7. Notice bar
   8. Sections
   9. About
   10. Materials
   11. Contact
   12. Footer
   13. Accessibility
   14. Legal pages (privacy and terms)
   ========================================================== */


/* 1. Colours and settings
   ---------------------------------------------------------- */
:root {
  --black:        #111111;
  --charcoal:     #161616;
  --text:         #1C1C1C;
  --text-muted:   #444444;
  --text-label:   #6B6B6B;  /* still passes contrast on white and light grey */
  --grey-light:   #F7F7F7;
  --grey-notice:  #F3F3F3;
  --border:       #E4E4E4;
  --white:        #FFFFFF;

  --font: "Inter", Arial, Helvetica, sans-serif;

  --page-width:   1160px;
  --gutter:       24px;
  --section-gap:  104px;
}


/* 2. Base
   ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;          /* 16px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  color: inherit;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}

a {
  color: var(--black);
}

a:hover {
  color: #555555;
}


/* 3. Layout helpers
   ---------------------------------------------------------- */
.container {
  max-width: var(--page-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Three columns on desktop, stacks on smaller screens */
.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px 48px;
}


/* 4. Buttons
   ---------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.button-dark {
  background: var(--black);
  color: var(--white);
}

.button-dark:hover {
  background: #333333;
  color: var(--white);
}

.button-light {
  background: var(--white);
  color: var(--black);
  min-height: 52px;
}

.button-light:hover {
  background: #E6E6E6;
  color: var(--black);
}


/* 5. Header
   ---------------------------------------------------------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--black);
  text-decoration: none;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--black);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.brand-name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 32px;
  font-size: 0.9375rem;
}

.main-nav a:not(.button) {
  color: var(--text-muted);
  text-decoration: none;
}

.main-nav a:not(.button):hover {
  color: var(--black);
  text-decoration: underline;
}

.main-nav .button {
  min-height: 44px;
  padding: 0 22px;
  font-weight: 500;
}


/* 6. Hero
   ---------------------------------------------------------- */
.hero {
  background: var(--charcoal);
  color: var(--white);
  padding: 120px 0 112px;
}

.hero h1 {
  max-width: 820px;
  margin-bottom: 24px;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.hero-text {
  max-width: 36rem;
  margin-bottom: 40px;
  font-size: 1.1875rem;
  color: #BDBDBD;
}


/* 7. Notice bar
   ---------------------------------------------------------- */
.notice {
  background: var(--grey-notice);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.notice a {
  font-weight: 600;
}


/* 8. Sections
   ---------------------------------------------------------- */
.section {
  padding: var(--section-gap) 0;
}

.section-grey {
  background: var(--grey-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Small grey label in capitals above each heading */
.eyebrow {
  margin-bottom: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-label);
}

.eyebrow-light {
  margin-bottom: 20px;
  color: #9E9E9E;
}

.section h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
}

.section-title {
  margin-bottom: 48px;
}


/* 9. About
   ---------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px 80px;
}

.about-text {
  align-self: end;
  font-size: 1.125rem;
  color: var(--text-muted);
}


/* 10. Materials
   ---------------------------------------------------------- */
.range {
  border-top: 2px solid var(--black);
  padding-top: 24px;
}

.range h3 {
  margin-bottom: 16px;
  font-size: 1.125rem;
  font-weight: 600;
}

.range ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.range li {
  padding: 10px 0;
  border-bottom: 1px solid #E0E0E0;
}


/* 11. Contact
   ---------------------------------------------------------- */
.contact-card {
  border: 1px solid var(--border);
  padding: 28px;
}

.contact-label {
  margin-bottom: 8px;
  font-size: 0.875rem;
  color: var(--text-label);
}

.contact-value {
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}

a.contact-value:hover {
  text-decoration: underline;
}

.contact-email {
  font-size: 1.0625rem;
  overflow-wrap: anywhere;  /* stops the long email breaking the layout on phones */
}


/* 12. Footer
   ---------------------------------------------------------- */
.site-footer {
  background: var(--black);
  color: #A8A8A8;
  font-size: 0.875rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 32px;
  padding-bottom: 32px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

.footer-nav a {
  color: #D6D6D6;
}

.footer-nav a:hover {
  color: var(--white);
}


/* 13. Accessibility
   ---------------------------------------------------------- */

/* Clear focus outline for keyboard users */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #7A7A7A;
  outline-offset: 3px;
}

/* Hidden until a keyboard user tabs to it */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--black);
  color: var(--white);
  text-decoration: none;
}

.skip-link:focus {
  top: 16px;
  color: var(--white);
}

/* Smaller spacing on phones */
@media (max-width: 640px) {
  :root {
    --section-gap: 72px;
  }

  .hero {
    padding: 80px 0 72px;
  }

  .main-nav {
    gap: 4px 20px;
  }
}

/* 14. Legal pages (privacy and terms)
   ---------------------------------------------------------- */
.page-title {
  background: var(--charcoal);
  color: var(--white);
  padding: 80px 0 72px;
}

.page-title h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
}

.page-updated {
  margin-top: 16px;
  font-size: 0.9375rem;
  color: #BDBDBD;
}

/* Keeps long policy text to a comfortable reading width */
.legal {
  max-width: 760px;
  color: var(--text-muted);
  font-size: 1.0625rem;
}

.legal h2 {
  margin: 48px 0 12px;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--black);
}

.legal h2:first-child {
  margin-top: 0;
}

.legal p {
  margin-bottom: 14px;
}

.legal ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.legal li {
  margin-bottom: 6px;
}

.footer-nav a[aria-current="page"] {
  color: var(--white);
  text-decoration: none;
}

/* Respect users who turn off animations */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button {
    transition: none;
  }
}