.particles {
  padding: 3rem 5vw;
  text-align: center;
  position: relative;
  z-index: 1000;
}

.particles_title {
  font-size: 1rem;
  margin: 0 0 1rem;
  font-weight: normal;
}

@media screen and (min-width: 53em) {

  .particles {
    position: fixed;
    text-align: left;
    z-index: 10000;
    top: -50px;
    left: 0;
    display: grid;
    align-content: space-between;
    width: 100%;
    max-width: none;
    height: 100vh;
    padding: 3rem;
    pointer-events: none;
    grid-template-columns: 75% 25%;
    grid-template-rows: auto auto auto;
    grid-template-areas: 'title links'
              '... ...'
              'github demos';
  }

  .particles_title-wrap {
    grid-area: title;
    display: flex;
  }

  .particles_title {
    margin: 0;
  }

}




/* ============================
   Design Tokens & Gradients
   ============================ */

:root {
  --color-shockingly-green: #0ae448;
  --color-just-black: #0e100f;
  --color-surface-white: #fffce1;
  --color-pink: #fec5fb;
  --color-shockingly-pink: #f100cb;
  --color-orangey: #ff8709;
  --color-lilac: #9d95ff;
  --color-lt-green: #abff84;
  --color-blue: #00bae2;
  --color-grey: gray;
  --color-surface75: #bbbaa6;
  --color-surface50: #7c7c6f;
  --color-surface25: #42433d;

  --gradient-macha: linear-gradient(114.41deg, var(--color-shockingly-green) 20.74%, var(--color-lt-green) 65.5%);
  --gradient-orange-crush: linear-gradient(111.45deg, var(--color-orangey) 19.42%, #f7bdf8 73.08%);
  --gradient-lipstick: linear-gradient(165.72deg, #f7bdf8 21.15%, #cd237f 81.93%);
  --gradient-purple-haze: linear-gradient(153.58deg, #f7bdf8 32.25%, #2f3cc0 92.68%);
  --gradient-skyfall: linear-gradient(131.77deg, #0a157a 30.82%, #15bfe4 81.82%);
  --gradient-emerald-city: linear-gradient(166.9deg, var(--color-shockingly-green) 53.19%, #0085d0 107.69%);
  --gradient-summer-fair: linear-gradient(144.02deg, var(--color-blue) 4.56%, var(--color-pink) 72.98%);

  --color-core-green: #dfffd1;
  --color-core-green-lt: #f3ffee;
  --color-core-gradient: radial-gradient(89.08% 84.62% at 16.54% 78.46%, #fbfefa 0%, #c9f6b4 39.58%, #abff84 77.6%, #2fee65 100%);
  --color-core-button-gradient: linear-gradient(114.41deg, #0ae448 20.74%, #abff84 65.5%);
  --color-core-heading-gradient: linear-gradient(180deg, #d6ffc3 0%, rgba(214, 255, 195, 0) 100%), #f3ffee;
  --color-core-intro-gradient: linear-gradient(144.5deg, #e8ffdd 65.09%, #7dea7b 122.73%), linear-gradient(311.31deg, #7ef89e 36.08%, #e5ffd9 106.98%);

  --color-text-purple: #d2ceff;
  --color-text-purple-lt: #dfdcff;
  --color-text-gradient: radial-gradient(129.03% 100% at 120.97% 81.45%, #dfdcff 27.08%, #a69eff 100%);

  --color-svg-tangerine: #ffe3c7;
  --color-svg-tangerine-lt: #fff0e0;
  --color-svg-gradient: radial-gradient(70.77% 70.77% at 0% 70.77%, #ffd9b0 0%, #fd9f3b 80.73%, #ff8709 100%);
  --color-svg-heading-gradient: linear-gradient(180deg, #ffbd77 0%, rgba(254, 197, 251, 0) 100%), #ffe4c7;

  --color-ui-blue: #bef3fe;
  --color-ui-blue-lt: #e1faff;
  --color-ui-blue-codeblk: #f6feff;
  --color-ui-text-gradient: linear-gradient(168.89deg, #fec5fb -21.3%, #00bae2 89.88%);
  --color-ui-code-blocktext-gradient: linear-gradient(142.91deg, #cef6ff 18.75%, #a6efff 54.93%);
  --color-ui-gradient: radial-gradient(78.77% 78.77% at 71.71% 30.77%, #f0fcff 0%, #9bedff 67.21%, #98ecff 76.04%, #5be1ff 84.9%, #00bae2 94.79%);
  --color-ui-gradient-background: linear-gradient(137.1deg, #ecfcff 27.5%, #a6efff 94.09%);
  --color-ui-gradient-flip-background: radial-gradient(140% 190% at 117.54% 131.12%, #f0fcff 0%, #9bedff 25.52%, #98ecff 42.71%, #5be1ff 60.94%, #00bae2 94.79%);

  --color-scroll-pink: #ffd7fd;
  --color-scroll-pink-lt: #ffe9fe;
  --color-scroll-gradient: linear-gradient(317.42deg, #ffe9fe 10.4%, #ff96f9 83.03%);

  --ease-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-out-quart: cubic-bezier(0.175, 0.79, 0.38, 0.905);
  --ease-in-out-quart: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Core palette aliases */
:root {
  --dark: var(--color-just-black);
  --grey-dark: #42433d;
  --light: var(--color-surface-white);
  --mid: #7c7c6f;
  --grey: gray;
  --gray: gray;

  --green: var(--color-shockingly-green);
  --green-dark: #0ae448;
  --green-light: var(--color-lt-green);
  --blue: var(--color-blue);
  --purple: var(--color-lilac);
  --red: #cd237f;
  --orange: var(--color-orangey);

  accent-color: var(--color-shockingly-green);
}

/* ============================
   Fluid Type & Spacing
   ============================ */

:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1140;
  --fluid-screen: 100vw;
  --fluid-bp: calc(
    (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
    (var(--fluid-max-width) - var(--fluid-min-width))
  );
}
@media screen and (min-width: 1140px) {
  :root { --fluid-screen: calc(var(--fluid-max-width) * 1px); }
}

:root {
  --f-0-min: 16;   --f-0-max: 18;   --step-0: calc(((var(--f-0-min)/16)*1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp));
  --f-1-min: 16;   --f-1-max: 22.5; --step-1: calc(((var(--f-1-min)/16)*1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp));
  --f-2-min: 23.04;--f-2-max: 28.13;--step-2: calc(((var(--f-2-min)/16)*1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp));
  --f-3-min: 27.65;--f-3-max: 35.16;--step-3: calc(((var(--f-3-min)/16)*1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp));
  --f-4-min: 33.18;--f-4-max: 46;   --step-4: calc(((var(--f-4-min)/16)*1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp));
}

:root {
  --fc-s-min: (var(--f-0-min, 21)); --fc-s-max: (var(--f-0-max, 24));
  --fc-m-min: (var(--fc-s-min) * 6); --fc-m-max: (var(--fc-s-max) * 6);
  --fc-l-min: (var(--fc-s-min) * 8); --fc-l-max: (var(--fc-s-max) * 8);
  --fc-xl-min:(var(--fc-s-min) * 10);--fc-xl-max:(var(--fc-s-max) * 10);

  --space-s:  calc(((var(--fc-s-min)/16)*1rem)  + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m:  calc(((var(--fc-m-min)/16)*1rem)  + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l:  calc(((var(--fc-l-min)/16)*1rem)  + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp));
  --space-xl: calc(((var(--fc-xl-min)/16)*1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp));

  --space-s-m:  calc(((var(--fc-s-min)/16)*1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m-l:  calc(((var(--fc-m-min)/16)*1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l-xl: calc(((var(--fc-l-min)/16)*1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp));
}

/* ============================
   Utilities
   ============================ */

.pad-s { padding-top: var(--space-s);  padding-bottom: var(--space-s); }
.pad-m { padding-top: var(--space-m);  padding-bottom: var(--space-m); }
.pad-l { padding-top: var(--space-l);  padding-bottom: var(--space-l); }
.pad-xl{ padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

.flow > * + * { margin-top: 1em; }
.text-center { text-align: center; }

.box, .circle {
  width: 75px; height: 75px; display: flex; align-items: center; justify-content: center;
  text-align: center; background-color: var(--green); font-weight: 600; color: var(--dark);
  line-height: 1.2; will-change: transform;
}
.box { border-radius: 12px; }
.circle { border-radius: 99px; }

.flex-row { width: 100%; display: flex; align-items: center; justify-content: space-around; }
.center { display: flex; align-items: center; justify-content: center; }

/* Color helpers */
.green { background-color: var(--green); }
.blue  { background-color: var(--blue); }
.purple{ background-color: var(--purple); }
.red   { background-color: var(--red); }
.orange{ background-color: var(--orange); }

.dark  { background-color: var(--dark); color: var(--light); }
.light { background-color: var(--light); color: var(--dark); }

.text-light { color: var(--light); }
.text-dark  { color: var(--dark); }

.gray, .grey { background-color: var(--grey); }

/* Optional: link color variant inside .light blocks */
.light a { color: var(--green-dark); }

/* Buttons */
button {
  display: inline-block; outline: none; padding: 12px 25px;
  background: var(--dark); border: solid 2px var(--light); color: var(--light);
  text-decoration: none; border-radius: 99px; text-transform: uppercase;
  font-weight: 600; cursor: pointer; line-height: 18px;
}

/* GSAP badges */
.gsap-logo, .gsap-3-logo {
  width: 20vw; position: fixed; bottom: 15px; right: 15px; z-index: 9999;
}
.gsap-logo { max-width: 90px; mix-blend-mode: difference; }
.gsap-3-logo { max-width: 150px; }
.gsap-logo img { width: 100%; }

/* ============================
   Panels
   ============================ */

.panel {
  min-height: 100vh; padding-left: 0.6rem; padding-right: 0.6rem;
  display: flex; align-items: center; justify-content: center;
}

.panel.gray   { background-color: #777;     background-image: var(--gradient-macha); }
.panel.blue   { background-color: #2c7ad2;  background-image: var(--gradient-summer-fair); }
.panel.orange { background-color: #e77614;  background-image: var(--gradient-orange-crush); }
.panel.red    { background-color: #c82736;  background-image: var(--gradient-lipstick); }
.panel.purple { background-color: #8d3dae;  background-image: var(--gradient-purple-haze); }
.panel.green  { background-color: #28a92b;  background-image: var(--gradient-macha); }

.panel.simple { background-image: none !important; }

/* ============================
   Scroll Down Indicator
   ============================ */

.scroll-down {
  position: absolute; bottom: 30px; left: 50%; transform: translate(-50%, 0);
  color: black; font-weight: 400; text-transform: uppercase; font-size: 16px; overflow: visible;
}
.scroll-down .arrow {
  position: relative; top: -4px; margin: 0 auto; width: 20px; height: 20px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSJibGFjayIgZD0iTTQ4My4yLDE5Mi4yYy0yMC41LTIwLjUtNTMuNS0yMC44LTczLjctMC42TDI1NywzNDQuMUwxMDQuNSwxOTEuNmMtMjAuMi0yMC4yLTUzLjItMTkuOS03My43LDAuNgoJYy0yMC41LDIwLjUtMjAuOCw1My41LTAuNiw3My43bDE5MCwxOTBjMTAuMSwxMC4xLDIzLjQsMTUuMSwzNi44LDE1YzEzLjMsMC4xLDI2LjctNC45LDM2LjgtMTVsMTkwLTE5MAoJQzUwMy45LDI0NS43LDUwMy43LDIxMi43LDQ4My4yLDE5Mi4yeiIvPjwvc3ZnPg==);
  background-size: contain;
}

/* ============================
   Code / Pre styles
   ============================ */

pre { --ifm-pre-background: var(--ifm-color-gray-800) !important; --ifm-font-family-monospace: "Fraktion Mono"; }
code {
  border: none; border-radius: 4px; padding: 1rem;
  font-weight: bold; font-size: 1.2rem; vertical-align: baseline;
  background: #28292b; color: #f5f4e6de;
}
code .token.comment { color: #9c9c9c; font-style: italic; }
code .token.string, code .token.inserted { color: #63d55a; }
code .token.number { color: rgb(247,140,108); }
code .token.builtin, code .token.char, code .token.constant, code .token.function { color: rgb(130,170,255); }
code .token.punctuation, code .token.selector { color: rgb(199,146,234); }
code .token.variable { color: rgb(191,199,213); }
code .token.class-name, code .token.attr-name { color: rgb(255,203,107); }
code .token.tag, code .token.deleted { color: rgb(255,85,114); }
code .token.operator { color: rgb(137,221,255); }
code .token.boolean { color: rgb(255,88,116); }
code .token.keyword, code .token.doctype { font-style: italic; color: rgb(199,146,234); }
code .token.namespace { color: rgb(178,204,214); }
code .token.url { color: rgb(221,221,221); }

pre.prettyprint { max-width: 100%; overflow: auto; }
ul pre.prettyprint { margin-left: -0.5rem; }

/* Visually hidden (but accessible) */
.vh {
  position: absolute !important; clip: rect(1px,1px,1px,1px);
  padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden;
}

/* ============================
   Checkboxes
   ============================ */

.checkbox label {
  display: flex; align-items: center; flex-direction: row; justify-content: center;
}
.checkbox label:before {
  content: ""; width: 20px; height: 20px; border-radius: 2px;
  background: var(--light); display: inline-block; margin-right: 10px;
}
.checkbox input[type="checkbox"]:checked ~ label:before {
  background: var(--green) no-repeat center; background-size: 12px 12px;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ1LjcwMSA0NS43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NS43MDEgNDUuNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yMC42ODcsMzguMzMyYy0yLjA3MiwyLjA3Mi01LjQzNCwyLjA3Mi03LjUwNSwwTDEuNTU0LDI2LjcwNGMtMi4wNzItMi4wNzEtMi4wNzItNS40MzMsMC03LjUwNCAgICBjMi4wNzEtMi4wNzIsNS40MzMtMi4wNzIsNy41MDUsMGw2LjkyOCw2LjkyN2MwLjUyMywwLjUyMiwxLjM3MiwwLjUyMiwxLjg5NiwwTDM2LjY0Miw3LjM2OGMyLjA3MS0yLjA3Miw1LjQzMy0yLjA3Miw3LjUwNSwwICAgIGMwLjk5NSwwLjk5NSwxLjU1NCwyLjM0NSwxLjU1NCwzLjc1MmMwLDEuNDA3LTAuNTU5LDIuNzU3LTEuNTU0LDMuNzUyTDIwLjY4NywzOC4zMzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==);
}


/*  Zeplin  */

@font-face {
  font-family: TomatoGrotesk;
  src: local(TomatoGrotesk-Regular),
       url(/path/to/TomatoGrotesk-Regular.woff2) format("woff2"),
       url(/path/to/TomatoGrotesk-Regular.woff) format("woff"),
       url(/path/to/TomatoGrotesk-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}

.PParagraph {
  font-family: TomatoGrotesk;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.63;
  letter-spacing: normal;
}

.PSmall-Caps {
  font-family: TomatoGrotesk;
  font-size: 11px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 1.1px;
}


/*  Font Import  */

@font-face {
  font-family: 'PPCirka_Light';
  src: url('./fonts/PPCirka-Light.woff') format('truetype');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tomato_Grotesk';
  src: url('./fonts/Tomato-Grotesk-Regular.woff') format('truetype');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HKGuise-Extralight';
  src: url('./fonts/HKGuise-Extralight.otf') format('truetype');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Materialicons';
  src: url('./fonts/MaterialIcons-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/*  Typography  */

a { background-color: transparent; }

p {
  color: #797a7a;
  font-family: Tomato_Grotesk;
  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
}

h1 {
  color: #ffffff;
  font-family: HKGuise-Extralight;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 300;
  line-height: 1.4;
  text-align: left;
  margin: 2rem auto;
}

h2 {
  color: black;
  font-family: Tomato_Grotesk;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-style: normal;
  font-weight: 300;
}

h3 {
  color: black;
  font-family: Tomato_Grotesk;
  font-size: max(1.1rem, 1.6rem);
  font-style: normal;
  font-weight: 300;
}

h4 {
  color: black;
  font-family: Tomato_Grotesk;
  font-size: max(1.0rem, 1.25rem);
  font-style: normal;
  font-weight: 300;
}

h5 {
  color: #797a7a;
  font-family: Tomato_Grotesk;
  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
}


/*  Main Content  */

html { height: 100%; }

body {
  background-color: black;
  overflow-x: hidden;
}

section {
  position: relative;
  width: 100%;
}

* {
  margin: 0;
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  border: 0;
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}

ul, ol { margin-top: 0; margin-bottom: 10px; padding-left: 40px; }

ul {
  margin-bottom: 1rem;
  padding-left: 1.25rem;
  line-height: 1.2;
}

li {
  color: #797a7a;
  font-family: Tomato_Grotesk;
  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
  margin-top: .25rem;
  margin-bottom: .25rem;
  padding-left: .5rem;
}

.intro_text {
  width: 60vw;
  margin: auto;
  text-align: left;
  position: relative;
  top: -18vh;
  background: none;
}

.intro_canvas { margin-top: -70px; }

.responsive-section { padding-bottom: 5vh; }

.section-container { width: 60vw; margin: auto; }

.responsive-columns {
  display: flex;
  gap: 2rem;
  color: #ffffff;
  align-items: flex-start;
}

.column { flex: 1; }
.column-left { width: 40%; }
.column-right { width: 60%; }

.page-container { width: 60vw; margin: auto; }

/*  Navigation  */

.w-nav {
  position: relative;
  width: 95%;
  margin: auto;
  background: #dddddd;
  z-index: 1000
}
.w-nav:before,.w-nav:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2
}
.w-nav:after { clear: both }

.w-nav-brand {
  position: relative;
  float: left;
  text-decoration: none;
  color: #333333
}

.w-nav-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  color: #222222;
  padding: 20px;
  text-align: left;
  margin-left: auto;
  margin-right: auto
}
.w-nav-link.w--current { color: #0082f3 }

.w-nav-menu { position: relative; float: right }

[data-nav-menu-open] {
  display: block !important;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #C8C8C8;
  text-align: center;
  overflow: visible;
  min-width: 200px
}

.w--nav-link-open { display: block; position: relative }

.w-nav-overlay {
  position: absolute;
  overflow: hidden;
  display: none;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%
}
.w-nav-overlay [data-nav-menu-open] { top: 0 }

.w-nav[data-animation="over-left"] .w-nav-overlay { width: auto }
.w-nav[data-animation="over-left"] .w-nav-overlay,
.w-nav[data-animation="over-left"] [data-nav-menu-open] {
  right: auto; z-index: 1; top: 0
}

.w-nav[data-animation="over-right"] .w-nav-overlay { width: auto }
.w-nav[data-animation="over-right"] .w-nav-overlay,
.w-nav[data-animation="over-right"] [data-nav-menu-open] {
  left: auto; z-index: 1; top: 0
}

.w-nav-button {
  position: relative;
  float: right;
  padding: 18px;
  font-size: 24px;
  display: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}
.w-nav-button:focus { outline: 0 }
.w-nav-button.w--open { background-color: #C8C8C8; color: white }

.w-nav[data-collapse="all"] .w-nav-menu { display: none }
.w-nav[data-collapse="all"] .w-nav-button { display: block }

.w--nav-dropdown-open,
.w--nav-dropdown-toggle-open { display: block }
.w--nav-dropdown-list-open { position: static }
.w-tab-link.w--current { background-color: #C8C8C8 }

.w-layout-grid {
  display: -ms-grid;
  display: grid;
  grid-auto-columns: 1fr;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
  grid-row-gap: 16px;
  grid-column-gap: 16px;
}

.main-grid {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0px;
  padding-left: 0px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  border: 1px solid transparent;
  text-align: left;
}
.main-grid.nav {
  z-index: 5;
  height: 100%;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  font-weight: 400;
}

.navbar-wrapper {
  position: fixed;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: auto;
  z-index: 150;
  width: 100%;
  height: auto;
}

.navbar {
  height: 5em;
  background-color: transparent;
  font-family: Newyork, sans-serif;
  color: #000;
  margin-top: 2.5%;
}

.nav-grid {
  height: 100%;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  grid-column-gap: 8px;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

/*  Brands  */

.brand {
  z-index: 10;
  display: flex;
  width: 15vh;
  height: auto;
  justify-content: flex-start;
  align-items: center;
}

.about-section-brands {
  gap: 2rem;
  margin-top: 1rem;
  display: flex;
  margin-bottom: 4rem;
  align-items: center;
  justify-content: space-between;
  border-radius: 1rem;
  padding: 0.75rem 2rem;
}
.about-section-brands img { mix-blend-mode: luminosity; }

.nav-menu {
  left: 0%; top: 0%; right: 0%; bottom: auto;
  z-index: 11; display: flex; min-height: 100vh; padding-top: 12vh;
  flex-direction: column; justify-content: space-between; background-color: transparent;
}

.menu-button {
  z-index: 12; display: flex; min-width: auto; padding: 9px 1.25em 9px 20px;
  justify-content: center; align-items: center; color: #000; font-size: 23px; text-transform: uppercase;
}

.menu-button.w--open { background-color: transparent; color: #1c1c1c; }

.text-white { color: #fff; }
.text-white p { color: #fff; }

.text-menu { position: relative; font-size: 16px; font-weight: 600; }
.text-menu.close { display: none; }
.text-menu.on { line-height: 1; letter-spacing: 0.02em; }
.text-menu.on.text-white { font-weight: 600; }

.buttons-wrapper {
  position: relative; display: flex; justify-content: flex-end; align-items: center;
}

.field-label.text-white { padding-bottom: 20px; color: #fff; }

.bg-white { background-color: #fff; }

.small-link.footer.text-black { color: #333; }

.nav-link-wrapper {
  display: flex; flex-direction: column; align-items: center; font-weight: 400; text-align: right;
}

.paragraph-medium.text-white { line-height: 1.25; font-weight: 500; }

.bg-menu {
  position: absolute; right: 0%; z-index: 10; width: 1.2em; height: 1.2em;
  border-radius: 120000px; background-color: #000;
}
.bg-menu.bg-white { background-color: #fff; font-weight: 400; }

.text-nav {
  padding-top: 0em; font-family: HKGuise-Extralight;
  font-size: max(1.875rem, 2.5vw); color: #000000;
}
.text-nav.text-black { font-family: HKGuise-Extralight; font-size: max(1.875rem, 2.5vw); }

.link-block-nav {
  overflow: hidden; height: max(3rem, 4vw); flex: 0 auto; color: #fff; text-decoration: none;
}

.paragraph-large.text-white { padding-bottom: 100px; color: #fff; text-align: center; }
.paragraph-large.text-white.heading { margin-top: 0px; }

.detail-text.regular.text-white { color: #fff; }
.detail-text.text-white { padding-top: 40px; color: #fff; }

.divider-fill.bg-white { background-color: #1c1c1c; }

.text-black { color: #000; }
.xsmall-span.text-black { color: #000; }

.line-divider-cube.bg-white { background-color: hsla(0, 0%, 100%, 0.2); }

.paragraph-xlarge.text-white { max-width: none; color: #fff; letter-spacing: 0em; }
.large-serif.text-white { color: #fff; }
.xxlarge.serif.text-white { display: block; color: #fff; }

.hover-underline.bg-white { background-color: #fff; }
.heading-large-regular.text-black { color: #000; }

#w-node-d9db5edd-f2d2-a6f1-f742-9974fd391e7e-fd391e7b { grid-column-end: 2; grid-column-start: 1; grid-row-end: 2; grid-row-start: 1; justify-self: start; }
#w-node-d9db5edd-f2d2-a6f1-f742-9974fd391e80-fd391e7b { grid-column-end: 4; grid-column-start: 3; grid-row-end: 2; grid-row-start: 1; }
#w-node-d9db5edd-f2d2-a6f1-f742-9974fd391e82-fd391e7b { grid-column-end: 10; grid-column-start: 4; grid-row-end: 2; grid-row-start: 1; }
#w-node-d9db5edd-f2d2-a6f1-f742-9974fd391e90-fd391e7b { grid-column-end: 4; grid-column-start: 3; grid-row-end: 2; grid-row-start: 1; align-self: center; }

/*  Webflow  */

.margin-xxsmall { margin: .5rem; }
.margin-xsmall  { margin: 1rem; }
.margin-bottom { margin-top: 0; margin-left: 0; margin-right: 0; }
.margin-bottom.margin-xxsmall { margin: 0 0 .375rem; }
.margin-bottom.margin-xsmall  { margin: 0 0 .5rem; }

.process-card-content {
  background-color: #1a1b1b;
  border-radius: 0.5rem;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  align-items: stretch;
  padding: 1.25rem;
  transition: background-color .8s cubic-bezier(.165, .84, .44, 1);
  display: flex;
  position: absolute;
  inset: 0;
  overflow: auto;
}

.margin-bottom-wrapper { justify-content: space-between; margin-bottom: 1rem; display: flex; }

.icon-lottie { width: 1.5rem; height: 1.5rem; }

.card-content-layout {
  width: 100%; height: 100%;
  flex-direction: column; justify-content: space-between;
  position: relative; inset: 0;
}

.process-card {
  width: 100%;
  background-color: #1a1b1b;
  border: 1px #1a1b1b;
  border-radius: 17px;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: stretch;
  padding-top: 30vh;
  display: block;
  position: relative;
}

#w-node-_4762bc7f-6beb-995e-d706-a638e161aa37-e161aa2d,
#w-node-_4762bc7f-6beb-995e-d706-a638e161aa42-e161aa2d,
#w-node-_4762bc7f-6beb-995e-d706-a638e161aa4d-e161aa2d,
#w-node-_4762bc7f-6beb-995e-d706-a638e161aa58-e161aa2d {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

/*  About Me  */

.wrapper .content { position: relative; width: 100%; z-index: 1; }
.content { overflow-x: hidden; }
.content .section { width: 100%; height: 100vh; }
.content .section.hero {
  background-image: url(/images/aboutme_inside.webp);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 90% 75%;
}

.image-container {
  width: 100%; height: 100vh; position: absolute; top: 0; left: 0; right: 0; z-index: 2; perspective: 500px; overflow: hidden;
}
.image-container img {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
}

/* Talks (global container + legacy flex row used elsewhere) */

.featured-work {
  position: relative;
  transition: top 0.5s;
  padding-bottom: 1rem;
}

.about-rows-section { align-items: flex-start; margin-top: 5vh; }
.about-rows-content { width: 100%; }

/* Keep global .about-row for non-talks contexts */
.about-row {
  display: flex;
  margin-bottom: 16px;
  align-items: center;
  padding: 2rem;
  border-radius: 0.5rem;
  background-color: #1a1b1b;
  justify-content: space-between;
}
.about-row span {
  width: 30%;
  font-family: HKGuise-Extralight;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  padding-right: 1rem;
}
.about-row span:first-child { width: 50%; }
.about-row span:last-child  { width: 20%; text-align: right; }

.talks_table {
  width: 100%;
  margin: auto;
  padding-top: 10vh;
  padding-bottom: 10vh;
}

/* Main + Specialties */

.heading-style-h6 {
  color: #9d9d9d;
  font-family: HKGuise-Extralight;
  font-size: 1.25rem;
  font-weight: 300;
}

.text-size-small {
  font-family: Tomato_Grotesk;
  color: #936868;
  font-size: 0.688rem;
  font-weight: 400;
}

.w-inline-block { max-width: 100%; display: inline-block }
.overflow-hidden {
  height: 1.2rem; display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden;
}

.margin-small { margin: 1.5rem; }

.margin-bottom.margin-small { margin-bottom: 0.625rem; }
.margin-bottom.margin-small, .margin-bottom.margin-large { margin-top: 0; margin-left: 0; margin-right: 0; }

.margin-bottom.margin-xxsmall { margin: 0 0 .375rem; }
.margin-bottom.margin-xxsmall.padding-left { margin-left: .625rem; }

.padding-left { padding-top: 0; padding-bottom: 0; padding-right: 0; }

.case-item-list {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  justify-items: start;
  display: grid;
}

.case-item {
  width: 100%;
  background-color: white;
  border-radius: 25px;
  flex-direction: column;
  align-items: stretch;
  padding: .625rem .625rem .625rem;
  transition: background-color .8s cubic-bezier(.165, .84, .44, 1);
  display: flex;
}

.arrow-outward {
  color: #797a7a;
  font-family: Materialicons, sans-serif;
  font-size: 1.25rem;
}

.case-item-arrow {
  z-index: 3;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  padding-left: .625px;
  padding-right: 3.625px;
  display: flex;
  position: absolute;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.case-item-link { text-decoration: none; position: static; }

.product-image-wrapper {
  width: 100%;
  padding-top: 80%;
  position: relative;
  overflow: hidden;
}

.case-item-details {
  width: 100%;
  align-items: center;
  padding-left: .65rem;
  display: flex;
  position: absolute;
}

.case-item-image {
  width: 100%; height: 100%; position: absolute; inset: 0;
}

.specialities-section {
  z-index: 100; position: relative; padding-bottom: 2rem; transition: top 0.5s;
}

/*  Specialties  */

.about-feature-gallery .gallery {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  justify-items: start;
  display: grid;
}
.about-feature-gallery .gallery .gallery-item { width: 100%; }
.about-feature-gallery .gallery .gallery-item img {
  height: 200px; width: 100%; margin-bottom: 2.5vh; object-fit: cover; border-radius: 0.5rem;
}

.about-me-text { width: 60vw; margin: auto; margin-top: -20vh; }
.cta-text { width: 80%; margin: auto; text-align: center; }
.my-work-intro { width: 80%; margin: auto; text-align: center; padding-top: 5%; padding-bottom: 2.5%; }

/* Page Loader */

.js .loading::before,
.js .loading::after { content: ''; position: fixed; z-index: 1000; }
.js .loading::before { top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); }
.js .loading::after {
  top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  opacity: 0.4; background: var(--color-link); animation: loaderAnim 0.7s linear infinite alternate forwards;
}

/* Scroll Indicator */

.Indicator__scrollBox {
  position: fixed; right: 2%; bottom: 75px;
  transform: rotate(-90deg) translate(80%, 500%) translate3d(0, 0, 0);
  display: flex; align-items: center; z-index: 125;
}
.Indicator__scrollBox > div {
  background: rgba(255, 255, 255, 0.8); width: 100px; height: 2px; margin-right: 15px;
}
.Indicator__scroll {
  background-color: #685456; height: 100%; margin-left: auto;
}

/* TOP Button */

.btn_top {
  position: absolute; right: 15px; bottom: 0;
  font-family: Tomato_Grotesk; color: white; text-decoration: none; text-transform: uppercase;
  background-color: #1a1b1b; padding: 15px 15px; border-radius: 1rem;
  transition: 0.6s cubic-bezier(0.01, 1.69, 0.99, 0.94);
  cursor: pointer; text-align: center; vertical-align: middle; z-index: 200;
}
.btn_top--clicked {
  transition: 0.6s cubic-bezier(0.01, 1.69, 0.99, 0.94);
  padding: 15px 2px; width: 50px; color: transparent; z-index: -10;
}
.color {
  right: 45px; bottom: 30px; display: block; width: 0; height: 0;
  transform: translate(50%, 50%); position: absolute; transition: 0.8s ease;
  border-radius: 50%; background-color: transparent;
}
.expanded { width: 450%; padding-bottom: 450%; height: auto; }
.color--blue  { background-color: #000; transition-delay: 0.25s; }
.color--orange{ background-color: #999; transition-delay: 0.5s; }
.color--green { background-color: #666; transition-delay: 0.75s; }
.color--white { background-color: #444; transition-delay: 1s; }

/*  Attributes  */

@layer normalize foundation;

@layer foundation {
  .content {
    align-self: end;
    width: 800px;
    margin: 0 auto 8rem;
    position: relative;
  }

  @keyframes blink {
    0%, 46%, 48%, 50%, 100% { scale: 1 1; }
    47%, 49% { scale: 1 0.01; }
  }
}

@layer attributes {

  .attribute {
    font-family: "Tomato_Grotesk", system-ui, -apple-system, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-weight: 300;
    line-height: 1;
    letter-spacing: .02em;
  }

  .attribute {
    --font-size: max(1.25rem, 1.5vw);
    --hue: 10; --ox: 0; --oy: 0; --dx: 0; --dy: 0; --or: 0; --dr: 0;
    display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--font-size);
    border: 1px solid hsl(var(--hue) 100% 80%);
    padding: 0.25rem 0.5rem; border-radius: 6px; position: absolute; bottom: 0%; left: 50%;
    translate: -50% 0%; background: linear-gradient(hsl(var(--hue) 100% 90% / 0.75), #0000 50%), hsl(var(--hue) 100% 80%);
    color: hsl(var(--hue) 100% 40% / 0.8);
    box-shadow: 1px -1px 0.5rem 0rem hsl(var(--hue) 100% 30%) inset;
    transform: translate(var(--ox), var(--oy)) rotate(var(--or))
               translate(var(--dx), var(--dy)) rotate(var(--dr));
  }

  .attribute:nth-of-type(1) { --hue: 10;  --ox: -25%; --oy: 50%;  --or: 7deg;  --dx: -100vw; --dr: -190deg; --dy: -50vh; }
  .attribute:nth-of-type(2) { --hue: 60;  --ox: 56%;  --oy: -48%; --or: 12deg; --dx: 80vw;  --dr: 200deg;  --dy: 20vh; }
  .attribute:nth-of-type(3) { --hue: 180; --ox: -35%; --oy: -35%; --or: -10deg; --dx: -40vw; --dr: 60deg;  --dy: -150vh; }
  .attribute:nth-of-type(4) { --hue: 120; --ox: 18%;  --oy: 35%;  --or: 15deg; --dx: 10vw;  --dr: -290deg; --dy: -120vh; }
  .attribute:nth-of-type(5) { --hue: 210; --ox: 56%;  --oy: -16%; --or: 10deg; --dx: 80vw;  --dr: 230deg;  --dy: -80vh; }
  .attribute:nth-of-type(6) { --hue: 280; --ox: 5%;   --oy: 15%;  --or: -8deg; --dx: -120vw;--dr: -540deg; --dy: 40vh; }

  .attribute svg { width: var(--font-size); stroke-width: 2; }
}

@layer scrolls {
  @supports (animation-timeline: scroll()) {
    header2 {
      view-timeline-name: --header;
      position: relative;
      bottom: 125px;
      left: 32%;
    }

    .attribute {
      animation: expand both linear;
      animation-timeline: --header;
      animation-range: exit;
      transform: translate(var(--ox), var(--oy)) rotate(var(--or))
                 translate(0, 0) rotate(0);
    }

    @keyframes expand {
      to {
        transform: translate(var(--ox), var(--oy)) rotate(var(--or))
                   translate(var(--dx), var(--dy)) rotate(var(--dr));
      }
    }
  }
}

/*  Responsive  */

@media only screen and (max-width: 768px) {
  .intro_text {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    top: -25vh;
    padding: 0 5vw;
  }

  .attributes { position: absolute; bottom: 14vh; left: 45vw; }

  .case-item-list {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    align-items: start;
    justify-items: start;
    display: grid;
  }

  .about-feature-gallery .gallery {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    align-items: start;
    justify-items: start;
    display: grid;
  }

  .talks_table {
    width: 100%;
    margin: auto;
    padding-top: 5vh;
    padding-bottom: 5vh;
  }

  .process-card { padding-top: 12.5rem; }

  .section-container, .page-container { width: 95vw; margin: auto; }

  .responsive-columns { flex-direction: column; }
  .column-left, .column-right { width: 100%; }

  .about-me-text { width: 95%; margin-top: -20vh; }
  .cta-text { width: 95%; }
  .my-work-intro { width: 95%; }
}

@media screen and (orientation: landscape) and (max-width: 768px) {
  .attributes { position: absolute; bottom: 8vh; left: 45vw; }
}
@media screen and (orientation: portrait) and (max-width: 768px) {
  .content .section.hero {
    background-image: url(/images/v-illustration-kw.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 90% 75%;
  }
}

/* ============================
   Talks & Presentations (scoped, Option A)
   ============================ */

.talks_table h3 {
  color: var(--light);
  text-align: center;
  font-family: "HKGuise-Extralight", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 300;
  line-height: 1.4;
  margin: 0 0 .5rem;
}

.talks_table .talks-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 2rem;
  border-radius: 12px;
  background: var(--grey-dark);
}

.talks_table .talks-row span {
  color: var(--light);
  font-family: "Tomato_Grotesk", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* column alignment inside the scoped grid */
.talks_table .talks-row span:first-child  { justify-self: start;  text-align: left; }
.talks_table .talks-row span:nth-child(2) { justify-self: center; text-align: center; }
.talks_table .talks-row span:last-child   { justify-self: end;    text-align: right; }

@media (max-width: 640px) {
  .talks_table .talks-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title title"
      "event year";
    row-gap: .5rem;
  }
  .talks_table .talks-row span:first-child  { grid-area: title; justify-self: start;  text-align: left; }
  .talks_table .talks-row span:nth-child(2) { grid-area: event; justify-self: start;  text-align: left; }
  .talks_table .talks-row span:last-child   { grid-area: year;  justify-self: end;    text-align: right; }
}


/* === Talks & Presentations — restore original pill look (scoped) === */
.talks_table {
  width: min(1200px, 92vw);
  margin-inline: auto;
}

.talks_table .about-row {
  /* grid gives you clean center/right alignment but keeps the old visual */
  display: grid;
  grid-template-columns: 1.6fr 1fr auto; /* title | event | year */
  align-items: center;
  gap: 2rem;

  margin: 0 0 1rem;
  padding: 1.75rem 2rem;

  border-radius: 16px;
  background: #1e1f1f; /* dark pill */
  border: 1px solid rgba(255,255,255,.06);
  box-shadow:
    0 1px 0 rgba(0,0,0,.6) inset,
    0 0 0 1px rgba(0,0,0,.4); /* subtle depth like before */
}

/* neutralize global widths from legacy .about-row */
.talks_table .about-row span {
  width: auto;
  margin: 0;
  padding: 0;

  color: #f1efdf;
  font-family: "HKGuise-Extralight", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: 300;
  line-height: 1.35;
  font-size: clamp(1.0rem, 2vw, 1.5rem); /* matches the larger look */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* alignment to match the old layout */
.talks_table .about-row span:first-child  { justify-self: start;  text-align: left; }
.talks_table .about-row span:nth-child(2) { justify-self: start; text-align: left; }
.talks_table .about-row span:last-child   { justify-self: end;    text-align: right; opacity: .9; }

/* spacing above/below the section title like before */
.talks_table h3 {
  color: #f1efdf;
  text-align: center;
  font-family: "HKGuise-Extralight", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(1.25rem, 3.2vw, 2.25rem);
  line-height: 1.2;
  margin: 0 0 1.5rem;
}

/* mobile: stack title on its own row; event/year below */
@media (max-width: 640px) {
  .talks_table .about-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title title"
      "event year";
    row-gap: .5rem;
    padding: 1.25rem 1rem;
  }
  .talks_table .about-row span:first-child  { grid-area: title; justify-self: start;  text-align: left; }
  .talks_table .about-row span:nth-child(2) { grid-area: event; justify-self: start;  text-align: left; }
  .talks_table .about-row span:last-child   { grid-area: year;  justify-self: end;    text-align: right; }
}


/* Project Highlights */
.project-intro h3 {
  color: #000;
  text-align: center;
  font-family: "HK Guise Extralight", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0 0 0.5rem;
}

.project-intro h4 {
  color: #000;
  text-align: center;
  font-family: "Tomato_Grotesk", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}

/* Case Studies */
.case-item p {
  color: #373737;
  font-family: "Tomato_Grotesk", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0.5rem 0 0; /* optional spacing tweak */
}


/* About Section */
.about-rows-section .about-row.responsive-columns {
  display: flex;
  align-items: flex-start;  /* ensures both columns align at the top */
  gap: 2rem;                /* optional: spacing between columns */
}

/* reset heading margins so both align cleanly */
.about-rows-section h5 {
  margin-top: 0;
}

/* Section headers (Skills:, Education:, Career Highlights:) */
.subsection-title {
  color: #DEDEDE;
  font-family: "Tomato_Grotesk", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0 0 0.5rem;
}

.subsection-header {
  color: #996F42;
  font-family: "Tomato_Grotesk", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0 0 0.25rem; /* optional: add small spacing below */
}

.detail-text {
  color: #797A7A;
  font-family: "Tomato_Grotesk", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0.25rem 0 0.75rem; /* keep spacing if you want consistent vertical rhythm */
}