/* ============================================================
   HOOLA — dedicated section pages
   Nickster Pty Ltd · November 2026

   Styles for about.html, services.html and contact.html. These
   carry the homepage sections as standalone pages so each can
   hold its own title, description and schema.

   Reuses the tokens and type scale from style.css and home.css;
   adds only the inner-page header and section rhythm.
   ============================================================ */

/* ---------- Inner page header ---------- */
.page-hero {
  background: var(--black);
  color: var(--white);
  padding: calc(var(--u) * 9) calc(var(--u) * 3.9) calc(var(--u) * 4);
}
.page-hero .eb { color: rgba(255, 255, 255, .7); }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: max(52px, calc(var(--u) * 7.4));
  line-height: .875;
  margin: 0;
  text-transform: uppercase;
}
.page-hero .lead {
  margin-top: calc(var(--u) * 1.4);
  max-width: max(calc(var(--u) * 38), 340px);
  font-size: max(14px, calc(var(--u) * .95));
  line-height: 1.7;
  color: #9a9a9a;
}

@media (max-width: 900px) {
  .page-hero { padding: 120px 20px 44px; }
  .page-hero h1 { font-size: clamp(46px, 15vw, 84px); }
  .page-hero .lead { max-width: none; font-size: 15px; }
}

/* ---------- Generic section block ---------- */
.page-section {
  padding: calc(var(--u) * 4.5) calc(var(--u) * 3.9);
}
.page-section + .page-section { padding-top: 0; }
.page-section.on-black {
  background: var(--black);
  color: var(--white);
  padding-top: calc(var(--u) * 4.5);
}
.page-section.on-black .eb { color: rgba(255, 255, 255, .7); }
.page-section > h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: max(38px, calc(var(--u) * 3.6));
  line-height: .95;
  margin: 0 0 calc(var(--u) * 1.4);
  text-transform: uppercase;
}
.page-section > p {
  max-width: max(calc(var(--u) * 42), 340px);
  font-size: max(13.5px, calc(var(--u) * .9));
  line-height: 1.8;
  color: #6f6f6f;
  margin-bottom: calc(var(--u) * 1.2);
}
.page-section.on-black > p { color: #999; }

@media (max-width: 900px) {
  .page-section { padding: 48px 20px; }
  .page-section > h2 { font-size: 40px; }
  .page-section > p { max-width: none; font-size: 15px; }
}

/* ---------- Services list ---------- */
.svc-list { border-top: 1px solid var(--gray-line); }
.svc {
  display: grid;
  grid-template-columns: calc(var(--u) * 5) 1fr;
  gap: 0 calc(var(--u) * 2);
  padding: calc(var(--u) * 2.4) 0;
  border-bottom: 1px solid var(--gray-line);
}
.svc .n {
  font-family: var(--font-display);
  font-size: max(30px, calc(var(--u) * 2.6));
  line-height: 1;
  color: var(--blue);
}
.svc h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: max(30px, calc(var(--u) * 2.75));
  line-height: 1;
  letter-spacing: .06em;
  margin: 0 0 calc(var(--u) * .7);
  text-transform: uppercase;
}
.svc p {
  font-size: max(13.5px, calc(var(--u) * .82));
  line-height: 1.7;
  color: #6f6f6f;
  max-width: max(calc(var(--u) * 38), 300px);
  margin: 0;
}
.svc .tags { margin-top: calc(var(--u) * .9); }
.svc .tag {
  border-color: var(--gray-line);
  color: #555;
}

@media (max-width: 900px) {
  .svc { grid-template-columns: 44px 1fr; padding: 26px 0; }
  .svc h2 { font-size: 32px; }
  .svc p { max-width: none; font-size: 14.5px; }
}

/* ---------- Contact block ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: calc(var(--u) * 2.4);
  border-top: 1px solid var(--gray-line);
  padding-top: calc(var(--u) * 2.4);
}
.contact-grid .k {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-bottom: 10px;
}
.contact-grid .v {
  font-size: max(14px, calc(var(--u) * .9));
  line-height: 1.7;
  color: var(--black);
}
.contact-grid .v a:hover { color: var(--blue); }


/* ---------- Long-form policy pages ---------- */
.policy {
  padding: calc(var(--u) * 4) calc(var(--u) * 3.9) calc(var(--u) * 6);
  max-width: calc(var(--u) * 52 + 40px);
}
.policy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: max(32px, calc(var(--u) * 3.2));
  line-height: 1;
  text-transform: uppercase;
  margin: calc(var(--u) * 3.6) 0 calc(var(--u) * 1.2);
  padding-top: calc(var(--u) * 1.6);
  border-top: 1px solid var(--gray-line);
}
.policy h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.policy h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: max(15px, calc(var(--u) * 1.02));
  line-height: 1.4;
  color: var(--black);
  margin: calc(var(--u) * 2) 0 calc(var(--u) * .7);
}
.policy p {
  font-size: max(13.5px, calc(var(--u) * .86));
  line-height: 1.85;
  color: #5e5e5e;
  margin-bottom: calc(var(--u) * 1);
}
.policy ul { margin: 0 0 calc(var(--u) * 1); padding: 0; list-style: none; }
.policy li {
  position: relative;
  padding-left: 22px;
  font-size: max(13.5px, calc(var(--u) * .86));
  line-height: 1.85;
  color: #5e5e5e;
  margin-bottom: calc(var(--u) * .5);
}
.policy li::before {
  content: '';
  position: absolute;
  left: 2px; top: calc(.9em - 2px);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
}
.policy li ul { margin: calc(var(--u) * .5) 0 0; }
.policy li li::before {
  width: 6px; height: 1px;
  border-radius: 0;
  background: var(--gray-mid);
  top: .95em;
}
.policy address {
  font-style: normal;
  font-size: max(13.5px, calc(var(--u) * .86));
  line-height: 1.8;
  color: #5e5e5e;
  margin-bottom: calc(var(--u) * 1);
}
.policy a { color: var(--blue); }
.policy a:hover { text-decoration: underline; }
.policy .effective {
  margin-top: calc(var(--u) * 2.4);
  padding-top: calc(var(--u) * 1.2);
  border-top: 1px solid var(--gray-line);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--gray-mid);
}

@media (max-width: 900px) {
  .policy { padding: 40px 20px 56px; }
  .policy h2 { font-size: 34px; }
  .policy p, .policy li, .policy address { font-size: 15px; }
}

/* The contact block's address links to the contact page. Inherits its
   colour so the line looks exactly as supplied. */
.contact .details a { color: inherit; }
.contact .details a:hover { color: var(--blue); }

/* ---------- Client logo grid ----------
   Three logos are wrapped in a link to their case study. The anchor has
   to fill the cell: as an inline box it shrinks to fit, and because the
   logo is sized with a percentage width that percentage then resolves
   against the wrong box, leaving those logos smaller and off the
   baseline the rest of the row sits on. */
.logo-cell a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}