/* COUNTRY WEBSITE STYLES
 * Typography comes from avenir-fonts.css.
 * Shared layout sections: header, hero, services, industry guidance, API scope,
 * comparison, process, reporting, buyer guides, FAQs, quotation and footer.
 * Media queries keep the same content readable on smaller screens.
 */
:root {
  --green:#0a6247;
  --gold:#f4ce4a;
  --ink:#10251e;
  --muted:#596b63;
  --blue:#145adb;
  --pink:#e92d80;
  --paper:#f6f7f2
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}

body {
  margin:0;
  font-family:Avenir,Arial,sans-serif;
  color:var(--ink);
  font-size:17px;
  line-height:1.65
}

a {
  color:inherit;
  text-decoration:none
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea {
  outline-offset:5px
}

button {
  cursor:pointer
}

p {
  margin:0 0 22px
}

h1,h2,h3 {
  line-height:1.12;
  letter-spacing:-.045em;
  margin:0 0 24px
}

h1 {
  font-size:clamp(44px,4.35vw,69px);
  font-weight:700
}

h2 {
  font-size:clamp(34px,3.2vw,49px)
}

h3 {
  font-size:26px
}

.wrap {
  max-width:1280px;
  margin:auto;
  padding-left:48px;
  padding-right:48px
}

header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:20px 40px;
  background:#fff;
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid #e4e8e3
}

.brand {
  display:flex;
  align-items:center;
  gap:19px;
  line-height:1.2;
  font-weight:700;
  font-size:21px;
  flex-shrink:0
}

.brand img {
  width:99px;
  height:auto
}

.pipe {
  height:37px;
  width:1px;
  background:#9da8a0
}

.brand-country {
  display:block;
  font-size:13px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--green);
  margin-top:3px
}

nav {
  display:flex;
  gap:25px;
  font-size:14px
}

nav a:hover,.textlink:hover {
  color:var(--green);
  text-decoration:underline
}

.btn {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  background:var(--blue);
  color:#fff;
  border:0;
  padding:16px 24px;
  font-size:15px;
  font-weight:700;
  transition:background .2s
}

.btn:hover {
  background:var(--pink)
}

.small {
  font-size:13px;
  padding:13px 18px
}

.cta-menu {
  position:relative
}

.cta-options {
  display:none;
  position:absolute;
  top:100%;
  right:0;
  background:white;
  padding:12px;
  box-shadow:0 10px 40px #0002;
  width:235px
}

.cta-options a {
  display:block;
  padding:10px;
  font-size:14px
}

.cta-menu:hover .cta-options,.cta-menu:focus-within .cta-options {
  display:block
}

.menu {
  display:none
}

.skip {
  position:fixed;
  top:-100px;
  left:20px;
  background:white;
  z-index:50;
  padding:10px
}

.skip:focus {
  top:10px
}

.hero {
  background:#092d23;
  color:#fff;
  overflow:hidden
}

.hero-grid {
  display:grid;
  grid-template-columns:1.12fr 1fr;
  align-items:center;
  gap:40px;
  padding-top:78px;
  padding-bottom:65px
}

.eyebrow {
  font-size:11px;
  letter-spacing:.16em;
  font-weight:700;
  margin-bottom:26px
}

.dot {
  width:7px;
  height:7px;
  background:var(--gold);
  display:inline-block;
  border-radius:50%;
  margin-right:8px
}

h1 em {
  font-style:normal;
  color:var(--gold)
}

.hero-copy {
  color:#c5d4cc;
  max-width:490px;
  font-size:18px
}

.actions {
  display:flex;
  gap:28px;
  align-items:center;
  margin-top:32px
}

.quiet {
  font-size:14px;
  border-bottom:1px solid #8aa194;
  padding-bottom:4px
}

.hero-note {
  font-size:12px;
  color:#a4bdb1;
  margin-top:26px
}

.hero-bottom {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #ffffff25;
  padding-top:20px;
  padding-bottom:20px;
  font-size:11px;
  letter-spacing:.04em;
  color:#bcd0c3
}

.visual {
  height:430px;
  position:relative;
  background:radial-gradient(ellipse at center,#1c634541,#102f22 75%);
  border:1px solid #46765855;
  background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);
  background-size:28px 28px
}

.visual-label {
  position:absolute;
  top:22px;
  left:22px;
  right:22px;
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:.13em;
  color:#b9cfc0
}

.visual-label span {
  color:var(--gold)
}

.orbit {
  position:absolute;
  border:1px solid #5b95694d;
  border-radius:50%;
  left:50%;
  top:49%;
  transform:translate(-50%,-50%)
}

.o1 {
  width:225px;
  height:225px
}

.o2 {
  width:355px;
  height:355px;
  border-style:dashed
}

.core {
  position:absolute;
  left:50%;
  top:49%;
  transform:translate(-50%,-50%);
  background:#124332;
  border:1px solid #6c996d;
  border-radius:25px;
  width:116px;
  height:136px;
  display:grid;
  place-items:center;
  box-shadow:0 0 75px #91d06713;
  color:var(--gold)
}

.core svg {
  width:70px
}

.node {
  position:absolute;
  background:#12382b;
  border:1px solid #4f7157;
  width:90px;
  height:75px;
  display:grid;
  place-items:center;
  font-size:28px;
  color:#d5e4d4
}

.node small {
  font-size:7px;
  letter-spacing:.1em;
  color:#acc4af;
  position:absolute;
  bottom:-24px;
  white-space:nowrap
}

.internet {
  top:95px;
  left:25px
}

.app {
  right:23px;
  top:132px
}

.network {
  bottom:58px;
  left:74px
}

.route {
  position:absolute;
  top:151px;
  left:90px;
  width:110px;
  height:93px;
  border-top:2px solid var(--gold);
  border-right:2px solid var(--gold);
  transform:skewY(27deg);
  opacity:.7
}

.visual-caption {
  position:absolute;
  bottom:17px;
  right:18px;
  font-size:9px;
  color:#bdd1bf
}

.cross {
  position:absolute;
  width:14px;
  height:14px;
  border-top:1px solid var(--gold);
  border-left:1px solid var(--gold)
}

.x1 {
  top:48px;
  left:10px
}

.x2 {
  right:10px;
  bottom:42px;
  transform:rotate(180deg)
}

.intro {
  padding-top:90px;
  padding-bottom:50px
}

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

.large {
  font-size:24px;
  line-height:1.45;
  letter-spacing:-.02em
}

.intro p:not(.eyebrow),.local p:not(.eyebrow) {
  max-width:520px
}

.services {
  padding-top:40px;
  padding-bottom:100px
}

.section-head {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:end;
  margin-bottom:36px
}

.section-head p:not(.eyebrow) {
  color:var(--muted);
  font-size:15px
}

.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid #d6dfd7
}

.service {
  padding:32px;
  border-right:1px solid #d6dfd7;
  display:flex;
  flex-direction:column
}

.service:last-child {
  border:0
}

.num {
  color:var(--green);
  font-size:11px;
  letter-spacing:.1em;
  font-weight:700;
  display:block;
  margin-bottom:32px
}

.service h3 {
  max-width:250px;
  font-size:28px
}

.service p {
  font-size:15px;
  color:var(--muted)
}

.service p.lead {
  color:var(--ink);
  font-size:17px
}

.textlink {
  font-size:14px;
  font-weight:700;
  background:none;
  border:0;
  padding:0;
  text-align:left
}

.service .textlink {
  margin-top:auto;
  padding-top:20px
}

.scope {
  background:var(--paper);
  padding:80px 0
}

.scope-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:110px;
  align-items:center
}

.selector {
  margin-top:30px
}

.selector button {
  display:flex;
  justify-content:space-between;
  width:100%;
  background:none;
  border:0;
  border-bottom:1px solid #d4ded3;
  padding:17px 0;
  text-align:left;
  font-size:15px
}

.selector button.active {
  color:var(--green);
  font-weight:700;
  border-color:var(--green)
}

.recommendation {
  background:#e4ebdd;
  padding:43px;
  border-top:4px solid var(--green)
}

.recommendation h3 {
  font-size:32px
}

.fine {
  font-size:12px!important;
  line-height:1.6;
  opacity:.8
}

.process {
  padding-top:100px;
  padding-bottom:85px
}

.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:35px
}

.steps article {
  border-top:1px solid #cdd8ce;
  padding-top:24px
}

.steps span {
  font-size:12px;
  color:var(--green)
}

.steps h3 {
  font-size:21px;
  margin-top:28px
}

.steps p {
  font-size:14px;
  color:var(--muted)
}

.guard {
  margin-top:35px;
  background:var(--paper);
  padding:22px;
  display:flex;
  gap:28px;
  font-size:13px
}

.guard strong {
  white-space:nowrap
}

.reports {
  background:#0a2d23;
  color:#fff;
  padding:90px 0
}

.report-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center
}

.reports p {
  color:#c0d3c4
}

.report-preview {
  background:#1c4535;
  padding:32px 38px
}

.paper {
  background:#f7f6ed;
  color:var(--ink);
  padding:30px;
  transform:rotate(-3deg);
  box-shadow:10px 15px 0 #0002
}

.paper-top {
  font-size:8px;
  letter-spacing:.05em;
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #c6cbbd;
  padding-bottom:17px
}

.paper-top span {
  color:#667363
}

.paper h3 {
  font-size:35px;
  margin:32px 0
}

.report-row {
  display:flex;
  gap:18px;
  align-items:center;
  border-top:1px solid #cdd1c4;
  padding:16px 0;
  font-size:13px
}

.report-row b {
  color:var(--green);
  font-size:10px
}

.report-row small {
  display:block;
  color:#6a796c;
  font-size:10px
}

.paper-bottom {
  font-size:8px;
  margin-top:22px;
  letter-spacing:.15em
}

.checks {
  padding:0;
  list-style:none;
  margin:28px 0
}

.checks li {
  border-bottom:1px solid #ffffff20;
  padding:10px 0;
  font-size:14px
}

.checks li:before {
  content:'✓';
  color:var(--gold);
  margin-right:14px
}

.reports .textlink {
  color:var(--gold)
}

.local {
  padding-top:95px;
  padding-bottom:75px
}

.faq {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  padding-top:30px;
  padding-bottom:100px
}

details {
  border-bottom:1px solid #d7dfd5
}

summary {
  list-style:none;
  cursor:pointer;
  font-size:16px;
  font-weight:700;
  padding:20px 0;
  display:flex;
  justify-content:space-between;
  gap:20px
}

summary::-webkit-details-marker {
  display:none
}

details p {
  font-size:14px;
  color:var(--muted);
  max-width:550px
}

details[open] summary span {
  transform:rotate(45deg)
}

.quote {
  background:#eaf0e3;
  padding:85px 0
}

.quote-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:90px
}

.quote h2 {
  font-size:50px
}

.quote p {
  max-width:375px
}

.quote form {
  background:#fff;
  padding:32px
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}

label {
  display:block;
  font-size:12px;
  font-weight:700;
  margin-bottom:18px
}

input,select,textarea {
  display:block;
  width:100%;
  border:1px solid #c6d2c6;
  border-radius:0;
  background:#fff;
  padding:11px;
  margin-top:6px;
  font-size:14px;
  color:var(--ink)
}

textarea {
  resize:vertical
}

.quote form p {
  max-width:none
}

.quote form .fine a {
  text-decoration:underline
}

#form-status {
  margin:12px 0 0;
  font-size:13px
}

footer {
  display:grid;
  grid-template-columns:1.2fr .65fr 1fr;
  gap:38px;
  padding-top:50px;
  padding-bottom:30px
}

footer .brand {
  font-size:16px
}

footer .brand img {
  width:75px
}

footer a:not(.brand) {
  display:block;
  font-size:13px;
  margin-bottom:10px
}

footer p {
  font-size:12px;
  color:var(--muted);
  margin-top:15px
}

footer small {
  grid-column:1/-1;
  border-top:1px solid #d4ded3;
  padding-top:20px;
  font-size:11px;
  color:var(--muted)
}

@media(min-width:1450px) {
  .hero-grid {
    padding-top:100px;
    padding-bottom:85px
  }

}

@media(max-width:1100px) {
  header {
    padding:16px 24px;
    gap:15px
  }

  nav {
    gap:15px;
    font-size:12px
  }

  .brand {
    font-size:18px;
    gap:12px
  }

  .brand img {
    width:80px
  }

  .small {
    font-size:11px;
    padding:12px
  }

  .wrap {
    padding-left:30px;
    padding-right:30px
  }

  .hero-grid {
    gap:25px
  }

  .visual {
    height:400px
  }

  .o2 {
    width:280px;
    height:280px
  }

  .scope-grid,.report-grid,.quote-grid {
    gap:50px
  }

}

@media(max-width:800px) {
  header {
    flex-wrap:wrap
  }

  .menu {
    display:block;
    background:none;
    border:0;
    font-size:24px;
    margin-left:auto
  }

  .cta-menu {
    display:none
  }

  nav {
    display:none;
    width:100%;
    flex-direction:column;
    gap:0
  }

  nav.open {
    display:flex
  }

  nav a {
    padding:12px;
    font-size:16px
  }

  .wrap {
    padding-left:24px;
    padding-right:24px
  }

  .hero-grid {
    grid-template-columns:1fr;
    padding-top:50px;
    padding-bottom:40px;
    gap:35px
  }

  h1 {
    font-size:48px
  }

  .hero-copy {
    font-size:17px
  }

  .visual {
    max-width:520px;
    width:100%;
    height:370px
  }

  .hero-bottom {
    flex-wrap:wrap;
    gap:12px
  }

  .hero-bottom span:last-child {
    display:none
  }

  .intro-grid,.scope-grid,.report-grid,.quote-grid,.faq {
    grid-template-columns:1fr;
    gap:30px
  }

  .intro,.local {
    padding-top:60px;
    padding-bottom:35px
  }

  .section-head {
    display:block
  }

  .section-head p:not(.eyebrow) {
    margin-top:20px
  }

  .cards {
    grid-template-columns:1fr
  }

  .service {
    border-right:0;
    border-bottom:1px solid #d6dfd7
  }

  .service h3 {
    max-width:none
  }

  .num {
    margin-bottom:20px
  }

  .services {
    padding-bottom:55px
  }

  .scope,.reports,.quote {
    padding:55px 0
  }

  .steps {
    grid-template-columns:1fr 1fr;
    gap:25px
  }

  .process {
    padding-top:60px;
    padding-bottom:55px
  }

  .guard {
    display:block
  }

  .guard strong {
    display:block;
    margin-bottom:10px
  }

  .report-grid {
    gap:50px
  }

  .report-preview {
    max-width:450px
  }

  .faq {
    padding-bottom:60px
  }

  .quote h2 {
    font-size:42px
  }

  footer {
    grid-template-columns:1fr 1fr
  }

  footer>div:first-child {
    grid-column:1/-1
  }

}

@media(max-width:440px) {
  h1 {
    font-size:40px
  }

  .actions {
    gap:18px;
    align-items:start;
    flex-direction:column
  }

  .visual {
    height:340px
  }

  .node {
    width:65px;
    height:65px
  }

  .core {
    width:95px;
    height:115px
  }

  .o2 {
    width:260px;
    height:260px
  }

  .app {
    right:14px
  }

  .internet {
    left:14px
  }

  .form-row {
    grid-template-columns:1fr;
    gap:0
  }

  .quote form {
    padding:22px
  }

  .paper {
    padding:20px
  }

  .report-preview {
    padding:25px
  }

  .steps {
    grid-template-columns:1fr
  }

  .hero-bottom {
    font-size:10px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  * {
    transition:none!important
  }

}

.enquiry {
  background:#fff;
  padding:16px
}

.enquiry iframe {
  width:100%;
  height:760px;
  border:0;
  background:#fff
}

.enquiry a {
  text-decoration:underline
}

/* Country themes and reusable buyer guidance */
:root {
  --local-light:#edf2eb
}

.addition {
  padding:78px 0
}

.addition:nth-of-type(even) {
  background:var(--paper)
}

.addition h2 {
  max-width:850px
}

.addition .section-copy {
  max-width:780px;
  color:var(--muted)
}

.industry-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:35px
}

.industry-grid article,.api-grid article {
  border:1px solid #d4ddd3;
  padding:27px;
  background:#fff
}

.industry-grid h3 {
  font-size:24px
}

.industry-grid p,.industry-grid li,.api-grid p {
  font-size:15px
}

.industry-grid ul {
  padding-left:19px
}

.industry-grid .tag {
  color:var(--green);
  font-size:10px;
  letter-spacing:.1em;
  font-weight:700
}

.local-context {
  padding:22px 25px;
  border-left:3px solid var(--green);
  background:var(--local-light);
  margin:32px 0;
  font-size:16px
}

.api-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}

.api-grid h3 {
  font-size:23px
}

.scope-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 40px;
  margin:30px 0
}

.scope-list div {
  border-top:1px solid #d3ded2;
  padding-top:18px
}

.scope-list h3 {
  font-size:20px
}

.scope-list p {
  font-size:15px;
  color:var(--muted)
}

.table-wrap {
  overflow-x:auto;
  margin:30px 0
}

table {
  width:100%;
  border-collapse:collapse;
  min-width:620px;
  font-size:15px
}

th,td {
  text-align:left;
  vertical-align:top;
  padding:18px;
  border:1px solid #d3ddd1
}

thead {
  background:var(--green);
  color:white
}

tbody th {
  width:20%
}

.dark-add {
  background:var(--ink)!important;
  color:white
}

.dark-add .section-copy {
  color:#ced9d0
}

.price-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px
}

.price-grid ol {
  padding-left:24px
}

.price-grid li {
  padding:9px 0;
  font-size:15px
}

.price-grid h3 {
  font-size:24px
}

.price-grid p {
  font-size:15px;
  color:#d1dbd2
}

.article-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:35px
}

.article-card {
  display:flex;
  flex-direction:column;
  border-top:2px solid var(--green);
  padding:24px;
  background:var(--paper)
}

.article-card h3 {
  font-size:24px
}

.article-card p {
  font-size:14px;
  color:var(--muted)
}

.article-card a {
  margin-top:auto
}

.country-chooser {
  position:relative;
  font-size:12px;
  flex-shrink:0
}

.country-chooser>summary {
  font-size:12px;
  padding:10px 0
}

.country-panel {
  position:absolute;
  right:0;
  top:48px;
  width:340px;
  padding:20px;
  background:white;
  color:var(--ink);
  box-shadow:0 12px 40px #0002;
  border:1px solid #d3ddd2;
  z-index:30
}

.country-panel input {
  font-size:14px
}

.country-links {
  max-height:330px;
  overflow-y:auto;
  margin-top:12px
}

.country-links a {
  display:block;
  padding:8px 6px;
  font-size:13px
}

.country-links a[aria-current=page] {
  background:var(--paper);
  font-weight:700
}

.country-links a:hover {
  color:var(--green);
  text-decoration:underline
}

.country-empty {
  font-size:13px;
  margin:10px 0
}

.country-panel .fine {
  margin:8px 0 0
}

.country-directory {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}

.country-directory a {
  border-bottom:1px solid #d2ddd0;
  padding:16px
}

.article-main {
  max-width:850px;
  margin:auto;
  padding:45px 30px 85px
}

.article-main h1 {
  font-size:52px;
  margin-top:35px
}

.article-main h2 {
  font-size:29px;
  letter-spacing:-.025em;
  margin-top:40px
}

.article-main p {
  font-size:18px
}

.breadcrumbs {
  font-size:13px;
  color:var(--muted)
}

.breadcrumbs a {
  text-decoration:underline
}

.article-callout {
  padding:28px;
  background:var(--paper);
  margin-top:40px
}

.article-callout h2 {
  margin-top:0
}

.article-callout p {
  font-size:16px
}

header nav {
  gap:17px
}

header {
  gap:20px
}

.brand {
  max-width:350px
}

.brand-country {
  max-width:235px;
  font-size:11px;
  line-height:1.3
}

footer .brand {
  max-width:none
}

.enquiry {
  background:#fff;
  padding:16px
}

.enquiry iframe {
  width:100%;
  height:760px;
  border:0;
  background:#fff
}

.enquiry a {
  text-decoration:underline
}

.brand>span:last-child {
  max-width:270px
}

footer .brand>span:last-child {
  font-size:14px
}

@media(min-width:1250px) {
  header {
    padding-left:25px;
    padding-right:25px
  }

  header .brand img {
    width:85px
  }

  header .small {
    padding:13px;
    font-size:12px
  }

}

@media(max-width:1249px) {
  header nav {
    gap:12px;
    font-size:12px
  }

  header {
    gap:15px
  }

  header .cta-menu {
    display:none
  }

  header .brand {
    max-width:360px
  }

  .country-chooser {
    margin-left:auto
  }

}

@media(max-width:800px) {
  .industry-grid,.api-grid,.price-grid,.scope-list,.article-cards {
    grid-template-columns:1fr;
    gap:22px
  }

  .addition {
    padding:55px 0
  }

  .country-chooser {
    margin-left:0
  }

  .country-chooser>summary {
    font-size:11px
  }

  .country-panel {
    position:fixed;
    top:100px;
    left:18px;
    right:18px;
    width:auto
  }

  .country-directory {
    grid-template-columns:1fr 1fr
  }

  .article-main h1 {
    font-size:39px
  }

  .brand-country {
    max-width:185px;
    font-size:10px
  }

  header {
    gap:10px
  }

  .menu {
    order:2;
    margin-left:auto
  }

  header nav {
    order:4
  }

  .country-chooser {
    order:3
  }

  .country-chooser>summary {
    padding:8px
  }

  .price-grid {
    gap:30px
  }

  .article-main p {
    font-size:17px
  }

}

@media(max-width:420px) {
  header .brand img {
    width:64px
  }

  header .brand {
    gap:10px;
    font-size:16px
  }

  header {
    padding:12px 16px
  }

  .brand-country {
    max-width:175px
  }

  .country-chooser {
    width:100%
  }

  .country-chooser>summary {
    justify-content:flex-start;
    gap:9px
  }

  .country-directory {
    grid-template-columns:1fr
  }

  .country-panel {
    top:130px
  }

}

:root {
  --green:#1c4e8f;
  --gold:#e8c768;
  --ink:#102b45;
  --local-light:#1c4e8f10
}

.hero,.reports {
  background:#102b45
}

.hero h1 em {
  color:#e8c768
}

.visual {
  background-color:#102b45
}

.core,.node {
  background:#1c4e8f45
}

.report-preview {
  background:#1c4e8f65
}

.recommendation {
  background:#1c4e8f13
}

.hero .eyebrow {
  color:#fff
}

[hidden] {
  display:none!important
}

.breadcrumbs {
  display:block
}

.country-chooser {
  border:0
}

/* The standalone catalogue has its own navigation and reusable preview cards. */
.catalogue-main {
  max-width:1280px;
  margin:auto;
  padding:45px 25px
}

.catalogue-main h1 {
  font-size:50px
}

.catalogue-tools {
  position:sticky;
  top:0;
  z-index:20;
  background:white;
  border-bottom:1px solid #cbd6c8;
  padding:18px;
  box-shadow:0 4px 12px #0001
}

.catalogue-tools input {
  max-width:600px
}

.catalogue-jumps {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  max-height:130px;
  overflow:auto;
  margin-top:20px
}

.catalogue-jumps a {
  font-size:12px;
  border:1px solid #c9d4c5;
  padding:5px 10px
}

.catalogue-type {
  padding:55px 0;
  scroll-margin-top:260px
}

.catalogue-type>h2 {
  font-size:32px
}

.catalogue-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px
}

.catalogue-card {
  border:1px solid #cbd5c7;
  background:white;
  padding:20px;
  min-width:0
}

.catalogue-card>h3 {
  font-size:20px
}

.catalogue-controls {
  display:flex;
  gap:10px;
  margin:20px 0
}

.catalogue-controls button {
  padding:10px;
  border:1px solid #abbba4;
  background:#f2f6ec;
  font-size:13px
}

.catalogue-card pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:#0d211a;
  color:#fff;
  padding:18px;
  font-size:12px
}

.catalogue-card details {
  max-width:100%
}

.catalogue-preview {
  min-width:0
}

.variation-directory {
  padding:45px 24px;
  max-width:1200px;
  margin:auto
}

.variation-directory section {
  padding:35px 0;
  border-top:1px solid #c3d0bc
}

.variation-links {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px
}

.variation-links a {
  padding:17px;
  border:1px solid #c6d2bd
}

.variation-links small {
  display:block;
  font-size:13px
}

.variation-jumps {
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  margin:30px 0
}

.variation-directory h1 {
  font-size:50px
}

.error-page {
  min-height:65vh;
  display:grid;
  align-content:center;
  padding-top:65px;
  padding-bottom:70px
}

.error-code {
  font-size:90px;
  color:var(--green);
  line-height:1;
  margin-bottom:25px
}

@media(max-width:750px) {
  .catalogue-grid,.variation-links {
    grid-template-columns:1fr
  }

  .catalogue-main h1,.variation-directory h1 {
    font-size:38px
  }

}


/* Match the header and footer logo sizes while preserving the image ratio. */
header .brand img,
footer .brand img {
  width: 170px;
  height: auto;
  flex-shrink: 0;
}

/* Allow long country names to wrap beside the logo on smaller screens. */
header .brand > span:last-child,
footer .brand > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 800px) {
  header .brand,
  footer .brand {
    max-width: 100%;
  }

  header .brand img,
  footer .brand img {
    width: clamp(70px, 24vw, 145px);
  }
}