/* Theme base styles */

/* Settings
Curio design tokens (colours, type, spacing) exposed as CSS custom properties,
driven by the editable HubSpot theme fields. Must load first.
*/

/* ==========================================================================
   Curio design tokens
   --------------------------------------------------------------------------
   Single source of truth for the brand, exposed as CSS custom properties.
   Values are driven by the editable HubSpot theme fields (Settings > Theme),
   with the Curio brand hex as a fallback so nothing is ever truly hardcoded.
   Field names match the build spec (docs/curio-hubspot-theme-build-spec.md, s1).
   Change a colour or font in the theme editor and it flows everywhere.
   ========================================================================== */

:root {
  /* --- Core brand ------------------------------------------------------- */
  --color-evergreen:  #005439;
  --color-mid-green:  #6C7E64;
  --color-egg-shell:  #FCF6EF;

  /* --- Functional ------------------------------------------------------- */
  --color-off-white:  #E2E6E9;
  --color-charcoal:   #414141;
  --color-black:      #000000;
  --color-white:      #FFFFFF;

  /* --- Accent (use sparingly — max ~20% of any view) -------------------- */
  --color-yellow:     #FFCC73;
  --color-blue:       #16455D;
  --color-orange:     #F65536;

  /* --- Semantic aliases (use these in components) ----------------------- */
  --bg-page:          var(--color-egg-shell);
  --bg-panel:         var(--color-evergreen);
  --bg-subtle:        var(--color-off-white);
  --text-default:     var(--color-black);
  --text-muted:       var(--color-charcoal);
  --text-on-dark:     var(--color-white);
  /* Mid Green, per curio-design-system: "Borders: thin rules in Charcoal or
     Mid Green; never bold or decorative". This was Off White, which is the
     token for subtle backgrounds and card fills, not for rules — as a border
     it measures 1.17:1 against Egg Shell and 1.26:1 against White, i.e. it
     paints but cannot be seen. Mid Green gives 4.07:1 on Egg Shell while
     staying calm at 1px. Charcoal (9.51:1) is the heavier option and is
     reserved for rules that should read as deliberate structure.
     Overridden to Off White on Evergreen panels, where Mid Green drops to
     2.07:1 — see .curio-panel--evergreen in components/_curio.css. */
  --border-subtle:    var(--color-mid-green);
  --rule:             var(--color-mid-green);

  /* --- Typography ------------------------------------------------------- */
  /* "Curio Manrope" is the self-hosted variable font declared in base.html.
     It leads the stack only while the theme font field is still Manrope, so
     an editor who picks another font in the theme settings still gets it. */
  --font-body:        "Curio Manrope", Manrope, sans-serif;
  --font-heading:     "Curio Manrope", Manrope, sans-serif;
  --fw-h1: 200;   /* ExtraLight — hero headlines */
  --fw-h2: 200;   /* ExtraLight — section headings (per David's feedback, 2 Aug) */
  --fw-h3: 700;   /* Bold — nav/badge/tab/chip UI text (NOT content headings — see --fw-heading-sub) */
  --fw-heading-sub: 200; /* ExtraLight — content-block sub-headings (card titles, etc.) */
  --fw-body: 400; /* Regular — body copy         */
  --fw-link: 300; /* Light — nav / text links    */

  /* Editorial type scale (fluid, restrained) */
  /* Restrained, McKinsey-register scale (measured: their headings ~36px). */
  --fs-display: clamp(2.25rem, 1.5rem + 2.6vw, 3rem);      /* 36 -> 48px */
  --fs-h1:      clamp(1.875rem, 1.4rem + 1.5vw, 2.5rem);   /* 30 -> 40px */
  --fs-h2:      clamp(1.5rem, 1.25rem + 1vw, 2rem);        /* 24 -> 32px */
  --fs-h3:      clamp(1.125rem, 1rem + 0.4vw, 1.375rem);   /* 18 -> 22px */
  --fs-lead:    1rem;                                      /* 16px, per David's feedback (2 Aug) */
  --fs-body:    1rem;                                      /* 16px, per David's feedback (2 Aug) */
  --fs-small:   0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.6;
  --tracking-eyebrow: 0.12em;

  /* --- Spacing / layout ------------------------------------------------- */
  --content-width:   1240px;
  /* Fixed 50px top/bottom for every content block/section, per David's
     feedback (2 Aug). Applies uniformly via .curio-section and every module
     that reads this token directly (hero, hero-product, ai-accelerant-band,
     cta-band, proof-band, etc). */
  --section-spacing: 50px;
  --gutter: clamp(1.5rem, 1rem + 3vw, 4rem); /* ~24px -> 64px */

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* --- Radius & lines (calm, editorial — no heavy shadows/gradients) ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --border-hairline: 1px;
}

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/



/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0 1rem;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* Elements
Base HTML elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

body {
  background-color: var(--bg-page);
  color: var(--text-default);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

/* Paragraphs */

p {
  font-size: var(--fs-body);
  margin: 0 0 1.4rem;
}

/* Anchors */

/* On brand by default (CUR20-45, 7 Oct 2026). This rule used to set only the
   cursor, so every link without its own class fell back to the browser's
   blue. Evergreen text with a fine Mid Green underline that darkens on hover.
   Buttons, cards and nav set their own colour with a class, which beats this
   element selector, so they are unchanged. */
a {
  cursor: pointer;
  color: var(--color-evergreen);
  text-decoration: underline;
  text-decoration-color: var(--color-mid-green);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.15s ease;
}

a:hover {
  text-decoration-color: currentColor;
}

.curio-panel--evergreen a {
  color: var(--text-on-dark);
  text-decoration-color: currentColor;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--text-default);
  line-height: var(--lh-heading);
  margin: 0 0 1.4rem;
  /* Sentence case is a Curio rule — enforced in copy, not text-transform */
}

h1 {
  font-weight: var(--fw-h1);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

h2 {
  font-weight: var(--fw-h2);
  font-size: var(--fs-h2);
}

h3 {
  font-weight: var(--fw-heading-sub);
  font-size: var(--fs-h3);
}

/* Lists */

ul,
ol {
  margin: 0 0 1.4rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0;
}

ul.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  border-left: 2px solid;
  margin: 0 0 1.4rem;
  padding-left: 0.7rem;
}

/* Horizontal rules */

hr {
  border: none;
  border-bottom: 1px solid #CCC;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}
button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  color: #E6E6E6;
}

/* No button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}
/* Fields */

.hs-form-field {
  margin-bottom: 1.4rem;
}

/* Labels */

form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* The <span id="hs_cos_wrapper_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form" style="" data-hs-cos-general-type="widget" data-hs-cos-type="form" ><h3 id="hs_cos_wrapper_form_280604365_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text"></h3>

</span> tag always prints an <h3 class="form-title">, empty when the
   form has no title. None of ours do, and an empty heading is announced by
   screen readers, so take it out of the page. */
.form-title:empty {
  display: none;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.7rem;
  width: 100%;
}

form textarea {
  resize: vertical;
}

form fieldset {
  max-width: 100% !important;
}

/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.35rem;
}

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

/* Validation */

.hs-form-required {
  color: #EF6B51;
}

.hs-input.invalid.error {
  border-color: #EF6B51;
}

.hs-error-msg {
  color: #EF6B51;
  margin-top: 0.35rem;
}

/* Submit button

   These rules used to set cursor, display, text-align, transition and
   white-space and nothing else, which is reset-level and carries no brand. The
   result was that every HubSpot form button on the site rendered as a raw
   browser button except the footer's, which has had its own scoped rule in
   _curio.css all along. The contact form and the in-page newsletter were both
   shipping grey system buttons (3 Oct 2026).

   This mirrors .curio-btn--primary rather than inventing a second button: same
   tokens, same radius, same padding, same hover and focus treatment. Keep the
   two in step. inline-block rather than the component's inline-flex, because
   an <input> cannot lay its value out as a flex child and a form button has no
   icon to space.

   The footer keeps its own light-on-dark treatment: .curio-footer__newsletter
   .hs-button is more specific than these selectors, so it still wins. */

form input[type=submit],
form .hs-button {
  display: inline-block;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--fw-h3);
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: var(--border-hairline) solid var(--color-evergreen);
  background: var(--color-evergreen);
  color: var(--color-white);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.18s ease;
}

form input[type=submit]:hover,
form .hs-button:hover {
  background: #004430;
  transform: translateY(-1px);
}

form input[type=submit]:focus-visible,
form .hs-button:focus-visible {
  outline: 2px solid var(--color-evergreen);
  outline-offset: 3px;
}

/* On an evergreen panel the primary treatment disappears into the background,
   so invert it the way .curio-btn--light does. The newsletter module offers an
   evergreen background as a constrained choice, so this is a real case. */

/* Scoped to .nl--evergreen, the newsletter module's own variant class, and NOT
   to .curio-panel--evergreen. The footer sits inside an evergreen panel too,
   and ".curio-panel--evergreen form .hs-button" (0,2,1) out-specifies
   ".curio-footer__newsletter .hs-button" (0,2,0), so the broader selector
   silently repainted the footer's white button egg shell. Caught by reading
   the computed style; in a screenshot both just look pale. */

.nl--evergreen form input[type=submit],
.nl--evergreen form .hs-button {
  background: var(--color-egg-shell);
  color: var(--color-evergreen);
  border-color: var(--color-egg-shell);
}

.nl--evergreen form input[type=submit]:hover,
.nl--evergreen form .hs-button:hover {
  background: var(--color-white);
}

.nl--evergreen form input[type=submit]:focus-visible,
.nl--evergreen form .hs-button:focus-visible {
  outline-color: var(--color-egg-shell);
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


  /* Search button input field and suggestions */
  .body-container-wrapper .hs-search-field__button {
    padding: 15px;
  }

  .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
    margin-left: 6px;
    margin-bottom: 0;
  }

  .body-container-wrapper .hs-search-field__button svg {
    height: 15px;
    fill: #fff;
  }

  .body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
    padding: 10px;
  }

  .body-container-wrapper .hs-search-field__suggestions li a {
    color: #494A52;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color 0.3s;
  }

/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

/* Header DND sections */

.header .dnd-section {
  padding: 0;
}

/* Header container */

.header__container {
  display: flex;
  justify-content: space-between;
}

.header__row-1 {
  padding-top: 1rem;
}

.header__row-1,
.header__row-2 {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

@media (max-width: 1150px) and (min-width: 767px) {
  .header__column {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .header__container {
    flex-direction: column;
    padding: 1rem 0 0;
  }

  .header__column {
    position: relative;
  }

  .header__row-1 {
    padding-top: 0;
  }

  .header__row-2 {
    justify-content: center;
    padding: 1.05rem;
  }
}

/* Navigation skipper */

.header__skip {
  height: 1px;
  left: -1000px;
  overflow: hidden;
  position: absolute;
  text-align: left;
  top: -1000px;
  width: 1px;
}

.header__skip:hover,
.header__skip:focus,
.header__skip:active {
  height: auto;
  left: 0;
  overflow: visible;
  top: 0;
  width: auto;
}

/* Logo */

.header__logo {
  align-items: center;
  display: flex;
  height: auto;
  margin-right: auto;
  max-width: 200px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .header__logo {
    margin: 0 auto;
    width: 100%;
  }
}

.header__logo img {
  max-width: 100%;
}

.header__logo .logo-company-name {
  font-size: 1.167rem;
  margin-top: 0.7rem;
}

.header__logo--main {
  padding-top: 1rem;
}

/* Search bar */

.header__search {
  padding: 0 1rem;
  width: auto;
}



  .hs-search-field__form {
    position: relative;
  }

  .header__search .hs-search-field__label {
    flex-basis: auto;
  }



.header__search .hs-search-field__input {
  
  height: 45px;
  padding: 0 0.7rem;
}



  .header__search .hs-search-field__button {
    padding: 0;
    fill: #000;
    background-color: transparent;
    border: none;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
  }

  .header__search .hs-search-field__button svg {
    height: 25px;
  }


.header__search .hs-search-field--open .hs-search-field__input {
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  max-width: 100%;
}

.header__search .hs-search-field--open .hs-search-field__suggestions {
  background-color: #FFF;
  border: 2px solid #D1D6DC;
  border-radius: 0 0 6px 6px;
  border-top-width: 1px;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.header__search .hs-search-field__suggestions li {
  border-top: 1px solid #D1D6DC;
  font-size: 0.875rem;
}

.header__search .hs-search-field__suggestions li a {
  color: #494A52;
  padding: 0.35rem 0.7rem;
  text-decoration: none;
  transition: background-color 0.3s;
}

.header__search .hs-search-field__suggestions #results-for {
  display: none;
}

@media (min-width: 767px) {
  .header__search form {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

  .header__search label {
    margin: 0 1rem 0 0;
  }

  .header__search .hs-search-field__input {
    width: auto;
  }
}

@media (max-width: 767px) {
  .header__search {
    border-top: 2px solid #CED4DB;
    order: 1;
    padding: 1.05rem;
  }
}

/* Language switcher */

.header__language-switcher {
  cursor: pointer;
  padding-right: 1.4rem;
}

.header__language-switcher .lang_switcher_class {
  position: static;
}

.header__language-switcher .lang_list_class {
  border: 2px solid;
  border-radius: 3px;
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
  display: block;
  left: calc(100% - 24px);
  opacity: 0;
  min-width: 100px;
  padding-top: 0;
  text-align: left;
  top: 100%;
  transition: opacity 0.3s;
  visibility: hidden;
}

.header__language-switcher:hover .lang_list_class,
.header__language-switcher:focus .lang_list_class {
  opacity: 1;
  transition: opacity 0.3s;
  visibility: visible;
}

.header__language-switcher .lang_list_class:before {
  left: 70%;
  top: -25px;
}

.header__language-switcher .lang_list_class:after {
  left: 70%;
  top: -22px;
}

.header__language-switcher .lang_list_class.first-active::after {
  top: -22px;
  transition: 0.3s;
}

.header__language-switcher .lang_list_class li {
  border: none;
  font-size: 18px;
  padding: 0.35rem 0.7rem;
}

.header__language-switcher .lang_list_class li:first-child {
  border-radius: 6px 6px 0 0;
  border-top: none;
}

.header__language-switcher .lang_list_class li:last-child {
  border-bottom: none;
  border-radius: 0 0 6px 6px;
}

.header__language-switcher .lang_list_class li:hover {
  transition: background-color 0.3s;
}

.header__language-switcher--label {
  display: flex;
  position: relative;
}

.header__language-switcher--label-current {
  align-items: center;
  display: flex;
  font-size: 0.75rem;
  margin-bottom: 0.175rem;
  margin-left: 0.7rem;
}

.header__language-switcher--label-current:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #494A52;
  content: "";
  display: block;
  height: 0px;
  margin-left: 0.7rem;
  margin-top: 0.175rem;
  width: 0px;
}

@media (max-width: 767px) {
  .header__language-switcher {
    border-top: 2px solid #CED4DB;
    padding-left: 1.05rem;
    padding-right: 0;
  }

  .header__language-switcher .lang_list_class {
    border: none;
    box-shadow: unset;
    display: block;
    left: 30px;
    opacity: 1;
    padding: 0 1.05rem;
    top: 0;
    visibility: visible;
  }

  .header__language-switcher .lang_list_class li {
    background-color: inherit;
    font-size: 0.917rem;
  }

  .header__language-switcher--label-current {
    display: none;
  }

  .header__language-switcher .globe_class {
    background-image: none;
  }

  .header__language-switcher .lang_list_class li:hover{
    background-color: inherit;
  }

  .header__language-switcher .lang_list_class:before,
  .header__language-switcher .lang_list_class:after {
    content: none;
  }
    /* V1 lang switcher updates to keep "in line" w/ v0 mobile styles */
    .header__language-switcher .hs-language-switcher__menu {
        display: block;
        box-shadow:none!important;
        background: transparent;
    }
    .header__language-switcher .hs-language-switcher__menu a {
        font-size: 20px!important;
    }
    .header__language-switcher .hs-language-switcher__button {
        display: none;
    }
  }

/* Navigation */

#nav-toggle {
  display: none;
}

/* Mobile toggles */

@media (max-width: 767px) {
  .header__navigation,
  .header__search,
  .header__language-switcher {
    display: none;
    width: 100%;
  }

  .header__navigation.open,
  .header__search.open,
  .header__language-switcher.open {
    background-color: #F8FAFC;
    display: block;
    left: 0;
    min-height: calc(100vh - 115px);
    position: absolute;
    right: 0;
    top: 75px;
    z-index: 2;
  }

  .header__navigation--toggle,
  .header__search--toggle,
  .header__language-switcher--toggle,
  .header__close--toggle {
    cursor: pointer;
    margin: 0 5vw;
    position: relative;
  }

  .header__navigation--toggle.hide,
  .header__search--toggle.hide,
  .header__language-switcher--toggle.hide {
    display: none;
  }

  .header__navigation--toggle.open,
  .header__search--toggle.open,
  .header__language-switcher--toggle.open {
    display: block;
    margin-left: 0;
    margin-right: auto;
  }

  .header__navigation--toggle:after,
  .header__search--toggle:after,
  .header__language-switcher--toggle:after {
    display: none;
    font-size: 1.083rem;
    font-weight: 600;
    position: absolute;
    left: 40px;
    text-transform: uppercase;
    top: -10px;
  }

  .header__navigation--toggle.open:after,
  .header__search--toggle.open:after,
  .header__language-switcher--toggle.open:after {
    display: block;
    word-break: normal;
  }

  .header__navigation--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5oYW1idXJnZXI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGcgaWQ9ImhhbWJ1cmdlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iR3JvdXAiIHN0cm9rZT0iIzQ5NEE1MiIgc3Ryb2tlLXdpZHRoPSIzIj4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxLjUiIHk9IjEuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNCIgeD0iMS41IiB5PSI5LjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS1Db3B5LTUiIHg9IjEuNSIgeT0iMTcuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__navigation--toggle:after {
    content: "Menu";
  }

  .header__language-switcher--toggle {
    background-image: url(//static.hsappstatic.net/cos-LanguageSwitcher/static-1.1/img/globe.png);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__language-switcher--toggle:after {
    content: "Language";
  }

  .header__search--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__search--toggle:after {
    content: "Search";
  }

  .header__close--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjE5cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5jbG9zZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iY2xvc2UiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgLTEuMDAwMDAwKSIgc3Ryb2tlPSIjNDk0QTUyIiBzdHJva2Utd2lkdGg9IjMiPiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjAwMDAwMCwgMTAuNTAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMC4wMDAwMDAsIC0xMC41MDAwMDApICIgeD0iLTAuNSIgeT0iMTAuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCAxMC41MDAwMDApIHJvdGF0ZSg0NS4wMDAwMDApIHRyYW5zbGF0ZSgtMTAuMDAwMDAwLCAtMTAuNTAwMDAwKSAiIHg9Ii0wLjUiIHk9IjEwLjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-size: 110%;
    display: none;
    height: 25px;
    margin-right: 0;
    width: 25px;
  }

  .header__close--toggle.show {
    display: block;
  }
}
/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}
/* ==========================================================================
   Curio shared components
   --------------------------------------------------------------------------
   Primitives shared across modules: container, section rhythm, eyebrow,
   buttons, full-width panels, cards. Everything reads from the design tokens
   (css/settings/_tokens.css). Module-specific layout lives in each module.
   ========================================================================== */

/* --- Layout ------------------------------------------------------------- */
.curio-container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.curio-section {
  padding-block: var(--section-spacing);
}

/* Full-bleed panel that still aligns its inner content to the container.

   Every section-level module emits exactly one of these four, including
   --egg-shell, which paints the page background. Egg shell used to emit no
   class at all, on the reasoning that it already matches the page. That left
   two stacked egg-shell sections with nothing between them and no way for the
   separator below to tell where one ended and the next began. */
.curio-panel--evergreen {
  background: var(--bg-panel);
  color: var(--text-on-dark);
  /* Flip the hairline for dark panels. Mid Green is the border tone on light
     backgrounds but only reaches 2.07:1 on Evergreen; Off White gets 7.19:1
     here. Custom properties inherit through the DOM, so every bordered
     element inside an Evergreen panel picks this up without each module
     needing its own dark-panel rule. */
  --border-subtle: var(--color-off-white);
}
.curio-panel--subtle {
  background: var(--bg-subtle);
  color: var(--text-default);
}
.curio-panel--white {
  background: var(--color-white);
  color: var(--text-default);
}
.curio-panel--egg-shell {
  background: var(--bg-page);
  color: var(--text-default);
}

/* Section separator.

   One hairline at the top of every section, so the boundary reads whatever
   the two neighbouring backgrounds happen to be. This replaces the old rule,
   which lived only on --subtle: a section only got a separator if it was the
   off-white one, so egg-shell-on-egg-shell and white-on-white ran together,
   and the four modules that painted their own background in scoped CSS
   (hero, cta-band, proof-band, testimonial) never got one at all.

   --border-subtle rather than --rule, because Evergreen panels re-point it to
   Off White above. A custom property set on an element applies to that
   element's own declarations, so the dark panels get the light hairline and
   the light panels get Mid Green, from this one rule. */
.curio-panel--evergreen,
.curio-panel--subtle,
.curio-panel--white,
.curio-panel--egg-shell {
  border-top: var(--border-hairline) solid var(--border-subtle);
}

/* No rule on the first section of a page: the sticky header already carries a
   bottom border, and the two together read as a double line. HubSpot numbers
   the drag-and-drop rows, so row-number-1 is the top section whatever module
   the editor has put there. Deliberately not scoped to .curio-dnd, because
   case-studies-index.html names its hero area cs_hero_area and so carries no
   such class; row numbering is the one thing every dnd area does have.

   The footer is excluded too. It borrows curio-panel--evergreen for the dark
   token treatment while overriding the background to Charcoal, so it picks up
   these panel rules without being a content section. It is page chrome, and
   the colour change is already the boundary. */
.row-number-1 [class*="curio-panel--"],
.curio-footer {
  border-top: 0;
}
.curio-panel--evergreen h1,
.curio-panel--evergreen h2,
.curio-panel--evergreen h3 { color: var(--text-on-dark); }

/* --- Eyebrow / section labels ------------------------------------------- */
.curio-eyebrow {
  display: block;
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-h3);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-evergreen);
}
.curio-panel--evergreen .curio-eyebrow { color: var(--color-white); }

/* --- Section heading ---------------------------------------------------- */
.curio-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 60ch;
  margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem);
}
.curio-section__title {
  font-weight: var(--fw-h2);
  font-size: var(--fs-h2);
  letter-spacing: -0.01em;
  color: var(--color-evergreen);
  margin: 0;
}
.curio-section__intro {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  max-width: 46ch;
}

/* --- Buttons (pill) ----------------------------------------------------- */
.curio-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: var(--fw-h3);
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: var(--border-hairline) solid var(--color-evergreen);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.18s ease;
  text-decoration: none;
}
.curio-btn:hover { transform: translateY(-1px); }
.curio-btn:focus-visible { outline: 2px solid var(--color-evergreen); outline-offset: 3px; }

.curio-btn--primary { background: var(--color-evergreen); color: var(--color-white); }
.curio-btn--primary:hover { background: #004430; }

.curio-btn--ghost { background: transparent; color: var(--color-evergreen); }
.curio-btn--ghost:hover { background: var(--color-evergreen); color: var(--color-white); }

/* On an evergreen panel */
.curio-panel--evergreen .curio-btn--light,
.curio-btn--light {
  background: var(--color-egg-shell);
  color: var(--color-evergreen);
  border-color: var(--color-egg-shell);
}
.curio-btn--light:focus-visible { outline-color: var(--color-egg-shell); }

/* --- Cards -------------------------------------------------------------- */
/* Soft shadow, not just a hairline border — flat bordered cards read as
   dense/jammed against a reference like Scaffold's own site; a light shadow
   is what actually reads as "airy" rather than paper-on-paper. */
.curio-card {
  background: var(--color-white);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1rem + 1vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(0, 20, 12, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.curio-card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), 0 16px 32px rgba(0, 20, 12, 0.09); }
.curio-card--flush {
  padding: 0;
  overflow: hidden;
}

/* --- Media / photo placeholder ------------------------------------------ */
.curio-media {
  background: var(--color-mid-green);
  background-size: cover;
  background-position: center;
  position: relative;
}
.curio-media__label {
  position: absolute;
  inset: 0;
  display: flex;
  padding: var(--space-md);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-small);
}

/* --- Full-width modules inside a drag-and-drop area --------------------- */
/* Our modules are self-contained full-width sections that manage their own
   container and vertical rhythm. Inside a dnd area, strip HubSpot's default
   section padding and row max-width so the coloured bands run edge to edge. */
.curio-dnd .dnd-section {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.curio-dnd .dnd-section > .row-fluid {
  max-width: none;
}

/* --- Reveal-on-scroll (progressive enhancement) ------------------------- */

/* ==========================================================================
   Curio icon set — the sector and service marks
   --------------------------------------------------------------------------
   Drawn inline by templates/partials/icons.html so CSS can reach inside them.
   Duotone: Evergreen draws, Yellow accents, one accent shape per icon and
   never more than one accent colour (curio-design-system).

   The base state is the FINISHED state, and the animation only runs under
   .is-in. That ordering matters: if the reveal observer never fires — no JS,
   an old browser, reduced motion — the icons are simply there, rather than
   stuck at opacity 0 waiting for a class that is not coming.
   ========================================================================== */
.cicon { display: block; width: 44px; height: 44px; transition: transform 0.2s ease; }
.cicon__line { stroke: var(--color-evergreen); }
.cicon__accent { fill: var(--color-yellow); }
/* fill-box so the transform origin is the shape itself, not the SVG viewport,
   which is what makes the accent grow from its own centre. */
.cicon__line,
.cicon__accent { transform-box: fill-box; transform-origin: 50% 50%; }

.curio-reveal.is-in .cicon__line {
  animation: cicon-line 560ms ease both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
/* The accent lands after the line it sits in, with a little overshoot, so the
   yellow reads as arriving rather than fading up alongside everything else. */
.curio-reveal.is-in .cicon__accent {
  animation: cicon-accent 520ms cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
  animation-delay: calc(var(--i, 0) * 70ms + 200ms);
}
@keyframes cicon-line { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes cicon-accent { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }

.cap__item:hover .cicon { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .cicon,
  .curio-reveal.is-in .cicon__line,
  .curio-reveal.is-in .cicon__accent { animation: none; transition: none; }
  .cap__item:hover .cicon { transform: none; }
}

.curio-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.curio-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .curio-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Global header
   ========================================================================== */
.curio-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-white);
  border-bottom: var(--border-hairline) solid var(--rule);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.curio-header__skip {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  z-index: 100;
  background: var(--color-evergreen);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
}
.curio-header__skip:focus { left: var(--gutter); }
.curio-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
}
.curio-header__brand { display: flex; align-items: center; }
.curio-logo { display: flex; align-items: center; color: var(--color-black); text-decoration: none; }
.curio-logo__mark { width: 176px; height: auto; display: block; }
.curio-header__right { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); margin-left: auto; }
.curio-header__nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); justify-content: flex-end; }
.curio-header__actions { display: flex; align-items: center; gap: 0.75rem; }
.curio-header__toggle { display: inline-flex; }

/* --- Search --- */
.curio-search { position: relative; }
.curio-search__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent;
  color: var(--color-evergreen); cursor: pointer;
}
.curio-search__toggle:hover { background: var(--color-off-white); }
.curio-search__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.curio-search__form {
  position: absolute; right: 0; top: calc(100% + 0.5rem); width: 240px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.curio-search.is-open .curio-search__form { opacity: 1; visibility: visible; transform: none; }
.curio-search__form .curio-search__input {
  width: 100%; padding: 0.55rem 0.9rem; border-radius: 999px;
  border: var(--border-hairline) solid var(--border-subtle);
  background: var(--color-white); color: var(--text-default); font-size: var(--fs-body);
}
/* Focus on text inputs (QA pass, 26 Sep 2026): each input drops the browser
   outline for its own border colour, and on a 1px border that shade change was
   hard to see. The 2px ring keeps the same colour and makes focus obvious. */
.curio-search__form .curio-search__input:focus { outline: none; border-color: var(--color-evergreen); box-shadow: 0 0 0 2px var(--color-evergreen); }
/* Visible submit control. The search box previously offered no way to run a
   search except pressing Enter, which was not navigating (audit
   CUR-WEB-010). */
.curio-search__form .curio-search__input { padding-right: 2.6rem; }
.curio-search__submit {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: var(--color-evergreen); color: var(--color-white); cursor: pointer;
}
.curio-search__submit:hover { opacity: 0.85; }
.curio-search__submit:focus-visible { outline: 2px solid var(--color-evergreen); outline-offset: 2px; }
.curio-search__submit-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Mega menu: desktop flyout bar --- */
.mega__bar { display: flex; align-items: center; gap: clamp(0.75rem, 1.8vw, 1.75rem); list-style: none; margin: 0 auto 0 0; padding: 0; }
.mega__item { position: static; }
.mega__top {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-body); font-weight: var(--fw-link); font-size: 0.875rem; letter-spacing: 0.01em;
  color: var(--text-muted); background: none; border: 0; padding: 1.6rem 0; cursor: pointer; text-decoration: none;
}
.mega__top:hover, .mega__item:focus-within .mega__top, .mega__top[aria-expanded="true"] { color: var(--color-black); }
.mega__chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -2px); transition: transform 0.2s ease; }
.mega__top[aria-expanded="true"] .mega__chev, .mega__group[open] .mega__chev { transform: rotate(-135deg); }
.mega__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--color-white); border-top: var(--border-hairline) solid var(--border-subtle);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.07);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 45;
}
.mega__item:hover .mega__panel, .mega__item:focus-within .mega__panel, .mega__top[aria-expanded="true"] + .mega__panel {
  opacity: 1; visibility: visible; transform: none;
}
.mega__panel-inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-block: 2.25rem; }
.mega__panel-inner--feature { grid-template-columns: 1fr 300px; }
.mega__intro { max-width: 42ch; margin: 0 0 1.5rem; color: var(--text-muted); font-size: var(--fs-lead); }
/* Rows, not newspaper columns (CUR20-56, 7 Oct 2026). CSS columns filled
   down then across, so the visual top row was items 1, 3 and 5, not the
   first three in the editor. A grid reads in the order the menu is written. */
.mega__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
.mega__link { display: block; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-evergreen); font-weight: var(--fw-h3); }
.mega__link:hover { background: var(--color-off-white); }
.mega__feature { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.5rem; border-radius: var(--radius-md); background: var(--color-evergreen); color: var(--color-white); text-decoration: none; align-self: start; }
.mega__feature-image { width: 100%; aspect-ratio: 16 / 10; -o-object-fit: cover; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 0.5rem; }
.mega__feature-label { font-weight: var(--fw-h3); }
.mega__feature-text { font-size: 0.9rem; color: rgba(255, 255, 255, 0.82); }
.mega__feature-go { margin-top: 0.4rem; }

/* --- Mega menu: hamburger drawer (mobile everywhere, subdomains at all widths) --- */
.mega__drawer-inner { display: none; width: 100%; }
.mega__group { border-bottom: var(--border-hairline) solid var(--border-subtle); }
/* Drawer hierarchy. Parents are Bold (--fw-h3, the design system's sub-heading
   weight); children are Light (--fw-link, its text-link weight). Both used to be
   --fw-h3 at 1.1rem vs 1rem, which is not enough to tell a section from its
   links. Weight does the work now, not size. */
.mega__group-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; padding: 1rem 0; font-family: var(--font-body); font-weight: var(--fw-h3); font-size: 1.05rem; letter-spacing: -0.01em; color: var(--color-evergreen); }
.mega__group-top::-webkit-details-marker { display: none; }
.mega__group-links { display: flex; flex-direction: column; gap: 0.1rem; padding: 0 0 1rem 0.875rem; border-left: var(--border-hairline) solid var(--border-subtle); margin-left: 0.125rem; }
.mega__dlink { display: block; padding: 0.45rem 0; text-decoration: none; color: var(--text-default); font-weight: var(--fw-link); font-size: 0.9375rem; }
.mega__dlink:hover, .mega__dlink:focus-visible { color: var(--color-evergreen); }
.mega__dtop { display: block; padding: 1rem 0; border-bottom: var(--border-hairline) solid var(--border-subtle); font-weight: var(--fw-h3); font-size: 1.05rem; letter-spacing: -0.01em; color: var(--color-evergreen); text-decoration: none; }

/* --- Log in front door --- */
.curio-login { position: relative; flex: 0 0 auto; }
.curio-login__toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-body); font-weight: var(--fw-h3); font-size: 0.95rem;
  color: var(--color-evergreen); background: transparent; border: var(--border-hairline) solid var(--color-evergreen);
  border-radius: 999px; padding: 0.55rem 1.1rem; cursor: pointer;
}
.curio-login__menu {
  position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 210px; list-style: none; margin: 0; padding: 0.4rem;
  background: var(--color-white); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-md);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 60;
}
.curio-login:hover .curio-login__menu, .curio-login:focus-within .curio-login__menu, .curio-login__toggle[aria-expanded="true"] + .curio-login__menu {
  opacity: 1; visibility: visible; transform: none;
}
.curio-login__menu a { display: block; padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); color: var(--text-default); text-decoration: none; font-size: 0.95rem; }
.curio-login__menu a:hover { background: var(--color-egg-shell); }

/* --- Hamburger button + off-canvas drawer --- */
.curio-header__toggle { flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; padding: 10px; }
.curio-header__toggle span { display: block; width: 100%; height: 2px; background: var(--color-black); transition: transform 0.2s ease, opacity 0.2s ease; }
.curio-header__backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; z-index: 44; }
.curio-header.is-open .curio-header__backdrop { opacity: 1; visibility: visible; }

/* Hamburger → X, whenever the drawer is open, regardless of layout mode */
.curio-header.is-open .curio-header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.curio-header.is-open .curio-header__toggle span:nth-child(2) { opacity: 0; }
.curio-header.is-open .curio-header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Shared off-canvas presentation: applied on mobile (all) and on subdomains (all widths).
   The whole nav container (top bar + drawer accordion + login) becomes the sliding panel. */
.curio-drawer-mode .mega__bar { display: none; }
.curio-drawer-mode .mega__drawer-inner { display: block; }
.curio-drawer-mode .curio-header__nav {
  position: fixed; inset: 76px 0 0 auto; width: min(420px, 90vw);
  flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
  padding: var(--gutter); background: var(--color-white);
  border-left: var(--border-hairline) solid var(--border-subtle);
  overflow-y: auto; transform: translateX(100%); transition: transform 0.25s ease;
}
.curio-drawer-mode.curio-header.is-open .curio-header__nav { transform: none; }
/* Note: .curio-header__actions (search/login/hamburger) is a persistent
   top-bar sibling of .curio-header__nav now, not nested inside the sliding
   drawer panel — it never needs the old drawer-content top margin. A
   margin-top here previously applied unconditionally and pushed the icons
   down out of vertical alignment with the logo. */

/* Main domain: drawer mode on mobile only (mirrors .curio-drawer-mode) */
@media (max-width: 1023px) {
  .curio-header .mega__bar { display: none; }
  .curio-header .mega__drawer-inner { display: block; }
  .curio-header .curio-header__nav {
    position: fixed; inset: 76px 0 0 auto; width: min(420px, 90vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: var(--gutter); background: var(--color-white);
    border-left: var(--border-hairline) solid var(--border-subtle);
    overflow-y: auto; transform: translateX(100%); transition: transform 0.25s ease;
  }
  .curio-header.is-open .curio-header__nav { transform: none; }
  .mega__links { grid-template-columns: 1fr; }
}

/* Main domain, wide screens: top bar stays inline and visible; the hamburger
   (now always shown, left of the logo) opens a separate off-canvas panel
   with the full site drawer alongside it — doesn't replace the top bar. */
@media (min-width: 1024px) {
  .curio-header:not(.curio-drawer-mode) .mega__drawer-inner {
    display: block;
    position: fixed; inset: 76px 0 0 auto; width: min(420px, 90vw);
    background: var(--color-white); border-left: var(--border-hairline) solid var(--border-subtle);
    padding: var(--gutter); overflow-y: auto;
    transform: translateX(100%); transition: transform 0.25s ease;
    z-index: 46;
  }
  .curio-header:not(.curio-drawer-mode).is-open .mega__drawer-inner { transform: none; }
}

/* ==========================================================================
   Global footer
   ========================================================================== */
.curio-footer { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem) 2rem; }
.curio-footer.curio-panel--evergreen { background: var(--color-charcoal); }
.curio-footer .curio-logo { color: var(--color-white); }
.curio-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 3fr;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
}
.curio-footer--slim .curio-footer__inner { grid-template-columns: 1fr; }
.curio-footer__tagline {
  margin: 1rem 0 0;
  max-width: 32ch;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
}
.curio-footer__contact {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
}
.curio-footer__contact a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: var(--fw-h3);
}
.curio-footer__contact a:hover { color: var(--color-white); }
.curio-footer__contact span { color: rgba(255, 255, 255, 0.5); }
.curio-footer__newsletter { margin-top: 1.75rem; max-width: 30rem; }
.curio-footer__newsletter h2 {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  font-weight: var(--fw-h2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
}
.curio-footer__newsletter .hs-form,
.curio-footer__newsletter form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-start; }
.curio-footer__newsletter .hs-form-field { margin: 0; flex: 1 1 200px; }
.curio-footer__newsletter .hs-form-field > label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.curio-footer__newsletter input[type="email"],
.curio-footer__newsletter input[type="text"] {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  border: var(--border-hairline) solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  font-size: 0.9rem;
}
.curio-footer__newsletter input::-moz-placeholder { color: rgba(255, 255, 255, 0.5); }
.curio-footer__newsletter input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); }
.curio-footer__newsletter input::placeholder { color: rgba(255, 255, 255, 0.5); }
.curio-footer__newsletter input:focus { outline: none; border-color: var(--color-white); box-shadow: 0 0 0 2px var(--color-white); }
.curio-footer__newsletter .hs-button,
.curio-footer__newsletter input[type="submit"] {
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  border: none;
  background: var(--color-white);
  color: var(--color-evergreen);
  font-weight: var(--fw-h3);
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}
.curio-footer__newsletter .hs-button:hover,
.curio-footer__newsletter input[type="submit"]:hover { background: rgba(255, 255, 255, 0.85); }
.curio-footer__newsletter .hs-error-msgs { list-style: none; margin: 0.4rem 0 0; padding: 0; width: 100%; }
.curio-footer__newsletter .hs-error-msgs label { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; color: var(--color-yellow); font-size: 0.8rem; }
.curio-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
/* Column titles are styled text, not headings: they label link lists, they
   do not start sections of the page. */
.curio-footer__col-title {
  margin: 0 0 0.9rem;
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  font-size: 0.78rem;
  font-weight: var(--fw-h2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
}
.curio-footer__col ul,
.curio-footer__base ul { list-style: none; margin: 0; padding: 0; }
/* Two-line service names were reading as two separate links: the body
   line-height of 1.6 put more space inside "Learning design and development"
   than the 0.55rem gap put between it and the next service. Bind the wrapped
   lines with the heading line-height and widen the gap between items, so the
   grouping the eye picks up matches the grouping that is actually there. */
.curio-footer__col ul { display: flex; flex-direction: column; gap: 0.95rem; }
.curio-footer__col li { line-height: var(--lh-heading); }
.curio-footer__col a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: var(--fw-link);
  /* --fs-small (13px). A step down from the 14px used elsewhere: these are
     wayfinding links, not reading copy, and the column headings above them
     carry the structure. */
  font-size: var(--fs-small);
}
.curio-footer__col a:hover { color: var(--color-white); }
.curio-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: var(--border-hairline) solid rgba(255, 255, 255, 0.15);
}
.curio-footer__base ul { display: flex; gap: 1.25rem; }
.curio-footer__base a,
.curio-footer__copy { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; text-decoration: none; }
.curio-footer__base a:hover { color: var(--color-white); }
/* The module emits its <li> elements directly inside this list. Making the list
  a flex row keeps the icons inline; only showed up once there was more than one. */
.curio-footer__social { display: flex; align-items: center; gap: 0.6rem; }
.curio-footer__social li { list-style: none; }
.curio-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: var(--border-hairline) solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.curio-footer__social a:hover { background-color: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.5); color: var(--color-white); }
.curio-footer__social svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

@media (max-width: 1023px) {
  .curio-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
  .curio-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .curio-footer__cols { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Article (blog post)
   ========================================================================== */
.curio-article__hero {
  background: var(--bg-page);
  padding-block: clamp(2.5rem, 2rem + 4vw, 5rem) clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.curio-article__title {
  margin: 0;
  max-width: 22ch;
  font-weight: var(--fw-h1);
  font-size: var(--fs-h1);
  letter-spacing: -0.01em;
  color: var(--color-evergreen);
}
.curio-article__meta { margin: 1rem 0 0; color: var(--text-muted); font-size: 0.95rem; }
.curio-article__body {
  max-width: 68ch;
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
  font-size: var(--fs-lead);
  line-height: 1.7;
}
.curio-article__body > :first-child { margin-top: 0; }
.curio-article__body h2 { font-weight: var(--fw-h2); font-size: var(--fs-h2); color: var(--color-evergreen); margin-top: 2.25rem; }
.curio-article__body h3 { font-weight: var(--fw-heading-sub); color: var(--color-evergreen); }
.curio-article__body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.curio-article__body blockquote {
  border-left: 3px solid var(--color-mid-green);
  margin: 1.5rem 0;
  padding-left: 1.5rem;
  font-weight: var(--fw-h1);
  font-size: var(--fs-h3);
  color: var(--color-evergreen);
}
/* ==========================================================================
   Case study (blog post, case-study-post.html)
   --------------------------------------------------------------------------
   Diverges from the generic .curio-article__* hero above: case study titles
   run longer ("Custom Canvas registration and enrolment build for...") and
   need a wider column, plus a hero image, so the H1 doesn't wrap five deep
   against an empty beige panel. Built from native post fields (name,
   tag_list, featured_image, post_summary) so it applies to every case study
   post immediately, not just ones authored after this template shipped.
   ========================================================================== */
.cs-crumbs { margin: 0 0 1.25rem; }
.cs-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--text-muted); }
.cs-crumbs li:not(:last-child)::after { content: "/"; margin-left: 0.4rem; color: var(--border-subtle); }
.cs-crumbs a { color: var(--text-muted); text-decoration: none; }
.cs-crumbs a:hover { text-decoration: underline; }
.cs-crumbs li[aria-current="page"] { color: var(--color-evergreen); font-weight: var(--fw-heading-sub); }

.cs-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.cs-hero__title { margin: 0.4rem 0 0; max-width: 34ch; font-weight: var(--fw-h1); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--color-evergreen); }
.cs-hero__result { margin: 1rem 0 0; max-width: 46ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--text-muted); }
.cs-hero__media { border-radius: var(--radius-lg); aspect-ratio: 4 / 3; background-color: var(--color-mid-green); background-size: cover; background-position: center; }
/* Fallback plate for a case study with no featured image. Deliberate brand
   treatment rather than the empty green rectangle this used to render
   (audit CUR-WEB-006): most of the published library has no photography. */
.cs-hero__media--plate { display: grid; place-items: center; overflow: hidden; }
.cs-hero__media--plate img { width: 62%; max-width: 320px; height: auto; opacity: 0.5; filter: brightness(0) invert(1); }
@media (max-width: 767px) {
  .cs-hero__grid { grid-template-columns: 1fr; }
  .cs-hero__title { max-width: none; }
}


.curio-related { background: var(--bg-subtle); }
.curio-related__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: -0.25rem; }
.curio-related__tag { font-size: 0.72rem; font-weight: var(--fw-h3); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-evergreen); background: var(--color-white); border-radius: 999px; padding: 0.2rem 0.6rem; }
.curio-related__result { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.curio-related__inner { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }
.curio-related__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.curio-related__post { display: flex; flex-direction: column; gap: 0.75rem; }
.curio-related__image { aspect-ratio: 16 / 10; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: var(--radius-md); }
.curio-related__title { margin: 0; font-weight: var(--fw-h2); font-size: 1.18rem; line-height: 1.3; }
.curio-related__title a { color: var(--color-evergreen); text-decoration: none; }
.curio-related__title a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   404 page
   -------------------------------------------------------------------------- */
.curio-404 { padding-block: clamp(3rem, 2rem + 5vw, 6rem); max-width: 60rem; }
.curio-404__title {
  margin: 0.75rem 0 0;
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  color: var(--color-evergreen);
  letter-spacing: -0.01em;
}
.curio-404__lead {
  margin: 1rem 0 0;
  max-width: 44ch;
  font-size: var(--fs-lead);
  color: var(--text-muted);
}
.curio-404__cols {
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}
.curio-404__col-title {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: var(--fw-h2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.curio-404__col ul { list-style: none; margin: 0; padding: 0; }
.curio-404__col li + li { margin-top: 0.5rem; }
.curio-404__col a {
  color: var(--color-evergreen);
  text-decoration: none;
  font-weight: var(--fw-link);
  font-size: 0.875rem;
}
.curio-404__col a:hover { text-decoration: underline; }
.curio-404__foot {
  margin: clamp(2rem, 1rem + 3vw, 3rem) 0 0;
  padding-top: 1.5rem;
  border-top: var(--border-hairline) solid var(--rule);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.curio-404__foot a { color: var(--color-evergreen); }

/* --------------------------------------------------------------------------
   System pages (500, password prompt, search results, subscriptions,
   membership). These render HubSpot's own modules and form tags, so the
   wrapper styles the page and the rules below tidy whatever HubSpot injects
   inside it rather than replacing it.
   -------------------------------------------------------------------------- */
.curio-sys { padding-block: clamp(3rem, 2rem + 5vw, 6rem); max-width: 40rem; }
.curio-sys--wide { max-width: 60rem; }
.curio-sys__title {
  margin: 0.75rem 0 0;
  font-size: var(--fs-h1);
  font-weight: var(--fw-h1);
  color: var(--color-evergreen);
  letter-spacing: -0.01em;
}
.curio-sys__lead {
  margin: 1rem 0 0;
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: var(--text-muted);
}
.curio-sys__body { margin-top: clamp(1.75rem, 1rem + 2vw, 2.5rem); }
.curio-sys__foot {
  margin: clamp(2rem, 1rem + 3vw, 3rem) 0 0;
  padding-top: 1.5rem;
  border-top: var(--border-hairline) solid var(--rule);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.curio-sys__foot a, .curio-sys__lead a { color: var(--color-evergreen); }

/* Tidy HubSpot's injected form controls so they read as Curio, not raw CMS. */
.curio-sys input[type="text"],
.curio-sys input[type="email"],
.curio-sys input[type="password"],
.curio-sys input[type="search"] {
  width: 100%;
  max-width: 24rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-default);
  background: var(--color-white);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
}
.curio-sys input:focus { outline: none; border-color: var(--color-evergreen); box-shadow: 0 0 0 2px var(--color-evergreen); }
.curio-sys label { display: block; margin-bottom: 0.35rem; font-size: 0.875rem; font-weight: var(--fw-h3); color: var(--text-default); }
.curio-sys form > div + div { margin-top: 1rem; }
.curio-sys input[type="submit"], .curio-sys button[type="submit"], .curio-sys .hs-button {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: var(--fw-h3);
  font-size: 0.95rem;
  color: var(--color-white);
  background: var(--color-evergreen);
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  cursor: pointer;
}
.curio-sys input[type="submit"]:hover, .curio-sys button[type="submit"]:hover, .curio-sys .hs-button:hover { opacity: 0.9; }

/* Search results list */
.curio-sys .hs-search-results__listing { list-style: none; margin: 0; padding: 0; }
.curio-sys .hs-search-results__listing li + li { margin-top: 1.5rem; padding-top: 1.5rem; border-top: var(--border-hairline) solid var(--border-subtle); }
.curio-sys .hs-search-results__title { color: var(--color-evergreen); font-weight: var(--fw-heading-sub); text-decoration: none; font-size: 1.05rem; }
.curio-sys .hs-search-results__title:hover { text-decoration: underline; }
.curio-sys .hs-search-results__description { color: var(--text-muted); font-size: 0.9375rem; margin: 0.35rem 0 0; }

/* --------------------------------------------------------------------------
   Header simplification (David, 27 Aug 2026)

   1. No chevrons on the top-bar nav items. They are kept on the drawer
      accordion, where they are functional: there they show whether a group is
      open, and rotate on toggle. In the top bar they were decoration.

   2. No hamburger on desktop. Below 1024px, and on subdomains at any width,
      the mega bar is hidden and the drawer IS the navigation, so the toggle
      has to stay there or those visitors lose the menu entirely. It is only
      hidden where the full top bar is already showing.
   -------------------------------------------------------------------------- */
.mega__top .mega__chev { display: none; }

@media (min-width: 1024px) {
  .curio-header:not(.curio-drawer-mode) .curio-header__toggle { display: none; }
}

/* Utilities
Helper classes with ability to override anything that comes before it
*/

/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}