/* ── Tokens ── */
:root {
  --color-teal:   #2d4b55;
  --color-accent: #a7c3cb;
  --color-grey:   #6b7280;
  --color-white:  #ffffff;

  --font-main: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fw-normal:   400;
  --fw-semibold: 600;

  --text-hero:    32px;
  --text-h2:      24px;
  --text-subhead: 18px;
  --text-body:    16px;
  --text-small:   14px;

  --space-section: 48px;
  --space-lg:  32px;
  --space-md:  24px;
  --space-sm:  16px;
  --space-xs:  8px;

  --max-width: 960px;
  --pad-x:     20px;
}

@media (min-width: 768px) {
  :root {
    --text-hero:     40px;
    --text-h2:       28px;
    --text-subhead:  20px;
    --text-body:     17px;
    --space-section: 80px;
    --pad-x:         40px;
  }
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  font-weight: var(--fw-normal);
  font-size:   var(--text-body);
  line-height: 1.6;
  color:       var(--color-teal);
  background:  var(--color-white);
}

/* ── Focus ── */
:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Container ── */
.container {
  max-width:     var(--max-width);
  margin:        0 auto;
  padding-left:  var(--pad-x);
  padding-right: var(--pad-x);
}

/* ── Top bar ── */
.top-bar {
  border-bottom: 1px solid var(--color-accent);
  padding: var(--space-sm) 0;
}
.top-bar .container {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}
.top-bar-logo {
  height: auto;
  width:  min(44vw, 214px);
}
@media (min-width: 768px) {
  .top-bar-logo {
    height: 56px;
    width:  auto;
  }
}
.top-bar-nav {
  display:     flex;
  align-items: center;
  gap:         12px;
}
@media (min-width: 768px) {
  .top-bar-nav {
    gap: var(--space-sm);
  }
}
.btn-contact {
  display:         inline-block;
  background:      var(--color-teal);
  color:           var(--color-white);
  text-decoration: none;
  padding:         8px 12px;
  font-size:       var(--text-small);
  font-weight:     var(--fw-semibold);
  border-radius:   2px;
  white-space:     nowrap;
}
@media (min-width: 768px) {
  .btn-contact {
    padding: var(--space-xs) var(--space-sm);
  }
}
.btn-contact:hover { opacity: 0.85; }

/* ── Language toggle ── */
.lang-toggle {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   var(--text-small);
  color:       var(--color-teal);
  white-space: nowrap;
}
.lang-active {
  font-weight: var(--fw-semibold);
}
.lang-toggle a {
  color:           var(--color-teal);
  text-decoration: none;
}
.lang-toggle a:hover,
.lang-toggle a:focus-visible { text-decoration: underline; }

/* ── Sections ── */
section { padding: var(--space-section) 0; }

h1 {
  font-size:   var(--text-hero);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  max-width:   640px;
  color:       var(--color-teal);
}

h2 {
  font-size:     var(--text-h2);
  font-weight:   var(--fw-semibold);
  color:         var(--color-teal);
  margin-bottom: var(--space-md);
  line-height:   1.3;
}

.hero { border-bottom: 1px solid var(--color-accent); }
.hero .supporting {
  font-size:   var(--text-subhead);
  color:       var(--color-grey);
  max-width:   640px;
  margin-top:  var(--space-sm);
  line-height: 1.5;
}

.contact {
  border-top: 1px solid var(--color-accent);
  text-align: center;
}

.site-footer {
  text-align:     center;
  padding-bottom: var(--space-section);
  font-size:      var(--text-small);
  color:          var(--color-grey);
}

/* ── Photo rows ── */
.photo-row {
  padding: var(--space-sm) 0;
}

.photo-grid {
  display:    grid;
  gap:        16px;
  list-style: none;
}

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

.photo-grid img {
  width:        100%;
  height:       auto;
  aspect-ratio: 288 / 113;
  object-fit:   cover;
  display:      block;
}

/* ── Announcement ── */
.announcement .sub-headline {
  font-size:     var(--text-subhead);
  color:         var(--color-grey);
  line-height:   1.5;
  margin-bottom: var(--space-md);
}

.announcement p {
  margin-bottom: var(--space-sm);
}

/* ── Pull-quote ── */
.pull-quote {
  border-left:   4px solid var(--color-accent);
  padding-left:  var(--space-md);
  margin-top:    calc(var(--space-section) + var(--space-sm));
  margin-bottom: var(--space-lg);
  font-style:    italic;
  font-size:     var(--text-subhead);
  line-height:   1.5;
}

@media (min-width: 768px) {
  .pull-quote { font-size: 24px; }
}

.pull-quote p {
  margin-bottom: var(--space-sm);
}

.pull-quote-attribution {
  font-style:  normal;
  font-size:   var(--text-small);
  color:       var(--color-grey);
  margin-top:  var(--space-sm);
}

.currency-note {
  font-size:  var(--text-small);
  color:      var(--color-grey);
  margin-top: var(--space-md);
}

/* ── What we back ── */
.grid-2x2 {
  display:    grid;
  gap:        var(--space-lg);
  list-style: none;
}

@media (min-width: 768px) {
  .grid-2x2 {
    grid-template-columns: 1fr 1fr;
  }
}

.grid-item {
  border-top:  1px solid var(--color-accent);
  padding-top: var(--space-sm);
  font-size:   var(--text-body);
  line-height: 1.5;
}

/* ── About ── */
.about p {
  max-width:   720px;
  line-height: 1.7;
}

/* ── Contact ── */
.contact-email {
  display:         block;
  font-size:       var(--text-body);
  color:           var(--color-teal);
  text-decoration: none;
  margin-bottom:   var(--space-xs);
}

.contact-email:hover,
.contact-email:focus-visible { text-decoration: underline; }

.contact-locations {
  font-size:     var(--text-small);
  color:         var(--color-grey);
  margin-bottom: var(--space-lg);
}

/* ── Holding page ── */
.page-holding {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
}
.holding {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-section) var(--pad-x);
}
.holding-content {
  text-align: center;
  max-width:  480px;
}
.holding-icon {
  stroke:         var(--color-accent);
  stroke-width:   2;
  stroke-linecap: round;
  margin-bottom:  var(--space-md);
}
.holding h1 {
  font-size:     var(--text-h2);
  margin-bottom: var(--space-sm);
}
.holding p {
  color:         var(--color-grey);
  margin-bottom: var(--space-md);
}
.holding-link {
  color:           var(--color-teal);
  font-size:       var(--text-small);
  font-weight:     var(--fw-semibold);
  text-decoration: none;
}
.holding-link:hover,
.holding-link:focus-visible { text-decoration: underline; }