/* Typography styles 
****************
*/

/* bricolage-grotesque-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/bricolage-grotesque-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/inter-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/inter-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/inter-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Custom Variables
  ****************
*/

:root {

    /* Custom Colors */
    --clr-p-50: #FFFEF5;
    --clr-p-500: #A89271;
    --clr-p-600: #675945;
    --clr-n-0: #FFF;
    --clr-n-10: #F5F5F5;
    --clr-n-20: #E5E5E5;
    --clr-n-900: #000;

    /* Light Version */
    --section-bg-1: var(--clr-n-0);
    --section-bg-2: var(--clr-n-10);
    --section-bg-3: var(--clr-n-900);
    --section-bg-4: var(--clr-p-50);
    --clr-text-color: var(--clr-n-900);
    --logo-color: var(--clr-p-500);
    --menu-color: var(--clr-p-500);

    /* Custom Typography */
    --ff-primary: "Inter", sans-serif;
    --ff-secondary: "Bricolage Grotesque", sans-serif;
  
    --ff-body: var(--ff-primary);
    --ff-heading:  var(--ff-secondary);

    --fw-regular: 400;
    --fw-semi-bold: 500;
    --fw-bold: 700;

    --fs-400: 0.875rem; /* 14px */
    --fs-500: 1rem; /* 16px */
    --fs-600: 1.125rem; /*18px*/
    --fs-700: 1.25rem; /* 20px */
    --fs-725: 1.5rem; /* 24px */
    --fs-750: 2rem; /* 32px */
    --fs-775: 2.5rem; /* 40px */
    --fs-800: 3rem; /* 48px */
    --fs-850: 3.5rem; /* 56px */
    --fs-900: 4.5rem; /* 72px */

    --fs-body: var(--fs-500);
    --fs-primary-heading: var(--fs-700);
    --fs-secondary-heading: var(--fs-600);
    --fs-nav: var(--fs-500);
    --fs-btn: var(--fs-500);

    /* Navbar Height */
    --navbar-h: 94px;

}

/* General Styles 
****************
*/
body {
    font-family: var(--ff-primary);
    font-optical-sizing: auto;
    font-weight: var(--fw-regular);
    font-style: normal;
    font-size: 18px;
    color: var(--clr-text-color);
}

p, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
}

.heading-1 {
    font-size: var(--fs-900);
}

.heading-2 {
    font-size: var(--fs-800);
}

.heading-3 {
    font-size: var(--fs-700);
}

.heading-4 {
    font-size: var(--fs-600);
}

.heading-5 {
    font-size: var(--fs-500);
}

h2, h3, h4, h5, h6,
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6{
    font-family: var(--ff-secondary);
    font-weight: var(--fw-semi-bold);
    text-transform: capitalize;
}

.medium-text {
    font-size: var(--fs-500); /* 16px */
}

/*font for form fields & footer text */
.small-text {
    font-size: var(--fs-400); 
}

/* section class */
.section {
  padding: 8rem 0;
}

.section__heading {
  margin-bottom: 3.5rem;
}

.section__text {
  max-width: 700px;
}

/* Images */
img {
    display: block;
}

/* icons */
.icon {
    color: var(--clr-p-500);
}

.icon-s {
    font-size: var(--fs-725);
}

.icon-m {
    font-size: var(--fs-750);
}

.icon-l {
    font-size: var(--fs-775);
}

/* Hexagon icon with numbers */
.icon__container {
    position: relative;
    width: auto;
    height: min-content;
}

.icon__container--l {
    width: var(--icon-l);;
    height: var(--icon-l);
}

.icon__container--s {
    width: var(--icon-s);
    height: var(--icon-s);
}

.icon__container-num {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--clr-n-0);
    font-size: var(--fs-500);
 }

/* Buttons 
****************
*/
.c-btn {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    font-weight: var(--fw-regular);
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-align: center;
    border-radius: .5rem;
    text-transform: capitalize;
    text-decoration: none;
}

.c-btn--primary {
    border: none;
    background-color: var(--clr-p-500);
    border: 1px solid var(--clr-p-500);
    color: var(--clr-n-0);
}

.c-btn--outline {
    border: 1px solid var(--clr-n-900);
    background-color: transparent;
    color: var(--clr-n-900);
}

.c-btn--primary:hover,
.c-btn--outline:hover {
    transform: scale(1.05);
    text-decoration: none;
}

.c-btn--primary:hover{
    background-color: var(--clr-p-500);
    border-color: var(--clr-p-600);
    border-bottom: 6px solid var(--clr-p-600);
    color: var(--clr-n-0);
}

.c-btn--outline:hover {
    background-color: var(--clr-n-0);
    border-bottom: 6px solid var(--clr-n-900);
}

/* Text Sections */
.text__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

.text__container--items-c {
    place-items: center; /* center img */
    text-align: center;  /*center text */
    align-items: stretch;
}

.text__container--card-lb { /* Left border */
    border-left: 2px solid var(--clr-p-500);
    padding: .5rem 1.5rem;
}

.text__container--card {
    background-color: var(--clr-n-0);
    border: 1px solid var(--clr-p-500);
    padding: 2rem;
    border-radius: 1rem;
}

.text__container--icon {
    display: grid;
    grid-template-columns: auto 1fr;
    gap:1rem;
}

/* links */
a {
  text-decoration: none;
}

a:focus, a:hover {
  text-decoration: none;
}

.icon__link {
    color: var(--clr-p-500);
    transition: color 0.3s ease;
}

.icon__link:hover {
   color: var(--clr-p-600);
}

/* grid with equal rows height */
.grid__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    /* forces every row to be the same height, 
    based on the tallest card in the entire grid */
    grid-auto-rows: 1fr;
    gap: 1.5rem;
}

.grid__item {
    height: 100%;
    display: grid;
}

/* scroll up btn */
.scroll-up-btn {
  font-size: 4rem;
  position: fixed;
  z-index: 1000;
  bottom: 1rem;
  right: -5rem;
  transition: 0.4s ease-in-out all;
  cursor: pointer;
}

.scroll-up-btn svg {
  fill: var(--clr-p-600);
}

.scroll-up-btn:hover {
  font-size: 4.5rem;
}

.scroll-up-btn--show {
  right: 3rem;
}


/* Navbar 
****************
*/
/* override bootstrap with custom class begin with c- */
.c-navbar {
  background: var(--section-bg-1);
  color: var(--text-light); /* Ensure white text */
  border-bottom: 1px solid var(--clr-n-20);
}

.c-navbar__nav {
  padding: 1rem 0px;
}

.c-nav__link {
  text-transform: capitalize;;
  color: var(--clr-text-color);
  transition: color 0.3s ease;
  font-size: var(--fs-500);
  font-weight: var(--fw-regular);
}

.c-nav__link:focus, 
.c-nav__link:hover {
  text-decoration: none;
  color: var(--clr-p-500);
}

/* To override bootstrap styles for active state increase Specificity */
.c-navbar__nav .c-nav__link.active {
  text-decoration: none;
  color: var(--clr-p-500);
  font-weight: var(--fw-bold);
}

.c-navbar__toggler-icon {
  font-size: var(--fs-750);
  background-image: none;
}

.c-navbar__toggler-icon::before {
  vertical-align: middle;
}

.c-navbar__toggler:focus {
  box-shadow: 0 0 0 0.1rem var(--clr-p-500);
}

/* override btn padding in navbar using class Specificity */
.c-navbar .c-navbar__nav .c-btn--primary {
  padding: 0.5rem 1rem; 
}

.logo {
    cursor: pointer;
}

/* Hero 
****************
*/
.hero {
    padding: 9.5rem 0;
    /* shift hero section to bottom by navbar height */
    /* solve overlap fixed position navbar & hero section*/
    position: relative;
    top: var(--navbar-h);
}

.hero__heading,
.hero__text {
    margin-bottom: 2rem;
}

/* About 
****************
*/
.about{
    background-color: var(--clr-p-50);
}

/* Why 
****************
*/
.why{
    background-color: var(--clr-n-0);
}

/* Why 
****************
*/
.how {
    background-color: var(--clr-p-50);
}
.how__img {
    background-color: var(--clr-n-0);
    border: 1px solid var(--clr-p-500);
    border-radius: 1rem;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 3.5rem;
    margin-bottom: 3.5rem;
}

/* Positioning 
****************
*/
.positioning {
    background-color: var(--clr-n-0);
}

/* Available
****************
*/
.available {
    background-color: var(--clr-p-50);
}

/* Cases
****************
*/
.cases {
    background-color: var(--clr-n-10);
}

/* Partners 
****************
*/
.partners {
    background-color: var(--clr-p-50);
}

/* Team
****************
*/
.team {
    background-color: var(--clr-n-10);
}

/* Advisors
****************
*/
.advisors {
    background-color: var(--clr-n-0);
}

/* Contact
****************
*/
.contact {
    background-color: var(--clr-p-50);
}

.contact__heighlight { 
    color: var(--clr-p-500)
}

.contact__separator {
    color: var(--clr-n-20);
    opacity: 1;
    margin: 3.5rem 0 2rem;
    border-top-width: 2px
}

/* Override Boostrap Styles for form */
.c-form-control,
.c-form-select {
    font-size:var(--fs-500);
    border-radius: 0;
    /* solve required mark* getting input not focused */
    position: relative;
     z-index: 2;
}

.c-form-floating .c-form-control-lg {
    height: 2.5rem;
}

.c-form-control::placeholder {
    color: var(--clr-n-900);        
    opacity: 1; /* for firefox */
}

/* Browser reads only the selector it understands */
.c-form-control::-webkit-input-placeholder {
    color: var(--clr-n-900);
}

.c-form-control:-ms-input-placeholder{
    color: var(--clr-n-900);
}


.c-form-floating > label {
    left: 16px;
    font-size: var(--fs-500);
    color: var(--clr-p-600);
}

.c-form-floating > textarea.c-form-control {
    min-height: 100px;
}

.form__group {
    position: relative;
}

.required__mark {
    width: 100%;
    display: inline-block;
    text-align: right;
    color: red;
    position: absolute;
    left: 0;
    z-index: 1;
}

/* Footer 
****************
*/
.footer {
    background-color: var(--clr-n-900);
    /* monogram grid per the designer's background-pattern.pdf (repo
       root): aligned columns, rows touching flat-edge to flat-edge,
       tips touching sideways — a "stepped" grid with diamond air gaps
       at the junctions, NOT a merged honeycomb. Paths and lattice
       (124.565 x 113.398) are verbatim from that PDF. Same data-URI
       (different opacity) on .page-hero, .card--feature and
       .section--dark. */
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124.565 113.398'><defs><g id='m' fill='none' stroke='%23A89271' stroke-width='2.8' stroke-miterlimit='10'><path d='M0 0 L-51.182 0 C-55.603 0 -59.688 2.359 -61.898 6.187 L-86.598 48.968 L-39.517 48.968 L-39.517 33.504 L12.028 43.813 L12.028 69.585 L-39.517 79.894 L-39.517 64.431 L-86.598 64.431 L-61.898 107.211 C-59.688 111.04 -55.603 113.398 -51.182 113.398 L0 113.398 C4.421 113.398 8.506 111.04 10.717 107.211 L36.308 62.887 C38.518 59.058 38.518 54.341 36.308 50.512 L10.717 6.187 C8.506 2.359 4.421 0 0 0 Z'/><path d='M-39.517 48.967 L-39.517 64.43 L-0.858 56.699 Z'/></g></defs><g opacity='.13'><use href='%23m' transform='translate(86.598 0)'/><use href='%23m' transform='translate(-37.967 0)'/><use href='%23m' transform='translate(86.598 -113.398)'/><use href='%23m' transform='translate(-37.967 -113.398)'/><use href='%23m' transform='translate(86.598 113.398)'/><use href='%23m' transform='translate(-37.967 113.398)'/></g></svg>");
    background-size: 81.2px 73.9px;
    color: var(--clr-p-500);
    padding: 3.5rem 0;
}

.footer__links {
  list-style: none;
  padding-left: 0;
  gap: .5rem;
  text-align: left;
}

.footer__link {
  text-decoration: none;
  color: var(--clr-p-500);
  text-transform: capitalize;
  
}

.footer__link:hover, 
.footer__link:active{
  text-decoration: none;
  color: var(--clr-p-600);
  font-weight: 500;
}

.footer__separator {
    color: var(--clr-p-500);
    opacity: 1;
    margin: 2.5rem 0 2rem;
    border-top-width: 1px
}

/* Media Queries 
****************
*/
/* For medium screen */
@media screen and (max-width: 1199px) {
    .hero__img {
        margin: auto;
        width: 100%;
    } 
}
/* For medium screen */
@media screen and (max-width: 991px) {
    :root {
        --navbar-h: 75px;
    }

    .hero {
        padding: 5.5rem 0;
    }

    /* to solve overflow in small screens */
    .grid__container {
        grid-template-columns: 1fr;
    }

}

/* For Small Screens */
@media screen and (max-width: 767px) {
    .hero__heading {
        font-size: var(--fs-800);
    }
    .heading-2 {
        font-size: var(--fs-725);
    }
}

@media screen and (max-width: 461px) {
  .hero__heading {
    font-size: var(--fs-750);
  }

  .c-navbar-brand {
    width: 50%;
  }

}

/* Section background utilities
****************
Override the per-section defaults when a page needs a
different light/dark rhythm (defined last so they win).
*/
.section--white {
    background-color: var(--clr-n-0);
}

.section--cream {
    background-color: var(--clr-p-50);
}

.section--grey {
    background-color: var(--clr-n-10);
}

/* Announcement pill (hero)
****************
*/
.hero__announce {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem 1rem .3rem .3rem;
    border: 1px solid var(--clr-p-500);
    border-radius: 2rem;
    background-color: var(--clr-n-0);
    color: var(--clr-p-600);
    font-size: var(--fs-400);
    transition: background-color 0.3s ease;
}

.hero__announce:hover {
    background-color: var(--clr-p-50);
    color: var(--clr-p-600);
}

.hero__announce-tag {
    background-color: var(--clr-p-500);
    color: var(--clr-n-0);
    border-radius: 2rem;
    padding: .1rem .7rem;
    font-weight: var(--fw-semi-bold);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 0.75rem;
}

/* Page hero (subpage headers)
****************
*/
.page-hero {
    /* padding includes the fixed navbar height; extra bottom padding
       compensates for the diagonal seam cut */
    padding: calc(var(--navbar-h) + 5rem) 0 7rem;
    /* diagonal seam into the next (white) section */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3rem), 0 100%);
    background-color: var(--clr-p-50);
    /* same monogram honeycomb as the footer, fading out to the left
       so it never competes with the heading */
    background-image: linear-gradient(100deg, var(--clr-p-50) 45%, rgba(255, 254, 245, 0.55) 75%, rgba(255, 254, 245, 0) 100%),
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124.565 113.398'><defs><g id='m' fill='none' stroke='%23A89271' stroke-width='2.8' stroke-miterlimit='10'><path d='M0 0 L-51.182 0 C-55.603 0 -59.688 2.359 -61.898 6.187 L-86.598 48.968 L-39.517 48.968 L-39.517 33.504 L12.028 43.813 L12.028 69.585 L-39.517 79.894 L-39.517 64.431 L-86.598 64.431 L-61.898 107.211 C-59.688 111.04 -55.603 113.398 -51.182 113.398 L0 113.398 C4.421 113.398 8.506 111.04 10.717 107.211 L36.308 62.887 C38.518 59.058 38.518 54.341 36.308 50.512 L10.717 6.187 C8.506 2.359 4.421 0 0 0 Z'/><path d='M-39.517 48.967 L-39.517 64.43 L-0.858 56.699 Z'/></g></defs><g opacity='.28'><use href='%23m' transform='translate(86.598 0)'/><use href='%23m' transform='translate(-37.967 0)'/><use href='%23m' transform='translate(86.598 -113.398)'/><use href='%23m' transform='translate(-37.967 -113.398)'/><use href='%23m' transform='translate(86.598 113.398)'/><use href='%23m' transform='translate(-37.967 113.398)'/></g></svg>");
    background-size: auto, 81.2px 73.9px;
}

.page-hero .hero__heading {
    margin-bottom: 1.5rem;
}

/* Available badge (product cards)
****************
*/
.available__badge {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--clr-p-600);
    font-weight: var(--fw-semi-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: var(--fs-400);
}

/* Card enhancements (product, data service, use-case cards)
****************
*/
/* hover lift with gold accent line on top */
.card--lift {
    position: relative;
    /* clip the ::after accent to the rounded card shape */
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card--lift::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-p-500), #E3D3B3);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.card--lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -24px rgba(103, 89, 69, 0.5);
}

.card--lift:hover::after {
    transform: scaleX(1);
}

.card__icon {
    width: 48px;
    height: 48px;
    color: var(--clr-p-500);
}

.card__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card__icon svg .fill {
    fill: currentColor;
    stroke: none;
}

.card__tag {
    font-size: 0.75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--clr-p-500);
    font-weight: var(--fw-semi-bold);
}

.card__link {
    margin-top: auto;
    padding-top: 0.75rem;
}

.card__link a {
    color: var(--clr-p-500);
    font-weight: var(--fw-semi-bold);
    text-decoration: none;
}

.card__link a::after {
    content: "\2192";
    margin-left: 0.35em;
    transition: margin-left .2s ease;
}

.card__link a:hover {
    text-decoration: underline;
}

.card__link a:hover::after {
    margin-left: 0.6em;
}

/* featured product card on the dark hero stage */
.card--feature {
    background-color: #1b1712;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124.565 113.398'><defs><g id='m' fill='none' stroke='%23A89271' stroke-width='2.8' stroke-miterlimit='10'><path d='M0 0 L-51.182 0 C-55.603 0 -59.688 2.359 -61.898 6.187 L-86.598 48.968 L-39.517 48.968 L-39.517 33.504 L12.028 43.813 L12.028 69.585 L-39.517 79.894 L-39.517 64.431 L-86.598 64.431 L-61.898 107.211 C-59.688 111.04 -55.603 113.398 -51.182 113.398 L0 113.398 C4.421 113.398 8.506 111.04 10.717 107.211 L36.308 62.887 C38.518 59.058 38.518 54.341 36.308 50.512 L10.717 6.187 C8.506 2.359 4.421 0 0 0 Z'/><path d='M-39.517 48.967 L-39.517 64.43 L-0.858 56.699 Z'/></g></defs><g opacity='.09'><use href='%23m' transform='translate(86.598 0)'/><use href='%23m' transform='translate(-37.967 0)'/><use href='%23m' transform='translate(86.598 -113.398)'/><use href='%23m' transform='translate(-37.967 -113.398)'/><use href='%23m' transform='translate(86.598 113.398)'/><use href='%23m' transform='translate(-37.967 113.398)'/></g></svg>"),
        radial-gradient(120% 140% at 15% 0%, #2d2419 0%, #1b1712 72%);
    background-size: 81.2px 73.9px, auto;
    border: 1px solid rgba(168, 146, 113, 0.5);
    border-radius: 1rem;
    padding: 2.5rem;
    color: #f3e9d2;
}

.card--feature .heading-3 {
    color: #fff7e6;
}

.card--feature .available__badge {
    color: #ddcdaf;
}

.card--feature .c-btn--outline {
    border-color: #f3e9d2;
    color: #f3e9d2;
}

.card--feature .c-btn--outline:hover {
    background-color: rgba(243, 233, 210, 0.08);
    border-bottom-color: var(--clr-p-500);
}

/* dataset chips */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.chip {
    padding: .25rem .9rem;
    border: 1px solid var(--clr-p-500);
    border-radius: 2rem;
    font-size: var(--fs-400);
    color: var(--clr-p-600);
    background-color: var(--clr-n-0);
}

/* tighter grid for compact card sets (e.g. 4-up data services) */
.grid__container--compact {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.grid__container--compact .text__container--card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* dark section (statement bands, CTA bands) — black field with
   gold monogram texture, deck poster style */
.section--dark {
    background-color: var(--clr-n-900);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124.565 113.398'><defs><g id='m' fill='none' stroke='%23A89271' stroke-width='2.8' stroke-miterlimit='10'><path d='M0 0 L-51.182 0 C-55.603 0 -59.688 2.359 -61.898 6.187 L-86.598 48.968 L-39.517 48.968 L-39.517 33.504 L12.028 43.813 L12.028 69.585 L-39.517 79.894 L-39.517 64.431 L-86.598 64.431 L-61.898 107.211 C-59.688 111.04 -55.603 113.398 -51.182 113.398 L0 113.398 C4.421 113.398 8.506 111.04 10.717 107.211 L36.308 62.887 C38.518 59.058 38.518 54.341 36.308 50.512 L10.717 6.187 C8.506 2.359 4.421 0 0 0 Z'/><path d='M-39.517 48.967 L-39.517 64.43 L-0.858 56.699 Z'/></g></defs><g opacity='.1'><use href='%23m' transform='translate(86.598 0)'/><use href='%23m' transform='translate(-37.967 0)'/><use href='%23m' transform='translate(86.598 -113.398)'/><use href='%23m' transform='translate(-37.967 -113.398)'/><use href='%23m' transform='translate(86.598 113.398)'/><use href='%23m' transform='translate(-37.967 113.398)'/></g></svg>");
    background-size: 81.2px 73.9px;
    color: #f3e9d2;
}

.section--dark .heading-2,
.section--dark .heading-3 {
    color: #fff7e6;
}

.section--dark .c-btn--outline {
    border-color: #f3e9d2;
    color: #f3e9d2;
}

.section--dark .c-btn--outline:hover {
    background-color: rgba(243, 233, 210, 0.08);
    border-bottom-color: var(--clr-p-500);
}

/* statement typography (huge gold line, deck style) */
.statement__text {
    font-family: var(--ff-heading);
    font-weight: var(--fw-semi-bold);
    font-size: clamp(2.25rem, 5.5vw, 4.25rem);
    line-height: 1.15;
    color: var(--clr-p-500);
    margin-bottom: 2rem;
}

.statement__sub {
    max-width: 640px;
    color: #ddcdaf;
}

/* hexagon-masked portrait (logomark proportions) */
.hex-img {
    width: 200px;
    aspect-ratio: 45 / 42;
    object-fit: cover;
    clip-path: polygon(2% 50%, 30% 2%, 70% 2%, 98% 50%, 70% 98%, 30% 98%);
}

/* news list */
.news__title-link {
    color: var(--clr-text-color);
    transition: color 0.3s ease;
}

.news__title-link:hover {
    color: var(--clr-p-500);
}

/* Prose (rendered Markdown pages, e.g. privacy policy)
****************
*/
.prose h2 {
    font-size: var(--fs-750);
    margin: 3rem 0 1rem;
}

.prose h3 {
    font-size: var(--fs-600);
    margin: 2rem 0 .75rem;
}

.prose p {
    margin-bottom: 1rem;
}

.prose ul,
.prose ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.prose li {
    margin-bottom: .5rem;
}

.prose a {
    color: var(--clr-p-500);
}

.prose a:hover {
    color: var(--clr-p-600);
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.prose th,
.prose td {
    border-bottom: 1px solid var(--clr-n-20);
    padding: .5rem .75rem;
    text-align: left;
    vertical-align: top;
}

/* Knowledge graph hero animation
****************
Dark on-brand stage. One choreographed 9s cycle (--d = delay in s):
  0.0–2.7   systems of record emit; record pulses stream into the graph
  1.2–4.0   nodes flash as data lands; a shimmer wave crosses the hexagon
  4.4–6.3   agents / apps / people send query pulses to the graph
  5.5–8.2   answer pulses return; consumer rows fill in
The graph itself is the Qlevia hexagon. All motion is CSS keyframes
on SVG strokes (dashoffset streaks) — no JS, no SMIL.
*/
.kg-stage {
    --kg-canvas-1: #1b1712;
    --kg-canvas-2: #2d2419;
    --kg-gold-soft: rgba(168, 146, 113, 0.55);
    --kg-gold-glow: rgba(206, 184, 146, 0.95);
    --kg-cream: #f3e9d2;

    position: relative;
    width: 100%;
    border-radius: 1.25rem;
    overflow: hidden;
    background: radial-gradient(130% 130% at 50% 45%, var(--kg-canvas-2) 0%, var(--kg-canvas-1) 74%);
    box-shadow: 0 26px 64px -26px rgba(40, 32, 20, 0.6);
}

.kg-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(closest-side, rgba(168, 146, 113, 0.26), transparent),
        radial-gradient(closest-side, rgba(120, 100, 72, 0.20), transparent);
    background-size: 55% 60%, 60% 55%;
    background-repeat: no-repeat;
    background-position: 50% 50%, 20% 120%;
    animation: kg-glow-drift 18s ease-in-out infinite alternate;
}

@keyframes kg-glow-drift {
    to {
        background-size: 62% 66%, 52% 50%;
        background-position: 55% 45%, 80% -10%;
    }
}

.kg-svg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.kg-stage-label {
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    fill: rgba(168, 146, 113, 0.65);
}

/* static wires */
.kg-wire {
    fill: none;
    stroke: var(--kg-gold-soft);
    stroke-width: 1;
    opacity: .3;
}

/* orbiting hexagonal field ring */
.kg-ring {
    fill: none;
    stroke: rgba(168, 146, 113, 0.4);
    stroke-width: 1;
    stroke-dasharray: 4 10;
    stroke-linecap: round;
    opacity: .5;
    animation: kg-ring-spin 36s linear infinite;
}

@keyframes kg-ring-spin {
    to { stroke-dashoffset: -140; }  /* multiple of the dash period: seamless */
}

/* light pulses travelling the wires: a short dash segment swept along a
   pathLength=100 path; the long gap keeps a single segment per wire */
.kg-streak {
    fill: none;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(206, 184, 146, 0.9));
    opacity: 0;
    animation-duration: 9s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: calc(var(--d) * 1s);
}

.kg-streak--in {
    stroke: var(--kg-gold-glow);
    stroke-width: 2.4;
    stroke-dasharray: 16 384;
    stroke-dashoffset: 16;
    animation-name: kg-flow-in;
}

.kg-streak--out {
    stroke: var(--kg-cream);
    stroke-width: 2.4;
    stroke-dasharray: 16 384;
    stroke-dashoffset: 16;
    animation-name: kg-flow-out;
}

.kg-query {
    stroke: rgba(206, 184, 146, 0.85);
    stroke-width: 1.7;
    stroke-dasharray: 3 6 3 6 3 379;
    stroke-dashoffset: 21;
    animation-name: kg-query-run;
}

@keyframes kg-flow-in {
    0% { stroke-dashoffset: 16; opacity: 0; animation-timing-function: ease-in-out; }
    1.2% { opacity: 1; }
    12% { opacity: 1; }
    13.3%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes kg-flow-out {
    0% { stroke-dashoffset: 16; opacity: 0; animation-timing-function: ease-in-out; }
    1.2% { opacity: 1; }
    11% { opacity: 1; }
    12.2%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes kg-query-run {
    0% { stroke-dashoffset: 21; opacity: 0; animation-timing-function: ease-in-out; }
    1% { opacity: .95; }
    9% { opacity: .95; }
    10%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

/* knowledge graph core */
.kg-core-halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: kg-core-breathe 9s ease-in-out infinite;
}

/* big breath while ingesting, smaller beats answering the queries */
@keyframes kg-core-breathe {
    0%, 100% { opacity: .35; transform: scale(.92); }
    14% { opacity: .45; transform: scale(.96); }
    40% { opacity: .95; transform: scale(1.12); }
    52% { opacity: .6; transform: scale(1.02); }
    60% { opacity: .8; transform: scale(1.06); }
    68% { opacity: .65; transform: scale(1.02); }
    75% { opacity: .8; transform: scale(1.05); }
    86% { opacity: .45; transform: scale(.95); }
}

.kg-node--core {
    fill: #fff7e6;
    animation: kg-core-node 9s ease-in-out infinite;
}

@keyframes kg-core-node {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 247, 230, 0.5)); }
    40% { filter: drop-shadow(0 0 10px rgba(255, 247, 230, 0.95)); }
    60% { filter: drop-shadow(0 0 6px rgba(255, 247, 230, 0.8)); }
}

.kg-node {
    fill: var(--kg-cream);
    transform-box: fill-box;
    transform-origin: center;
    animation: kg-node-flash 9s linear infinite;
    animation-delay: calc(var(--d) * 1s);
}

@keyframes kg-node-flash {
    0%, 100% { transform: scale(1); filter: none; }
    1.3% { transform: scale(1.5); filter: drop-shadow(0 0 7px var(--kg-gold-glow)); }
    5% { transform: scale(1); filter: none; }
}

/* slow organic drift so the constellation feels alive */
.kg-float {
    animation: kg-float var(--ft, 7s) ease-in-out infinite alternate;
}

@keyframes kg-float {
    from { transform: translate(0, 0); }
    to { transform: translate(var(--fx, 1.5px), var(--fy, -1.5px)); }
}

.kg-edge {
    stroke: var(--kg-gold-glow);
    stroke-width: 1.15;
    opacity: .3;
    animation: kg-edge-wave 9s linear infinite;
    animation-delay: calc(var(--d) * 1s);
}

@keyframes kg-edge-wave {
    0%, 100% { opacity: .3; }
    1.5% { opacity: 1; }
    7% { opacity: .3; }
}

/* node boxes */
.kg-box {
    fill: rgba(255, 255, 255, 0.025);
    stroke: var(--clr-p-500);
    stroke-width: 1.4;
}

.kg-box-label {
    font-size: 12px;
    fill: #ddcdaf;
    letter-spacing: .2px;
}

.kg-rows line {
    stroke: var(--kg-gold-soft);
    stroke-width: 3;
    stroke-linecap: round;
    opacity: .55;
}

.kg-rows--recv line {
    opacity: .25;
}

/* sources flash as they emit */
.kg-emit {
    animation: kg-emit-glow 9s linear infinite;
    animation-delay: calc(var(--d) * 1s);
}

@keyframes kg-emit-glow {
    0%, 3% {
        stroke: var(--kg-gold-glow);
        filter: drop-shadow(0 0 7px var(--kg-gold-glow));
    }
    9%, 100% {
        stroke: var(--clr-p-500);
        filter: none;
    }
}

/* the record row that is about to be sent lights up first */
.kg-row-emit {
    animation: kg-row-flash 9s linear infinite;
    animation-delay: calc(var(--d) * 1s);
}

@keyframes kg-row-flash {
    0% { opacity: .55; stroke: var(--kg-gold-soft); }
    2.5%, 5% { opacity: 1; stroke: var(--kg-gold-glow); }
    10%, 100% { opacity: .55; stroke: var(--kg-gold-soft); }
}

/* consumers flash as the answer arrives */
.kg-receive {
    animation: kg-receive-glow 9s linear infinite;
    animation-delay: calc(var(--d) * 1s);
}

@keyframes kg-receive-glow {
    0%, 3% {
        stroke: var(--kg-gold-glow);
        filter: drop-shadow(0 0 8px var(--kg-gold-glow));
    }
    9%, 100% {
        stroke: var(--clr-p-500);
        filter: none;
    }
}

/* ...and their result rows fill in, then fade for the next cycle */
.kg-row-recv {
    animation: kg-row-recv 9s linear infinite;
    animation-delay: calc(var(--d) * 1s);
}

@keyframes kg-row-recv {
    0% { opacity: .25; stroke: var(--kg-gold-soft); }
    1.5% { opacity: 1; stroke: var(--kg-gold-glow); }
    16% { opacity: 1; stroke: rgba(206, 184, 146, 0.8); }
    24%, 100% { opacity: .25; stroke: var(--kg-gold-soft); }
}

@media (prefers-reduced-motion: reduce) {
    .kg-stage::before,
    .kg-ring,
    .kg-core-halo,
    .kg-node,
    .kg-node--core,
    .kg-edge,
    .kg-float,
    .kg-emit,
    .kg-receive,
    .kg-row-emit,
    .kg-row-recv {
        animation: none !important;
    }

    .kg-streak {
        display: none !important;
    }

    .kg-rows--recv line {
        opacity: .55;
    }
}