/* --- Theme base styles --- */

/* --- Font Family --- */
/* Inter */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); */


/* @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
 */
/* --- 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));
  }
  
}
/* --- Unknown but removes bottom invisible padding */
.body-wrapper {
  height: 100px;
}


.content-wrapper {
  margin: 0;
  padding: 0;
}

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

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

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

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

/* --- Global components --- */

/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/



.p-b-1 {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  font-family: var(--button-1-desktop-large-font-family);
  font-weight: var(--button-1-desktop-large-font-weight);
  font-size: var(--button-1-desktop-large-font-size);
  line-height: var(--button-1-desktop-large-line-height);
  letter-spacing: var(--button-1-desktop-large-letter-spacing);
  border-radius: var(--radius-sm);
  background-color: var(--p-b-d);
  color: var(--w-t);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.p-b-1:disabled {
  background-color:  var(--border);
}

.p-b-1:hover { 
  background-color:  var(--p-b-h);
}

.p-b-2 {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  font-family: var(--button-1-desktop-large-font-family);
  font-weight: var(--button-1-desktop-large-font-weight);
  font-size: var(--button-1-desktop-large-font-size);
  line-height: var(--button-1-desktop-large-line-height);
  letter-spacing: var(--button-1-desktop-large-letter-spacing);
  border-radius: var(--radius-sm);
  background-color:  var(--p-b-h);
  color: var(--w-t);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.p-b-2:disabled {
  background-color:  var(--border);
}

.p-b-2:hover { 
  background-color:  transparent;
  border: 1px solid var(--w-t);
}

.p-b-3 {
  display: inline-flex;
  align-items: center;
  gap: 10px; /* Spacing between text and icon */
  padding: var(--space-3) var(--space-5);
  font-family: var(--button-1-desktop-large-font-family);
  font-weight: var(--button-1-desktop-large-font-weight);
  font-size: var(--button-1-desktop-large-font-size);
  line-height: var(--button-1-desktop-large-line-height);
  letter-spacing: var(--button-1-desktop-large-letter-spacing);
  border-radius: var(--radius-sm);
  background-color:  var(--p-b-d);
  color: var(--w-t);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.p-b-3::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><g clip-path="url(%23clip0)"><path d="M12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0ZM8.72123 17.2193V6.7807L17.7613 12L8.72123 17.2193Z" fill="white"/></g><defs><clipPath id="clip0"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>');
  margin-top: 5px;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p-b-3:disabled {
  background-color:  var(--border);
}

.p-b-3:hover { 
  background-color:  var(--p-b-h);
}

.s-b {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  font-family: var(--button-1-desktop-large-font-family);
  font-weight: var(--button-1-desktop-large-font-weight);
  font-size: var(--button-1-desktop-large-font-size);
  line-height: var(--button-1-desktop-large-line-height);
  letter-spacing: var(--button-1-desktop-large-letter-spacing);
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--s-b-d);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid var(--s-b-d);
}

.s-b:disabled {
  background-color:  var(--border);
}

.s-b:hover { 
  color: var(--w-t);
  background-color:  var(--p-b-h);
  border: 1px solid transparent;
}

.link-text {
  font-family: var(--button-1-desktop-large-font-family);
  font-weight: var(--button-1-desktop-large-font-weight);
  font-size: var(--button-1-desktop-large-font-size);
  line-height: var(--button-1-desktop-large-line-height);
  letter-spacing: var(--button-1-desktop-large-letter-spacing);
  color: var(--p-c);
  cursor: pointer;
  position: relative;
/*   text-decoration: none; */
  /* Remove default underline */
}

.link {
  font-family: var(--button-1-desktop-large-font-family);
  font-weight: var(--button-1-desktop-large-font-weight);
  font-size: var(--button-1-desktop-large-font-size);
  line-height: var(--button-1-desktop-large-line-height);
  letter-spacing: var(--button-1-desktop-large-letter-spacing);
  color: var(--l-d);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  /* Remove default underline */
}

.link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px; /* Thickness of the border */
  width: 0;
  background-color: var(--l-d); /* Use same color as text or customize */
  transition: width var(--transition-base);
}

.link:hover::before {
  width: 100%;
}

.link::after {
  content: url('data:image/svg+xml;utf8,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_5817_15621)"><path d="M3.125 10.5H16.875M16.875 10.5L11.25 4.875M16.875 10.5L11.25 16.125" stroke="%2300856A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_5817_15621"><rect width="20" height="20" fill="white" transform="translate(0 0.5)"/></clipPath></defs></svg>');
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 21px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.link:hover::after {
  opacity: 1;
}


/* .btn_default-icon references --primary/--white/--blue, which are not
   defined anywhere in colorPalate.css (old or new) — looks like dead code
   copied from a different template ("Swept Website" hubfs path below).
   Left untouched: out of Phase 1 scope, no evidence it's used on any live
   page, and "fixing" undefined-var dead code isn't a token-hardcoding
   issue. Flagged for Phase 2/3 cleanup or removal. */
.btn_default-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.75em; /* Spacing between text and icon */
  padding: 0.9375em 1.5em 1.0625em 1.5em; /* Padding around the button */
  justify-content: center;
  border-radius: 12px; /* Rounded corners */
  border: 0px;
  background: var(--primary); /* Primary background color */
  color: var(--white); /* Text color */
  transition: all 150ms ease-out; /* Smooth transition on hover */
  text-decoration: none; /* Remove underline */
  cursor: pointer;
}

.btn_default-icon::after {
  content: url('https://1682788.fs1.hubspotusercontent-na1.net/hubfs/1682788/2024%20Files%20%28Sorted%29/Swept%20Website/Download%20Icon.svg');
  width: 1.1875em;
  height: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 150ms ease-out;
}

.btn_default-icon:hover {
  background: var(--blue); /* Change background color on hover */
  cursor: pointer; /* Pointer cursor on hover */
}


@media (max-width: 768px) {

  .p-b-1 {
    display: block;
    padding: 10px var(--space-5);
    font-family: var(--button-1-mobile-font-family);
    font-weight: var(--button-1-mobile-font-weight);
    font-size: var(--button-1-mobile-font-size);
    line-height: var(--button-1-mobile-line-height);
    letter-spacing: var(--button-1-mobile-letter-spacing);
  }

  .p-b-2 {
    display: block;
    padding: 10px var(--space-5);
    font-weight: var(--button-1-mobile-font-weight);
    font-size: var(--button-1-mobile-font-size);
    line-height: var(--button-1-mobile-line-height);
    letter-spacing: var(--button-1-mobile-letter-spacing);
  }

  .p-b-3 {
    display: flex;
    justify-content: center;
    padding: 10px var(--space-5);
    font-weight: var(--button-1-mobile-font-weight);
    font-size: var(--button-1-mobile-font-size);
    line-height: var(--button-1-mobile-line-height);
    letter-spacing: var(--button-1-mobile-letter-spacing);
  }

  .s-b {
    display: block;
    padding: 10px var(--space-5);
    font-weight: var(--button-1-mobile-font-weight);
    font-size: var(--button-1-mobile-font-size);
    line-height: var(--button-1-mobile-line-height);
    letter-spacing: var(--button-1-mobile-letter-spacing);
  }
  
  .link-text {
  font-size: var(--body-1-highlight-mobile-font-size);
}

}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* =================================================================== */
/* PHASE 1 — TEAL EDITORIAL DESIGN TOKENS (2026-07-15)                 */
/* JP ruling: teal editorial, upgraded to scroll-stopping.             */
/* Newsreader (serif display) + Outfit (sans) + JetBrains Mono (mono). */
/* Accent #00856a. Brand green (#3B7A57) preserved as a secondary/     */
/* legacy token per ruling — not wired into any active alias yet.      */
/*                                                                     */
/* IMPORTANT: every pre-existing variable name below the "LEGACY       */
/* ALIASES" banner is kept and now points at a semantic token, so all  */
/* modules referencing the old short names (--p-c, --h-1, --ds1, etc.) */
/* keep working untouched. Never rename/remove a legacy alias name —   */
/* only repoint its value.                                             */
/* =================================================================== */

:root {

  /* ---- Brand core ---- */
  --brand-teal: #00856A;
  --brand-ink: #0F0F0F;
  --brand-green-legacy: #3B7A57; /* reserved secondary accent — not active */

  /* ---- Fonts ---- */
  --font-serif: 'Newsreader', serif;
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ---- Surfaces ---- */
  --surface-white: #FFFFFF;
  --surface-tint-50: #EDF6F3;
  --surface-tint-100: #D8ECE6;
  --surface-ink: #0F0F0F;
  --surface-ink-accent: #F2E4D0;

  /* ---- Borders ---- */
  --border-default: #D8D8D3;

  /* ---- Accent chip palette (category tags / highlight badges) ---- */
  --accent-1: #9FD8CB;
  --accent-2: #E3A6A0;
  --accent-3: #00A388;
  --accent-4: #C99BDB;
  --accent-5: #8FA8D9;
  --accent-6: #E8B36B;

  /* ---- Buttons ---- */
  --button-primary-default: var(--brand-teal);
  --button-primary-hover: var(--surface-ink);
  --button-secondary-default: var(--brand-teal);
  --button-secondary-hover: var(--surface-ink);

  /* ---- Links ---- */
  --link-default: var(--brand-teal);

  /* ---- Text ---- */
  --text-ink: #0F0F0F;
  --text-slate: #3A3A38;
  --text-muted: #7A7A76;
  --text-white: #FFFFFF;

  /* ---- Ratings ---- */
  --rating-fill: #D9A02C;
  --rating-pale: #F5E2AD;

  /* ---- Gradients ---- */
  --gradient-photo-overlay: linear-gradient(to right, rgba(6, 36, 31, 0) 0%, rgba(6, 36, 31, 0.6) 100%);

  /* ---- Shadows ---- */
  --shadow-sm: 0px 10px 20px rgba(15, 15, 15, 0.05);
  --shadow-md: 0px 10px 40px rgba(15, 15, 15, 0.075);
  --shadow-lg: 0px 24px 64px rgba(15, 15, 15, 0.12);

  /* ---- Spacing scale (new — Phase 1 item 4) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Radius scale (new — Phase 1 item 4) ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Transitions (new — also fixes a previously-undefined
     --transition-fast reference already used in Navbar-global CSS) ---- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* =============================================================== */
  /* LEGACY ALIASES — DO NOT REMOVE OR RENAME.                        */
  /* 98 modules reference these short var names directly. Only their  */
  /* values change here; the names are permanent until a future pass  */
  /* migrates every module to the semantic names above.                */
  /* =============================================================== */

  --p-c: var(--brand-teal);
  --s-c: var(--surface-ink);

  --l-b: var(--surface-white);
  --l-a-b-1: var(--surface-tint-50);
  --l-a-b-2: var(--surface-tint-100);
  --d-b: var(--surface-ink);
  --d-a-b: var(--surface-ink-accent);

  --border: var(--border-default);

  --h-1: var(--accent-1);
  --h-2: var(--accent-2);
  --h-3: var(--accent-3);
  --h-4: var(--accent-4);
  --h-5: var(--accent-5);
  --h-6: var(--accent-6);

  --p-b-d: var(--button-primary-default);
  --p-b-h: var(--button-primary-hover);

  --s-b-d: var(--button-secondary-default);
  --s-b-h: var(--button-secondary-hover);

  --l-d: var(--link-default);

  --d-t-1: var(--text-ink);
  --d-t-2: var(--text-slate);
  --d-t-3: var(--text-muted);
  --w-t: var(--text-white);

  --r-f: var(--rating-fill);
  --r-p: var(--rating-pale);

  --g-p: var(--gradient-photo-overlay);

  --ds1: var(--shadow-sm);
  --ds2: var(--shadow-md);

}

/* =================================================================== */
/* Reduced-motion guard (new — Phase 1 item 4). Loaded sitewide via     */
/* css/elements, so this covers every page without a per-module edit.  */
/* =================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* Google Fonts loaded sitewide via Site Settings > Website > Pages > Code
   (site-wide head HTML) — NOT here. This @import stays commented as a
   reference of the current family names only.
   Phase 1 (2026-07-15): swapped 'Jost' -> Outfit, 'Nunito Sans' -> Newsreader.
   The live <link>/@import swap in site-settings headHtml is DEFERRED — that
   endpoint has no draft/publish split (PUT goes live immediately), so it is
   out of scope for a draft-only pass. See OVERHAUL-PLAN.md Phase 1 notes.
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap'); */




a {
  text-decoration: none;
}


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


/* =================================================================== */
/* FLUID TYPE SCALE (Phase 1, 2026-07-15)                              */
/*                                                                       */
/* Replaces the old flat desktop/mobile pair (single jump at 768px)     */
/* plus the three duplicated ".container { font-size }" shrink ladders  */
/* (typography.css + Navbar-global module.html + footer-global          */
/* module.html) that fought each other in the 900-1530px tablet zone    */
/* and produced unpredictable sitewide shrinkage. All three ladders are */
/* deleted; this is "the one fluid scale" that replaces them.           */
/*                                                                       */
/* Every value below is clamp(min, preferred, max) interpolated between */
/* a 375px and a 1600px viewport reference:                             */
/*   - below ~375px viewport: floors at the min (mobile tier)           */
/*   - 375px-1600px: continuously, fluidly interpolates (this IS the    */
/*     real desktop->tablet->mobile intermediate tier — no hard jump,   */
/*     no ladder, no per-breakpoint override needed)                    */
/*   - above ~1600px viewport: ceilings at the max (large-desktop tier) */
/*                                                                       */
/* Both the "-desktop-large-" and "-mobile-" flavored variable names     */
/* are kept (98 modules may reference either name directly) and now     */
/* point at the SAME fluid value, so there is nothing left to           */
/* desync between them.                                                 */
/* =================================================================== */

:root {

  /* Desktop Large (hero) */
  --desktop-large-font-family: var(--font-sans);
  --desktop-large-font-weight: 700; /* Bold */
  --desktop-large-font-size: clamp(2.125rem, 1.168rem + 4.082vw, 5.25rem);
  --desktop-large-line-height: 120%;
  --desktop-large-letter-spacing: 0%;


  /* Mobile (hero) — aliased to the same fluid value as above */
  --mobile-text-font-family: var(--font-sans);
  --mobile-text-font-weight: 700; /* Bold */
  --mobile-text-font-size: clamp(2.125rem, 1.168rem + 4.082vw, 5.25rem);
  --mobile-text-line-height: 120%;
  --mobile-text-letter-spacing: 0%;


  /* h1 */
  --h1-desktop-large-font-family: var(--font-serif);
  --h1-desktop-large-font-weight: 700; /* Bold */
  --h1-desktop-large-font-size: clamp(2rem, 1.464rem + 2.286vw, 3.75rem);
  --h1-desktop-large-line-height: 120%;
  --h1-desktop-large-letter-spacing: 0%;

  --h1-mobile-font-family: var(--font-serif);
  --h1-mobile-font-weight: 700; /* Bold */
  --h1-mobile-font-size: clamp(2rem, 1.464rem + 2.286vw, 3.75rem);
  --h1-mobile-line-height: 120%;
  --h1-mobile-letter-spacing: 0%;

  /* h2 */
  --h2-desktop-large-font-family: var(--font-serif);
  --h2-desktop-large-font-weight: 700; /* Bold */
  --h2-desktop-large-font-size: clamp(1.875rem, 1.454rem + 1.796vw, 3.25rem); /* 30px - 52px */
  --h2-desktop-large-line-height: 120%;
  --h2-desktop-large-letter-spacing: 0%;

  --h2-mobile-font-family: var(--font-serif);
  --h2-mobile-font-weight: 700; /* Bold */
  --h2-mobile-font-size: clamp(1.875rem, 1.454rem + 1.796vw, 3.25rem); /* 30px - 52px */
  --h2-mobile-line-height: 120%;
  --h2-mobile-letter-spacing: 0%;

  /* h3 */
  --h3-desktop-large-font-family: var(--font-sans);
  --h3-desktop-large-font-weight: 500; /* Medium */
  --h3-desktop-large-font-size: clamp(1.75rem, 1.444rem + 1.306vw, 2.75rem); /* 28px - 44px */
  --h3-desktop-large-line-height: 150%;
  --h3-desktop-large-letter-spacing: 0%;

  --h3-mobile-font-family: var(--font-sans);
  --h3-mobile-font-weight: 500; /* Medium */
  --h3-mobile-font-size: clamp(1.75rem, 1.444rem + 1.306vw, 2.75rem); /* 28px - 44px */
  --h3-mobile-line-height: 150%;
  --h3-mobile-letter-spacing: 0%;

  /* h4 */
  --h4-desktop-large-font-family: var(--font-serif);
  --h4-desktop-large-font-weight: 700; /* Bold */
  --h4-desktop-large-font-size: clamp(1.5rem, 1.270rem + 0.980vw, 2.25rem); /* 24px - 36px */
  --h4-desktop-large-line-height: 120%;
  --h4-desktop-large-letter-spacing: 0%;

  --h4-mobile-font-family: var(--font-serif);
  --h4-mobile-font-weight: 700; /* Bold */
  --h4-mobile-font-size: clamp(1.5rem, 1.270rem + 0.980vw, 2.25rem); /* 24px - 36px */
  --h4-mobile-line-height: 120%;
  --h4-mobile-letter-spacing: 0%;

  /* h5 */
  --h5-desktop-large-font-family: var(--font-serif);
  --h5-desktop-large-font-weight: 700; /* Bold */
  --h5-desktop-large-font-size: clamp(1.25rem, 1.097rem + 0.653vw, 1.75rem); /* 20px - 28px */
  --h5-desktop-large-line-height: 120%;
  --h5-desktop-large-letter-spacing: 0%;

  --h5-mobile-font-family: var(--font-serif);
  --h5-mobile-font-weight: 700; /* Bold */
  --h5-mobile-font-size: clamp(1.25rem, 1.097rem + 0.653vw, 1.75rem); /* 20px - 28px */
  --h5-mobile-line-height: 120%;
  --h5-mobile-letter-spacing: 0%;


  /* h6 */
  --h6-desktop-large-font-family: var(--font-serif);
  --h6-desktop-large-font-weight: 700; /* Bold */
  --h6-desktop-large-font-size: clamp(1.125rem, 1.010rem + 0.490vw, 1.5rem); /* 18px - 24px */
  --h6-desktop-large-line-height: 120%;
  --h6-desktop-large-letter-spacing: 0%;

  --h6-mobile-font-family: var(--font-serif);
  --h6-mobile-font-weight: 700; /* Bold */
  --h6-mobile-font-size: clamp(1.125rem, 1.010rem + 0.490vw, 1.5rem); /* 18px - 24px */
  --h6-mobile-line-height: 120%;
  --h6-mobile-letter-spacing: 0%;


  /* body-1 */
  --body-1-desktop-large-font-family: var(--font-sans);
  --body-1-desktop-large-font-weight: 400; /* Regular */
  --body-1-desktop-large-font-size: clamp(1rem, 0.923rem + 0.327vw, 1.25rem); /* 16px - 20px */
  --body-1-desktop-large-line-height: 150%;
  --body-1-desktop-large-letter-spacing: 0%;

  --body-1-mobile-font-family: var(--font-sans);
  --body-1-mobile-font-weight: 400; /* Regular */
  --body-1-mobile-font-size: clamp(1rem, 0.923rem + 0.327vw, 1.25rem); /* 16px - 20px */
  --body-1-mobile-line-height: 150%;
  --body-1-mobile-letter-spacing: 0%;


  /* body-1-highlight */
  --body-1-highlight-desktop-large-font-family: var(--font-sans);
  --body-1-highlight-desktop-large-font-weight: 600; /* SemiBold */
  --body-1-highlight-desktop-large-font-size: clamp(1rem, 0.923rem + 0.327vw, 1.25rem); /* 16px - 20px */
  --body-1-highlight-desktop-large-line-height: 150%;
  --body-1-highlight-desktop-large-letter-spacing: 0%;

  --body-1-highlight-mobile-font-family: var(--font-sans);
  --body-1-highlight-mobile-font-weight: 600; /* SemiBold */
  --body-1-highlight-mobile-font-size: clamp(1rem, 0.923rem + 0.327vw, 1.25rem); /* 16px - 20px */
  --body-1-highlight-mobile-line-height: 150%;
  --body-1-highlight-mobile-letter-spacing: 0%;


  /* body-2 */
  --body-2-desktop-large-font-family: var(--font-sans);
  --body-2-desktop-large-font-weight: 400; /* Regular */
  --body-2-desktop-large-font-size: clamp(0.75rem, 0.673rem + 0.327vw, 1rem); /* 12px - 16px */
  --body-2-desktop-large-line-height: 150%;
  --body-2-desktop-large-letter-spacing: 0%;

  --body-2-mobile-font-family: var(--font-sans);
  --body-2-mobile-font-weight: 400; /* Regular */
  --body-2-mobile-font-size: clamp(0.75rem, 0.673rem + 0.327vw, 1rem); /* 12px - 16px */
  --body-2-mobile-line-height: 150%;
  --body-2-mobile-letter-spacing: 0%;


  /* button-1 */
  --button-1-desktop-large-font-family: var(--font-sans);
  --button-1-desktop-large-font-weight: 600; /* SemiBold */
  --button-1-desktop-large-font-size: clamp(1rem, 0.923rem + 0.327vw, 1.25rem); /* 16px - 20px */
  --button-1-desktop-large-line-height: 150%;
  --button-1-desktop-large-letter-spacing: 0%;

  --button-1-mobile-font-family: var(--font-sans);
  --button-1-mobile-font-weight: 600; /* SemiBold */
  --button-1-mobile-font-size: clamp(1rem, 0.923rem + 0.327vw, 1.25rem); /* 16px - 20px */
  --button-1-mobile-line-height: 150%;
  --button-1-mobile-letter-spacing: 0%;

}

.desktop {
  font-family: var(--desktop-large-font-family);
  font-weight: var(--desktop-large-font-weight);
  font-size: var(--desktop-large-font-size);
  line-height: var(--desktop-large-line-height);
  letter-spacing: var(--desktop-large-letter-spacing);
}


.h1-font {
  font-family: var(--h1-desktop-large-font-family);
  font-weight: var(--h1-desktop-large-font-weight);
  font-size: var(--h1-desktop-large-font-size);
  line-height: var(--h1-desktop-large-line-height);
  letter-spacing: var(--h1-desktop-large-letter-spacing);
}

h1 {
  font-family: var(--h1-desktop-large-font-family);
  font-weight: var(--h1-desktop-large-font-weight);
  font-size: var(--h1-desktop-large-font-size);
  line-height: var(--h1-desktop-large-line-height);
  letter-spacing: var(--h1-desktop-large-letter-spacing);

}

.h2-font {
  font-family: var(--h2-desktop-large-font-family);
  font-weight: var(--h2-desktop-large-font-weight);
  font-size: var(--h2-desktop-large-font-size);
  line-height: var(--h2-desktop-large-line-height);
  letter-spacing: var(--h2-desktop-large-letter-spacing);
}

h2 {
  font-family: var(--h2-desktop-large-font-family);
  font-weight: var(--h2-desktop-large-font-weight);
  font-size: var(--h2-desktop-large-font-size);
  line-height: var(--h2-desktop-large-line-height);
  letter-spacing: var(--h2-desktop-large-letter-spacing);
}

.h3-font {
  font-family: var(--h3-desktop-large-font-family);
  font-weight: var(--h3-desktop-large-font-weight);
  font-size: var(--h3-desktop-large-font-size);
  line-height: var(--h3-desktop-large-line-height);
  letter-spacing: var(--h3-desktop-large-letter-spacing);
}

h3 {
  font-family: var(--h3-desktop-large-font-family);
  font-weight: var(--h3-desktop-large-font-weight);
  font-size: var(--h3-desktop-large-font-size);
  line-height: var(--h3-desktop-large-line-height);
  letter-spacing: var(--h3-desktop-large-letter-spacing);
}

.h4-font {
  font-family: var(--h4-desktop-large-font-family);
  font-weight: var(--h4-desktop-large-font-weight);
  font-size: var(--h4-desktop-large-font-size);
  line-height: var(--h4-desktop-large-line-height);
  letter-spacing: var(--h4-desktop-large-letter-spacing);
}

h4 {
  font-family: var(--h4-desktop-large-font-family);
  font-weight: var(--h4-desktop-large-font-weight);
  font-size: var(--h4-desktop-large-font-size);
  line-height: var(--h4-desktop-large-line-height);
  letter-spacing: var(--h4-desktop-large-letter-spacing);
}

.h5-font {
  font-family: var(--h5-desktop-large-font-family);
  font-weight: var(--h5-desktop-large-font-weight);
  font-size: var(--h5-desktop-large-font-size);
  line-height: var(--h5-desktop-large-line-height);
  letter-spacing: var(--h5-desktop-large-letter-spacing);
}

h5 {
  font-family: var(--h5-desktop-large-font-family);
  font-weight: var(--h5-desktop-large-font-weight);
  font-size: var(--h5-desktop-large-font-size);
  line-height: var(--h5-desktop-large-line-height);
  letter-spacing: var(--h5-desktop-large-letter-spacing);
}

.h6-font {
  font-family: var(--h6-desktop-large-font-family);
  font-weight: var(--h6-desktop-large-font-weight);
  font-size: var(--h6-desktop-large-font-size);
  line-height: var(--h6-desktop-large-line-height);
  letter-spacing: var(--h6-desktop-large-letter-spacing);
}

h6 {
  font-family: var(--h6-desktop-large-font-family);
  font-weight: var(--h6-desktop-large-font-weight);
  font-size: var(--h6-desktop-large-font-size);
  line-height: var(--h6-desktop-large-line-height);
  letter-spacing: var(--h6-desktop-large-letter-spacing);
}


.body-1 {
  font-family: var(--body-1-desktop-large-font-family);
  font-weight: var(--body-1-desktop-large-font-weight);
  font-size: var(--body-1-desktop-large-font-size);
  line-height: var(--body-1-desktop-large-line-height);
  letter-spacing: var(--body-1-desktop-large-letter-spacing);
}

.body-1-highlight {
  font-family: var(--body-1-highlight-desktop-large-font-family);
  font-weight: var(--body-1-highlight-desktop-large-font-weight);
  font-size: var(--body-1-highlight-desktop-large-font-size);
  line-height: var(--body-1-highlight-desktop-large-line-height);
  letter-spacing: var(--body-1-highlight-desktop-large-letter-spacing);
}

.body-2 {
  font-family: var(--body-2-desktop-large-font-family);
  font-weight: var(--body-2-desktop-large-font-weight);
  font-size: var(--body-2-desktop-large-font-size);
  line-height: var(--body-2-desktop-large-line-height);
  letter-spacing: var(--body-2-desktop-large-letter-spacing);
}

.button {
  font-family: var(--button-1-desktop-large-font-family);
  font-weight: var(--button-1-desktop-large-font-weight);
  font-size: var(--button-1-desktop-large-font-size);
  line-height: var(--button-1-desktop-large-line-height);
  letter-spacing: var(--button-1-desktop-large-letter-spacing);
}

/* No @media (max-width: 768px) re-declaration block here anymore — every
   value above is already fluid across the full viewport range (see the
   banner comment). The "-mobile-" variable names are kept for backward
   compatibility (some of the 98 modules may reference them directly) and
   resolve to the identical fluid value, so nothing desyncs. */


/* ========================================= */
/* The sitewide ".container { font-size }" shrink ladder that used to live
   here (16px base, stepping down to 9px across 900px-1440px, back to 16px
   at 768px) is REMOVED — see the Phase 1 banner above.
   CORRECTION (2026-07-15, post-review): this file does NOT define any
   replacement for .container — the fluid clamp() scale above only covers
   named type tokens (--h1-*, --body-1-*, etc.), never the .container
   selector itself. The chrome (Navbar-global + footer-global, ~319/321
   pages) still needs its OWN font-size scaling for the horizontal nav
   row to fit at laptop/tablet widths. That replacement clamp() now lives
   locally in each of those two modules (kept there for isolation, same
   place the old ladder lived) — see Navbar-global.module/module.html and
   footer-global.module/module.html, "RESPONSIVE FONT SIZING" section. */
/* ========================================= */
/* ========================================= */
/******* CSS VARIABLES FOR CONSISTENCY *******/
/* ========================================= */
:root {
  --border: #CBD5E1;
  --white: #FFFFFF;
  --shadow-light: 0 0.125em 0.5em rgba(0,0,0,0.1);
  --shadow-medium: 0 0.375em 0.75em rgba(0,0,0,0.1);
  --border-radius: 4px;
  --transition-fast: 0.3s ease;
  --transition-slow: 0.7s ease;
}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

.input{
  margin-right: 0 !important;
}

.form {
  width: 100%;
}

.form-columns-2 {
  display: flex;
  gap: 1.25em;
  max-width: 100% !important;
}

.form-columns-1 {
  max-width: 100% !important;
}


.hs_email .hs-input, .hs_phone .hs-input, .hs-fieldtype-intl-phone.hs-input input, fieldset, .hs-fieldtype-intl-phone.hs-input select {
  width: 100% !important;
}


.form label,.hs-error-msg, .hsfc-RichText, .hsfc-InfoAlert{
  font-family: var(--body-1-highlight-desktop-large-font-family);
  font-weight: var(--body-1-highlight-desktop-large-font-weight);
  font-size: var(--body-1-highlight-desktop-large-font-size);
  line-height: var(--body-1-highlight-desktop-large-line-height);
  letter-spacing: var(--body-1-highlight-desktop-large-letter-spacing);
}

.form input[type="text"],
.form input[type="email"],
.form input[type="file"],
.form input[type="tel"],
.form textarea,
.form select{
  width: 100%;
  padding: var(--space-3) 20px;
  background: var(--l-b);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--d-t-2);
  outline: none;
  border: 1px solid var(--border);
  transition: border-color var(--transition-base);
  font-family: var(--body-1-desktop-large-font-family);
  font-weight: var(--body-1-desktop-large-font-weight);
  font-size: var(--body-1-desktop-large-font-size);
  line-height: var(--body-1-desktop-large-line-height);
  letter-spacing: var(--body-1-desktop-large-letter-spacing);
  margin-top: var(--space-3);
  margin-bottom: 1.25em;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--p-c);
}

.hs-fieldtype-intl-phone {
  display: grid;
  gap: 2%;
  grid-template-columns: 20% 78%;
}

.input ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1.25em;
  margin: 0;
}

.hs_preferred_language {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.hs_preferred_language label {
  margin-top: 8px;
}

.hs-form-checkbox-display {
  display: flex;
  align-items: center;
  gap: 10px;
}

fieldset.form-columns-1 input[type=checkbox] {
  width: 18px !important;
  height: 18px !important;
  margin-top: 2px;
}

.actions input {
  width: 100%;
  display: block;
  padding: var(--space-3) var(--space-5);
  font-family: var(--button-1-desktop-large-font-family);
  font-weight: var(--button-1-desktop-large-font-weight);
  font-size: var(--button-1-desktop-large-font-size);
  line-height: var(--button-1-desktop-large-line-height);
  letter-spacing: var(--button-1-desktop-large-letter-spacing);
  border-radius: var(--radius-sm);
  background-color: var(--p-b-d);
  color: var(--w-t);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
}

.actions input:disabled {
  background-color:  var(--border);
}

.actions input:hover { 
  background-color:  var(--p-b-h);
}

.hs-error-msgs {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: -4%;
  margin-bottom: 1.25em;
}

.hs-error-msgs li {
  font-size: 10px;
  color: red;
}

.fieldset.form-columns-1 .hs-input {
  width: 100% !important; 
}

/* ************Checkbox************ */
.form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1.5em;
  height: 1.5em;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-base), border var(--transition-base);
}

.form input[type="checkbox"]:checked {
  background-color: var(--p-c);
  border: none;
}

.form  input[type="checkbox"]::before {
  content: "✔";
  color: white;
  font-size: .8em;
  font-weight: bold;
  display: none;
}
.form  input[type="checkbox"]::after {
  display: none;
}

.form  input[type="checkbox"]:checked::before {
  display: block;
}
@media (max-width: 768px) {
  .form-columns-2 {
    gap: 1em;
  }
  .form input[type="text"],
  .form input[type="email"],
  .form input[type="file"],
  .form input[type="tel"],
  .form textarea,
  .form select{
    margin-bottom: 1em;
  }
  .input ul {
    gap: 1em;
  }

  .hs_preferred_language {
    margin-top: 1em;
    margin-bottom: 1em;
  }
  .hs-error-msgs {
    margin-bottom: 1em;
  }
  .form label,.hs-error-msg, .hsfc-RichText, .hsfc-InfoAlert{
    font-size: 1em;
  }
  .form input[type="text"],
  .form input[type="email"],
  .form input[type="file"],
  .form input[type="tel"],
  .form textarea,
  .form select{
    font-size: 1em;
  }
  .form input[type="checkbox"] {

    width: 1em;
    height: 1em;
  }
}



/* --- Utilities --- */
/* common-Macro */
/* --- Macro CSS --- */