/* Values measured from the original Squarespace site (domaincentric.net, Sep 2026). */
:root {
  --text: #263333;
  --text-body: #111111;
  --heading: rgba(38, 51, 51, 0.9);
  --heading-muted: rgba(38, 51, 51, 0.75);
  --link: #aeb82e;
  --rule: #303d50;
  --page-bg: #eff2f6;
  --panel-bg: #ffffff;
  --accent: #000000;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--text);
  background: var(--page-bg);
  line-height: 1.6;
}

strong, b { font-weight: 700; }

.site-content li { margin: 0.45em 0; }

p { color: var(--text-body); }

a {
  color: var(--link);
  text-decoration: none;
}

a:hover { opacity: 0.7; }

h1, h2, h3, h4 {
  font-weight: 300;
  letter-spacing: 1px;
  color: var(--heading);
}

h1 { font-size: 3rem; line-height: 1.2; margin: 0 0 1.5rem; }
h2 { font-size: 1.8rem; line-height: 1.3; margin: 2rem 0 0.5rem; }
h3 { font-size: 1.7rem; line-height: 1.5; margin: 1.7rem 0 0.5rem; color: var(--heading-muted); }
h4 { font-size: 1.2rem; line-height: 1.5; }

h1 a, h2 a, h3 a { color: inherit; }

/* White panel on a grey page, 60px inner padding: 1120px panel, 1000px content. */
.site-frame {
  max-width: 1120px;
  margin: 0 auto;
  padding: 60px;
  background: var(--panel-bg);
  min-height: 100vh;
}

.site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 85px;
  border-bottom: 1px solid var(--rule);
}

.site-logo img { height: 30px; display: block; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem 30px;
}

.site-nav a {
  color: var(--text);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.2;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover { opacity: 1; border-bottom-color: currentColor; }

/* Dropdowns under Trainings and Consultancy, as on the old site. */
.nav-item { position: relative; line-height: 1.2; }

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: -14px;
  margin-top: 6px;
  padding: 6px 0;
  background: var(--panel-bg);
  border: 1px solid var(--rule);
  white-space: nowrap;
  z-index: 10;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown { display: block; }

/* Hover bridge so the menu stays open while the pointer moves down to it. */
.nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }

.site-nav .nav-dropdown a {
  display: block;
  padding: 6px 12px;
  border-bottom: 0;
  text-align: left;
}

.site-nav .nav-dropdown a:hover { opacity: 0.7; }
.site-nav a.active { border-bottom-color: currentColor; }

.site-content { padding: 40px 0; overflow-wrap: break-word; }

/* Squarespace "primary" button as the old site rendered it: plain letter-spaced caps. */
.button {
  display: inline-block;
  padding: 21px 34px;
  color: var(--text);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
}

.site-footer {
  display: flex;
  justify-content: center;
  gap: 34px;
  padding-top: 80px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.6;
}

.site-footer p { margin: 0; color: var(--text); }

.footer-company { text-align: right; }

@media (max-width: 768px) {
  .site-frame { padding: 24px 16px; }
  .site-header { flex-direction: column; gap: 1.5rem; padding-bottom: 24px; }
  .site-nav { justify-content: flex-start; gap: 0.75rem 20px; }
  .nav-dropdown { display: none !important; }
  h1 { font-size: 2.25rem; }
  .site-footer { flex-direction: column; gap: 1rem; padding-top: 32px; text-align: center; }
  .footer-company { text-align: center; }
}


.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.team figure { margin: 0; }
.team img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

.team figcaption {
  margin-top: 20px;
  font-size: 12px;
  color: var(--text);
}

/* Clients: three large logos, then four. */
.clients-list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px 29px;
}

.client { grid-column: span 3; }
.client:nth-child(-n + 3) { grid-column: span 4; }

.client img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.client h2 {
  margin: 18px 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--text);
}

.client p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text); }

@media (max-width: 768px) {
  .team { grid-template-columns: 1fr; }
  .client, .client:nth-child(-n + 3) { grid-column: span 6; }
}


.site-content img {
  max-width: 100%;
  height: auto;
}

.site-content iframe {
  max-width: 100%;
}

.site-content pre {
  overflow-x: auto;
}

figure {
  margin: 1.5rem 0;
}

figcaption {
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.5rem;
}

/* Homepage: measured from the original Squarespace homepage at 1440px. */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 34px 0;
}

.home-hero {
  position: relative;
  min-height: 467px;
}

.home-hero-image {
  display: block;
  width: 70%;
  height: 467px;
  margin-left: auto;
  object-fit: cover;
}

.home-hero-card {
  position: absolute;
  top: 50px;
  left: 0;
  width: 45%;
  margin: 0;
  padding: 50px;
  background: #303d50;
}

.home-hero-card p {
  margin: 0;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 35px;
  font-weight: 700;
  line-height: 1.2;
}

.home-hero-card cite {
  display: block;
  margin-top: 16px;
  color: #9b9b9b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15.4px;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.home-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
}

.home-intro h1 { margin: 0; line-height: 1.3; }
.home-intro p { margin-top: 0; color: var(--text); }

.home-links {
  display: flex;
  justify-content: space-around;
  margin: 0;
}


.blog-teaser h2 { margin: 0 0 32px; line-height: 1; }

.blog-teaser-item {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
  margin-bottom: 60px;
}

.blog-teaser-item img {
  display: block;
  width: 250px;
  height: 167px;
  object-fit: cover;
}

.blog-teaser-item h3 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--text);
}

.blog-teaser-item p,
.blog-teaser-excerpt p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
}

.blog-teaser-item .blog-teaser-date {
  font-size: 13px;
  color: rgba(38, 51, 51, 0.7);
}

@media (max-width: 768px) {
  .home-hero { min-height: 0; }
  .home-hero-image { width: 100%; height: 240px; }
  .home-hero-card { position: static; width: auto; padding: 28px; }
  .home-hero-card p { font-size: 24px; }
  .home-intro { grid-template-columns: 1fr; gap: 16px; }
  .home-links { justify-content: flex-start; }
  .home-links .button { padding: 12px 24px 12px 0; }
  .blog-teaser-item { grid-template-columns: 1fr; }
  .blog-teaser-item img { width: 100%; height: auto; }
}

/* Course pages: square image left, text right (old Squarespace course layout). */
.course {
  display: grid;
  grid-template-columns: 413px 1fr;
  gap: 29px;
  align-items: start;
}

.course-text-only { grid-template-columns: 1fr; }

.course-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: left center;
}

.course-body h1 {
  font-size: 27px;
  line-height: 1.1;
  margin: 8px 0 24px;
}

.course-meta { font-style: italic; }

.course-cta { text-align: center; margin-top: 2rem; }

@media (max-width: 768px) {
  .course { grid-template-columns: 1fr; }
  .course-body h1 { font-size: 24px; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Image tiles with a small caption: /trainings grid (old Squarespace index page). */
.tile-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 43px;
}

.tile-grid a { display: block; color: var(--text); text-align: center; }

.tile-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: left center;
  margin-bottom: 16px;
}

.tile-grid span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .tile-grid { grid-template-columns: 1fr; }
}

/* Event pages: title and time in a narrow left column, description on the right. */
.back-link {
  margin: 0 0 40px;
  font-size: 14px;
  text-transform: uppercase;
}

.event {
  display: grid;
  grid-template-columns: 257px 1fr;
  gap: 29px;
  align-items: start;
}

.event-header h1 {
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 32px;
}

.event-when { font-size: 13px; color: var(--text); }

.event-body > :first-child { margin-top: 0; }

.event-pager {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin: 100px 0 20px;
}

.event-pager > div:last-child { text-align: right; }

@media (max-width: 768px) {
  .event { grid-template-columns: 1fr; gap: 0; }
  .event-pager { flex-direction: column; gap: 1rem; margin-top: 40px; }
  .event-pager > div:last-child { text-align: left; }
}

.events-rule { margin-top: 20px; }

.archive-columns {
  columns: 4;
  column-gap: 43px;
}

.archive-columns section { break-inside: avoid; margin-bottom: 40px; }

.archive-columns h2 {
  margin: 0 0 18px;
  font-size: 20px;
  letter-spacing: normal;
  color: var(--link);
}

.archive-columns ul { list-style: none; margin: 0; padding: 0; }

.archive-columns li {
  margin-bottom: 10px;
  font-size: 14.5px;
  line-height: 1.35;
}

.archive-columns a { color: var(--text); }

@media (max-width: 768px) {
  .archive-columns { columns: 2; column-gap: 24px; }
}

/* Blog: centred post headers, summaries separated by rules, year archive. */
.post-header { text-align: center; margin-bottom: 2rem; }

.post-header h1,
.post-header h2 {
  font-size: 27px;
  text-transform: capitalize;
  line-height: 1.3;
  margin: 0 0 8px;
}

.post-header h2 a { color: var(--heading); }

.post-meta {
  margin: 0;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 2px;
  color: rgba(38, 51, 51, 0.75);
}

.post-summary {
  padding-bottom: 20px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}

.post-tags { text-align: center; color: var(--text); margin-top: 2rem; }
.post-tags a { color: var(--text); }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.pager > div:last-child { text-align: right; }

.post-pager {
  margin-top: 40px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.archive-columns h2 a { color: inherit; }

@media (max-width: 768px) {
  .pager { flex-direction: column; gap: 0.5rem; }
  .pager > div:last-child { text-align: left; }
}

.blog-archive h2 { font-size: 20px; }
.blog-archive li { font-size: 15px; }

/* Centred page title with a subtitle (consultancy pages). */
.page-intro { text-align: center; margin-bottom: 60px; }
.page-intro h1 { margin-bottom: 40px; }

.subtitle {
  font-size: 27px;
  letter-spacing: 1px;
  color: var(--heading-muted);
  margin: 0;
}

.page-intro-ruled {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}

/* Large centred statement (about, thank-you). */
.statement {
  font-size: 27px;
  line-height: 1.5;
  letter-spacing: 1px;
  text-align: center;
  color: var(--heading-muted);
  margin: 0;
}

/* Image beside text, alternating sides, rows split by rules. */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: start;
  padding: 34px 0;
  border-bottom: 1px solid var(--rule);
}

.feature:last-of-type { border-bottom: 0; }
.feature-reverse img { order: 2; }

.feature img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.feature h2 { margin: 0 0 12px; font-size: 32px; }
.feature h2 a { color: var(--link); }
.feature p { margin: 0; color: var(--text); }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: start;
}

.two-col > p { margin-top: 0; }

.pull-quote {
  margin: 0;
  padding-left: 16px;
  border-left: 1px solid var(--text);
}

.pull-quote p { margin: 0; color: var(--text); }

.pull-quote cite {
  display: block;
  text-align: right;
  font-style: normal;
  margin-right: -0px;
}

.cta-line { text-align: center; margin: 40px 0; }
.cta-line .button,
.course-cta .button { font-size: 18px; }

.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin-top: 40px;
}

.photo-strip img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Contact */
.contact-name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 0 16px;
}

.contact p { color: var(--text); }
.contact img { width: 100%; margin-top: 10px; }
.contact-button { padding-left: 0; padding-right: 0; }

/* Training materials shop */
.product-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}

.product-grid a { display: block; text-align: center; }
.product-image { position: relative; display: block; margin-bottom: 20px; }
.product-image img { display: block; width: 100%; }
.product-title { display: block; }
.product-price { display: block; font-size: 12px; }

.badge {
  display: inline-block;
  padding: 4px 8px;
  background: #222;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
}

.product-image .badge { position: absolute; top: 8px; right: -12px; }

.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 29px;
  align-items: start;
}

.product img { width: 100%; }
.product .badge { float: right; }
.product-button { padding-left: 0; padding-right: 0; }

@media (max-width: 768px) {
  .feature, .two-col, .product { grid-template-columns: 1fr; }
  .feature-reverse img { order: 0; }
  .photo-strip { grid-template-columns: 1fr; gap: 16px; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .statement, .subtitle { font-size: 21px; }
}

.comments { margin-top: 60px; }