/* Thinnika Tech — one stylesheet. Values from the thinnika theme.json + global styles. */

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/CourierPrime-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette */
  --black: #000000;
  --white: #ffffff;
  --blue: #1A759F;          /* primary blue */
  --blue-light: #59A4D0;    /* brother blue */
  --blue-dark: #3D6D8E;     /* darker blue */
  --red: #CF1F3E;           /* brand red */
  --grey: #888888;          /* medium grey */
  --mint: #C1FFFF;          /* bright mint, main accent */
  --mint-light: #D9FEFE;
  --bg-dark: #0F1621;
  --bg-blue: #1E2530;
  --bg-soft: #353C48;
  --bg-light: #F4F4F4;
  --border: #465061;        /* border grey */
  --menu-gradient: linear-gradient(to top right, #0f1621, #23536b);

  /* spacing scale (theme.json slugs 10–60) */
  --s-10: 1rem;
  --s-20: min(1.5rem, 6vw);
  --s-30: min(2.5rem, 8vw);
  --s-40: min(4rem, 10vw);
  --s-50: min(6.5rem, 2rem + 12vw);
  --s-60: min(10.5rem, 18vw);

  /* type scale (twentytwentyfour, fluid where it was fluid) */
  --fs-small: 0.9rem;
  --fs-medium: 1.05rem;
  --fs-large: clamp(1.39rem, 1.2rem + 0.9vw, 1.85rem);
  --fs-xl: clamp(1.85rem, 1.6rem + 1.2vw, 2.5rem);
  --fs-xxl: clamp(2.5rem, 2.2rem + 1.5vw, 3.27rem);

  --content: 1280px;
  --wide: 1440px;
  --gutter: 5vw;
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-dark);
  color: var(--white);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: var(--fs-medium);
  line-height: 1.55;
}
h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.2; margin: 0 0 var(--s-10); }
h1 { font-size: var(--fs-xxl); line-height: 1.15; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-large); }
h4 { font-size: clamp(1.1rem, 1rem + 0.77vw, 1.5rem); }
h5 { font-size: var(--fs-medium); }
h6 { font-size: var(--fs-small); }
p { margin: 0 0 var(--s-10); }
a { color: var(--white); }
a:hover { text-decoration: none; }
img { max-width: 100%; height: auto; }
code, pre { font-family: "Courier Prime", monospace; }
blockquote {
  margin: calc(var(--s-30) + 0.75rem) 0;
  border-left: 2px solid var(--mint);
  padding-left: 1rem;
  font-size: var(--fs-medium);
}
address { font-style: normal; }
.visually-hidden, .nav-toggle {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* layout */
.container { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wide { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; }
.prose { width: min(720px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.page { padding-top: calc(43px + 2 * var(--s-30) + var(--s-40)); padding-bottom: var(--s-50); }

/* buttons */
.btn {
  display: inline-block;
  padding: 20px 48px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--mint);
  color: var(--bg-dark);
  font-weight: 600;
  text-decoration: none;
}
.btn:hover, .btn:focus-visible { background: var(--white); color: var(--bg-dark); }
.btn-outline { background: transparent; border-color: var(--mint); color: var(--mint); }
.btn-red { background: var(--red); color: var(--white); padding: 0.75rem var(--s-10); }

/* header + nav */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 1000; }
.header-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-30);
  padding: var(--s-30) 0;
}
.logo { display: block; flex: none; }
.logo img { display: block; width: 200px; }
.site-nav { display: flex; align-items: center; gap: var(--s-30); }
.menu, .sub, .footer-nav { list-style: none; margin: 0; padding: 0; }
.menu { display: flex; flex-wrap: wrap; gap: var(--s-30); }
.menu a { text-decoration: none; }
.menu a:hover, .menu a[aria-current] { color: var(--mint); }
.has-sub { position: relative; }
.has-sub > a::after {
  content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin: 0 0 0.2em 0.45em;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.sub {
  display: none; position: absolute; top: 100%; left: -90%; min-width: 225px;
  margin-top: 0.5rem; padding: 1.25rem 1.25rem 2rem;
  background: var(--bg-blue); border-radius: 10px;
}
.has-sub::before { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 0.75rem; } /* hover bridge */
.has-sub:hover .sub, .has-sub:focus-within .sub { display: block; }
.sub li { border-bottom: 1px solid #3F3F3F; }
.sub a { display: block; padding: 1rem 4px; white-space: nowrap; }
.nav-open, .nav-close { display: none; cursor: pointer; color: var(--white); line-height: 0; }
.nav-toggle:focus-visible + .nav-open { outline: 2px solid var(--mint); outline-offset: 4px; }

@media (max-width: 1023px) {
  .nav-open { display: block; }
  .site-nav { display: none; }
  .nav-toggle:checked ~ .site-nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-30);
    position: fixed; inset: 0; overflow-y: auto;
    padding: var(--s-30) var(--gutter);
    background: var(--menu-gradient);
  }
  .nav-close { display: block; align-self: flex-end; }
  .menu { flex-direction: column; gap: var(--s-20); font-size: 1.25rem; }
  .has-sub > a::after { display: none; }
  .sub { display: block; position: static; min-width: 0; margin: 0; padding: 1rem 0 0 0; background: none; font-size: 1rem; }
  .sub li { border: 0; padding-bottom: 1rem; }
  .sub a { padding: 0; }
}

/* hero (cover) */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 430px; padding: var(--s-50) 0; text-align: center;
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, var(--bg-dark) 14%, rgba(0, 0, 0, 0) 67%);
}
.hero-inner { margin-top: 96px; display: flex; flex-direction: column; align-items: center; gap: var(--s-10); }
.hero-text { max-width: 720px; }
.hero .btn { margin-top: var(--s-30); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--border); padding: var(--s-20) 0; }
.faq summary {
  cursor: pointer; list-style: none; font-weight: 700; font-size: var(--fs-large);
  display: flex; justify-content: space-between; gap: var(--s-10);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--mint); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: var(--s-10) 0 0; }

/* blog cards (news list) */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-30); }
@media (max-width: 1023px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; min-height: 280px; background: var(--bg-blue); border-radius: 10px; overflow: hidden; }
.card-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: var(--s-20); }
.card h3 { font-size: var(--fs-large); margin: 0; }
.card h3 a { text-decoration: none; }
.card .excerpt {
  font-size: var(--fs-small);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.read-more {
  align-self: flex-end; margin-top: auto; padding: var(--s-20) 34px var(--s-20) 0;
  background: url("../img/2024/02/red_arrow.svg") right center / 24px no-repeat;
  text-decoration: none;
}

/* category chips */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; list-style: none; padding: 0; }
.chip { display: inline-block; padding: 8px 20px; border: 1px solid var(--bg-soft); border-radius: 4px; color: var(--mint); text-decoration: none; }
a.chip:hover, .chip[aria-current] { border-color: var(--mint); }

/* careers */
.career-btn { padding: 8px 20px; border: 1px solid var(--mint); border-radius: 4px; text-decoration: none; }
.career-btn:hover { border-color: var(--white); }
.career-small-text { font-size: var(--fs-small); }

/* post */
.post-head { text-align: center; }
.post-meta { display: flex; justify-content: center; align-items: center; gap: var(--s-10); color: var(--mint); }
.post-image { display: block; width: min(1024px, 100% - 2 * var(--gutter)); margin: var(--s-30) auto; border-radius: 16px; aspect-ratio: 16 / 9; object-fit: cover; }
.prose img { display: block; margin-inline: auto; border-radius: 10px; max-width: 100%; max-height: 70vh; width: auto; height: auto; }
.card-body .chip { align-self: flex-start; padding: 2px 12px; font-size: var(--fs-small); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-10); }
.gallery p { display: contents; } /* Markdown wraps the images in one <p>; let them be the grid items */
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.back { margin-block: var(--s-30); }

/* page sections (home, services) */
mark { background: none; color: var(--mint); }
.hero-dots {
  position: absolute; top: 64px; left: 10%; z-index: -1; pointer-events: none;
  width: min(887px, 90%); aspect-ratio: 739 / 307;
  background: url("../img/2024/02/dots.svg") 0 0 / contain no-repeat;  /* fallback until dots.js takes over */
}
.hero-dots.gl { background: none; }
.stars { display: block; width: 110px; height: 15px; background: url("../img/2024/02/icon-star.svg") 0 0 / 22px 15px repeat-x; }
.section { margin-block: var(--s-50); }
.section.cards { gap: var(--s-20); }
.hero + .section { margin-top: 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-20) var(--s-50); align-items: center; }
.split > * { min-width: 0; }
@media (max-width: 781px) { .split { grid-template-columns: 1fr; } }
.link-card { justify-content: space-between; padding: var(--s-30); border: 1px solid var(--border); text-decoration: none; }
.link-card:hover { border-color: var(--mint); }
.link-card h3 { margin: 0; }
.mint-card {
  min-height: 220px; justify-content: center; align-items: center; gap: 8px; padding: var(--s-20);
  background: var(--mint); color: var(--black); font-weight: 600; text-align: center; text-decoration: none;
}
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-20); align-items: center; }
.stack { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-20); }
.stack .mint-card { align-self: stretch; }
.split > .stack .mint-card { align-self: flex-end; width: min(257px, 100%); min-height: 280px; }
.collage img, .split > img, .stack > img { border-radius: 10px; }
.stack > img { width: 210px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-20) var(--s-40); padding-block: var(--s-30); }
@media (max-width: 600px) { .duo { grid-template-columns: 1fr; } }
.duo h3 { font-size: var(--fs-medium); margin: var(--s-10) 0; }
.duo p { font-size: var(--fs-small); }
.checks { list-style: none; padding: 0; margin: var(--s-20) 0; display: grid; gap: var(--s-20); }
.checks li { padding-left: 36px; background: url("../img/2024/02/icon-check.svg") 0 0.2em / 20px no-repeat; }
.code-panel { padding-top: var(--s-30); border: 1px solid var(--blue-light); border-radius: 4px; }
.code-panel pre { margin: 0; padding: var(--s-40); border-top: 1px solid var(--blue-light); color: var(--blue); white-space: pre-wrap; overflow-wrap: anywhere; }
.code-panel mark.r { color: var(--red); }
.code-panel mark.k { color: var(--blue-light); }
.banner, .boxed {
  gap: var(--s-10) var(--s-40); padding: var(--s-40); border: 1px solid var(--border); border-radius: 10px;
  background: url("../img/2024/02/background-blur.png") center / cover;
}
.boxed { text-align: center; }
.boxed .btn { margin-top: var(--s-10); }
.testimonials, .blur-section {
  padding-block: var(--s-60);
  background: linear-gradient(var(--bg-dark), transparent 47% 74%, var(--bg-dark)),
              url("../img/2024/02/background-blur.png") center / cover;
}
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-20); margin-top: var(--s-40); }
@media (max-width: 781px) { .quotes { grid-template-columns: 1fr; } }
.quote { display: flex; flex-direction: column; gap: var(--s-20); margin: 0; padding: var(--s-20); border: 1px solid var(--border); border-radius: 10px; }
.quote blockquote { margin: 0; padding: 0; border: 0; font-weight: 700; }
.quote blockquote p { margin: 0; }
.quote figcaption { font-size: var(--fs-small); }
.quote figcaption img { display: block; margin-top: var(--s-10); }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-10); list-style: none; padding: 0; margin-bottom: var(--s-60); }
.logos li { width: 160px; text-align: center; }
.cta { padding: var(--s-50) var(--s-30); background: var(--bg-blue); border: 1px solid var(--border); border-radius: 10px; text-align: center; }
.cta > * { max-width: 720px; margin-inline: auto; }
.cta .buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; margin-top: var(--s-20); }

/* about, career, contact */
.eyebrow { font-weight: 600; margin: 0; }
.mint { color: var(--mint); }
.staff { margin-top: var(--s-30); }
@media (min-width: 901px) { .staff { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.staff-card, .contact-card { gap: var(--s-10); padding: var(--s-30); border: 3px solid var(--border); }
.staff-card h3 { font-size: var(--fs-medium); margin: var(--s-10) 0 0; }
.staff-card p { margin: 0; font-size: var(--fs-small); }
.staff-card .role { font-weight: 700; }
.staff-card .linkedin { margin-top: auto; padding-top: var(--s-20); }
.portrait { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.contact-card { align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.contact-card:hover { border-color: var(--mint); }
.contact-card h2 { font-size: var(--fs-large); margin: var(--s-10) 0 0; }
.contact-card p { margin: 0; overflow-wrap: anywhere; }

/* footer */
.site-footer { margin-top: var(--s-30); }
.footer-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-30);
  margin-block: var(--s-30);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s-30); }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover, .footer-nav a[aria-current] { color: var(--mint); }
.footer-top address { font-size: var(--fs-small); }
.linkedin img { margin-top: 0.5rem; vertical-align: middle; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-20);
  padding: var(--s-20) 0; border-top: 1px solid var(--bg-blue);
  font-size: var(--fs-small); color: var(--border);
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--border); }
@media (max-width: 883px) {
  .footer-top, .footer-nav { justify-content: center; text-align: center; }
}