/* Theme base styles — recompile-bust 2026-05-06b */

/* 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;
}

/* 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: bold;
}

/**
 * 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));
    }
  
}



/*Two Column Adjust
========================================================*/
.row-fluid .two-col-adjust>span {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: stretch;
	-moz-box-align: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	flex-wrap: wrap;
	-wevkit-flex-wrap: wrap;
	flex-direction: row;
	-webkit-flex-direction: row;
	margin-right: -2.5%;
}
body .row-fluid .two-col-adjust span>.hs_cos_wrapper {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-basis: 46%;
	-webkit-flex-basis: 46%;
	float: left;
	margin-right: 4%;
	margin-top: 40px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}
@media(max-width:767px) {
	body .row-fluid .two-col-adjust span>.hs_cos_wrapper {
		display: block;
		width: 100%;
		margin-top: 20px;
		width: 100%;
		margin: 10px 0;
		float: none
	}
	.row-fluid .two-col-adjust>span {
		display: block;
		margin-right: 0;
	}
}
/*==================================================
Three Col Adjust
==================================================*/
.row-fluid .three-col-adjust>span {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: stretch;
	-moz-box-align: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	flex-wrap: wrap;
	-wevkit-flex-wrap: wrap;
	flex-direction: row;
	-webkit-flex-direction: row;
	margin-right: -3.2%;
}
body .row-fluid .three-col-adjust span>.hs_cos_wrapper {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-basis: 29.96%;
	-webkit-flex-basis: 29.96%;
	float: left;
	margin-right: 3.2%;
	margin-top: 2.43%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	flex-direction: column;
	-webkit-flex-direction: column;
}
@media (max-width:767px) {
	.row-fluid .three-col-adjust>span {
		display: block;
		margin-right: 0;
	}
	body .row-fluid .three-col-adjust span>.hs_cos_wrapper {
		display: block;
		width: 100%;
		margin: 0;
		margin-top: 20px;
		max-width: 379px;
		width: 100%;
		margin: 30px auto 0;
		float: none;
	}
}
/*==================================================
Four Col Adjust
==================================================*/
.row-fluid .four-col-adjust>span {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: stretch;
	-moz-box-align: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	flex-wrap: wrap;
	-wevkit-flex-wrap: wrap;
	flex-direction: row;
	-webkit-flex-direction: row;
	margin-right: -2.565%;
}
body .row-fluid .four-col-adjust span>.hs_cos_wrapper {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-basis: 22.5%;
	-webkit-flex-basis: 22.5%;
	float: left;
	margin-right: 2.5%;
	margin-top: 2.43%;
	box-sizing: border-box;
	position: relative;
}
@media (max-width:767px) {
	.row-fluid .four-col-adjust>span {
		display: block;
		margin-right: 0;
	}
	body .row-fluid .four-col-adjust span>.hs_cos_wrapper {
		display: block;
		flex-basis: 100%;
		width: 100%;
		-webkit-flex-basis: 100%;
		margin: 0;
		margin-top: 20px;
	}
}
@media(min-width:768px) and (max-width:1024px) {
	.row-fluid .four-col-adjust>span {
		display: inline-block;
		margin-right: 0;
	}
	body .row-fluid .four-col-adjust span>.hs_cos_wrapper {
		display: block;
		flex-basis: 50%;
		width: 47%;
		-webkit-flex-basis: 50%;
		margin: 0;
		margin-top: 20px;
	}
}
/*==================================================
Five Col Adjust
==================================================*/
.row-fluid .five-col-adjust>span {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: stretch;
	-moz-box-align: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	flex-wrap: wrap;
	-wevkit-flex-wrap: wrap;
	flex-direction: row;
	-webkit-flex-direction: row;
	margin-right: -2.565%;
}
body .row-fluid .five-col-adjust span>.hs_cos_wrapper {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-basis: 17.5%;
	-webkit-flex-basis: 17.5%;
	float: left;
	margin-right: 2.5%;
	margin-top: 2.43%;
	box-sizing: border-box;
	position: relative;
}
@media (max-width:767px) {
	.row-fluid .five-col-adjust>span {
		display: block;
		margin-right: 0;
	}
	body .row-fluid .five-col-adjust span>.hs_cos_wrapper {
		display: block;
		flex-basis: 100%;
		width: 100%;
		-webkit-flex-basis: 100%;
		margin: 0;
		margin-top: 30px;
	}
}

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

body {
  line-height: 1.4;
  overflow-wrap: break-word;
}

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}
.disclaimer {
  background: #e8e8e8;
  padding: 60px 0 0;
}
.disclaimer p{
  font-size: 14px;
  line-height: 1.2;
}
.disclaimer p:last-child{
  margin:0;
}
.disclaimer p a {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: underline;
}
/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

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

/* Lists */

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

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;
}

/* Horizontal rules */

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

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}

.align-left{
  text-align: left;
  margin-right: auto;
}
.align-center{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.align-right{
  text-align: right;
  margin-left: auto;
}

.black_text,
.black_text h1,
.black_text h2,
.black_text h3,
.black_text h4,
.black_text h5,
.black_text h6,
.black_text p,
.black_text li{
  color: var(--black_color);
}

.text-margin-zero,
.text-margin-zero h1,
.text-margin-zero h2,
.text-margin-zero h3,
.text-margin-zero h4,
.text-margin-zero h5,
.text-margin-zero h6,
.text-margin-zero p,
.text-margin-zero li,
.text-margin-zero label{
  margin-bottom: 0;
}

@media(min-width: 768px){
  .desk-hide{
    display: none !important;
  }
}

@media(max-width: 767px){
  .mob-hide{
    display: none !important;
  }
}
/* Fields */

.hs-form-field {
  margin-bottom: 23px;
}

/* Labels */

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

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
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 */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}
body form input,
body form select,
body form input:focus-visible,
body form select:focus-visible{
  outline: none !important;
}
form ul.hs-error-msgs{
  position: relative;
}
ul.hs-error-msgs li label.hs-error-msg {
  display: block;
  font-size: 12px;
  line-height: 14px;
  position: absolute;
}
ul.hs-error-msgs li label a{
  display: none;
}
/* 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 a{
  display:block;
}
header .custom-menu-primary .hs-menu-wrapper.hs-menu-flow-horizontal>ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

}
header .custom-menu-primary li.hs-menu-item.hs-menu-depth-1 {
  padding:16px 0;
  margin:0 18px;
}
header .custom-menu-primary li.hs-menu-item.hs-menu-depth-1:last-child{
  margin-right:0px;
}
header .hs_cos_wrapper_type_logo a {
  display:block;
}
header .hs_cos_wrapper_type_logo a img {
  width: 100% !important;
  display: block;
}
header .custom-menu-primary ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
@media(min-width:993px){
  header .custom-menu-primary .hs-menu-wrapper.hs-menu-flow-horizontal{
    display:block !important;
    overflow: visible !important;
  }  
  header .custom-menu-primary  ul.hs-menu-children-wrapper li.hs-menu-item.hs-item-has-children ul.hs-menu-children-wrapper:before{
    content: '';
    display: inline-block;
    position: absolute;
    bottom: 100%;
    left: -15px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 25px;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom-width: 10px;
    border-bottom-style: solid;
    -webkit-transition:all 0.35s;
    -o-transition:all 0.35s;
    transition:all 0.35s;
  }
  header .custom-menu-primary li.hs-menu-item.hs-item-has-children ul.hs-menu-children-wrapper {
    position: absolute;
    width: 100%;
    min-width: 230px;
    -webkit-box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
    z-index: 99;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    opacity: 0;
    visibility: hidden;
    top: 80px;
    left: 0;
    padding:10px;
    display:block !important;
  }
  header .custom-menu-primary ul.hs-menu-children-wrapper li.hs-menu-item.hs-item-has-children ul.hs-menu-children-wrapper {
    top: 100px;
    left: 100%;
  }
  header .custom-menu-primary li.hs-item-has-children:hover>ul.hs-menu-children-wrapper {
    opacity: 1;
    visibility: visible;
    top: 100%;
  }
  header .custom-menu-primary ul.hs-menu-children-wrapper li.hs-menu-item.hs-item-has-children:hover>ul.hs-menu-children-wrapper {
    top:0px;
  }
  header .custom-menu-primary li.hs-menu-item.hs-menu-depth-1.hs-item-has-children>a{
    position: relative;
    padding-right:15px;
  }
  header .custom-menu-primary li.hs-menu-item.hs-menu-depth-1.hs-item-has-children>a::after{
    content: "\276F";
    font-size: 12px;
    position: absolute;
    right: 2px;
    top:50%;
    -webkit-transform: translateY(-50%) rotate( 90deg );
    -ms-transform: translateY(-50%) rotate( 90deg );
    transform: translateY(-50%) rotate( 90deg );
    color: inherit;
  }
  header .custom-menu-primary  li.hs-menu-item.hs-menu-depth-1 ul.hs-menu-children-wrapper li.hs-menu-item {
    padding:10px;
    -webkit-transition :all 0.35s;
    -o-transition :all 0.35s;
    transition :all 0.35s;
  }  
  header .custom-menu-primary  li.hs-menu-item.hs-menu-depth-1 ul.hs-menu-children-wrapper li.hs-menu-item:hover {
    background-color :var(--secondary_color_one);
  }
  header .custom-menu-primary li.hs-menu-item.hs-item-has-children{
    position: relative;
  }
}

@media(max-width:992px){
  header .custom-menu-primary li.hs-menu-item.hs-item-has-children>ul.hs-menu-children-wrapper{
    display:none;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 15px;
  }
  header .custom-menu-primary li.hs-menu-item.hs-item-has-children{
    position: relative;
  }
  header .global-header-main .main_header .main_header_fix{
    position : relative;
    display : block;
  }     
  header .custom-menu-primary .hs-menu-wrapper.hs-menu-flow-horizontal {
    display: none;
    margin-top: 0;
    -webkit-box-shadow: 0 7px 13px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 7px 13px 0 rgb(0 0 0 / 10%);    
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    top: 73px;
  }
  header .custom-menu-primary .hs-menu-wrapper.hs-menu-flow-horizontal > ul{
    padding:20px;
  }
  header .custom-menu-primary li.hs-menu-item.hs-item-has-children>ul.hs-menu-children-wrapper li{
    padding: 7px 10px;
  }
  header .custom-menu-primary ul{
    background-color : #fff;
  }
  header .custom-menu-primary .hs-menu-wrapper.active-branch.flyouts.hs-menu-flow-horizontal>ul {
    display: block;
  }
  .menu-child-open .hs-menu-children-wrapper{
    display : block !important;
  }
  header .custom-menu-primary li.hs-menu-item:not(:first-child){
    display : block;
    border-top : 1px solid var(--secondary_color_one);
  }
  /* Toggle Button
  ========================================================================== */
  .mobile-trigger {
    display: inline-block !important;
    cursor: pointer;
    position: absolute;
    top:30px;
    right:15px;
    width: auto;
    height:24px;
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    text-transform: uppercase;
    border-radius: 4px;
    line-height: 1;
  }
  /* Toggle Button Icon
  ========================================================================== */
  .mobile-trigger i {
    display: inline;
    position: relative;
    -webkit-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    transition: all .1s ease-in;
    z-index: 10;
  }
  .header_sticky .mobile-trigger i,
  .header_sticky .mobile-trigger i:before,
  .header_sticky .mobile-trigger i:after {
    background-color:var(--secondary_color);
  }
  .mobile-trigger i:before,
  .mobile-trigger i:after {
    position: absolute;
    content: '';
    -webkit-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    transition: all .1s ease-in;
  }
  .mobile-trigger i,
  .mobile-trigger i:before,
  .mobile-trigger i:after {
    width: 35px;
    height: 4px;
    border-radius: 3px;
    display: inline-block;
    background-color:var(--secondary_color);
  }
  .mobile-trigger i:before {
    top: -9px;
  }
  .mobile-trigger i:after {
    top: 9px;
  }
  /* Toggle Button Icon Open
  ========================================================================== */

  .mobile-open .mobile-trigger i {
    background: transparent;
    -webkit-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    transition: all .1s ease-in;
  }
  .mobile-open .mobile-trigger i:before,
  .mobile-open .mobile-trigger i:after{
    top: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .mobile-open .mobile-trigger i:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  /* Child Toggle Button
  ========================================================================== */
  .child-trigger {
    display: block;
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 0;
    width: 100%;
    min-width: 55px;
    padding: 0;
  }
  header .hs-menu-item.hs-menu-depth-1.hs-item-has-children > .child-trigger {
    height: 41px;
  }
  header .hs-menu-item.hs-menu-depth-1.hs-item-has-children ul.hs-menu-children-wrapper .child-trigger {
    height: 41px;
  }
  .child-trigger:hover {
    text-decoration: none;
  }
  .child-trigger i {
    position: relative;
    top: 50%;
    margin-left: auto;
    margin-right: 0;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    right: 20px;
  }
  .child-trigger i:after {
    position: absolute;
    content: '';
  }
  .child-trigger i,
  .child-trigger i:after {
    width: 10px;
    height: 1px;
    background-color: var(--primary_color);
    display: block;
  }
  .child-trigger i:after {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  .menu-child-open .child-trigger i:after{
    opacity : 0;
  }
  /* Toggle Button Icon Open
  ========================================================================== */
  .child-trigger.child-open i:after {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
  } 
  header .custom-menu-primary li.hs-menu-item>ul.hs-menu-children-wrapper li > a {
    color: var(--white_color);
  }
}

@media(min-width: 993px) and (max-width: 1120px){
  body .header_main .content-wrapper {
    max-width: 100% !important;
  }
}

/* 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;
  }
}
.section-bg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/**********  Flex  **********/
.mob-flex,
.flex{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
.flex-wrap {
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
.flex-no-wrap,
.mob-flex.flex-no-wrap,
.flex.flex-no-wrap{
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.flex-center{
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex-between-center{
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/**********  Flex-Direction **********/

.flex-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}
.flex-row-reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.flex-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-col-reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

/**********  Flex-Align **********/

.align-start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.align-end {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.align-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.align-baseline {
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}

.align-stretch {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

/**********  Flex-Justify **********/

.justify-start {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.justify-end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.justify-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.justify-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.justify-around {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.justify-evenly {
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}

/**********  Flex-Column **********/

.flex > .flex-1{
  -ms-flex-preferred-size:100%;
  flex-basis:100%;
}
.flex > .flex-2{
  -ms-flex-preferred-size:49%;
  flex-basis:49%;
  margin-right:2%;
}
.flex > .flex-2:nth(2n+2){
  margin-right:0;
}
.flex > .flex-3{
  -ms-flex-preferred-size:32.33%;
  flex-basis:32.33%;
  margin-right:1.50%;
}
.flex > .flex-2:nth(3n+3){
  margin-right:0;
}
.flex > .flex-4{
  -ms-flex-preferred-size:24%;
  flex-basis:24%;
  margin-right:1.33%;
}
.flex > .flex-2:nth(4n+4){
  margin-right:0;
}
.flex > .flex-5{
  -ms-flex-preferred-size:19%;
  flex-basis:19%;
  margin-right:1.25%;
}
.flex > .flex-2:nth(5n+6){
  margin-right:0;
}


/**********  Flex-Margin-bottom **********/

.flex-wrap > .flex-1{
  margin-bottom:2%;
}
.flex-wrap > .flex-2{
  margin-bottom:2%;
}
.flex-wrap > .flex-3{
  margin-bottom:1.50%;
}
.flex-wrap > .flex-4{
  margin-bottom:1.33%;
}
.flex-wrap > .flex-5{
  margin-bottom:1.25%;
}


@media(max-width:767px){
  .flex{
    display:block;
  }
  .flex > .flex-1,
  .flex > .flex-2,
  .flex > .flex-3,
  .flex > .flex-4,
  .flex > .flex-5{
    -ms-flex-preferred-size:100%;
    flex-basis:100%;
  }
  .mob-flex-row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .mob-flex-col-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
  .mob-flex.flex-between-center{
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
}

/**********  blocks  **********/

.inline-box{
  display:inline-block;
}
.box-none{
  display:none;
}
.box-block{
  display:block;
}

/**********  Alignment  **********/

.center-align{
  text-align: center; 
}

.left-align{
  text-align: left; 
}

.right-align{
  text-align: right; 
}

/**********  Alignment Margin  **********/

.center-margin{
  margin-left:auto;
  margin-right:auto;
}

.left-margin{
  margin-left:0;
  margin-right:auto;
}

.right-margin{
  margin-left:auto;
  margin-right:0;
}
/**********  Overlay  **********/

.overlay_section{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  z-index:0;
}

/**********  Positions  **********/

.pos_abs{
  position: absolute;
}

.pos_rel{
  position: relative;
}

/********** Font Weight  **********/

.fw-9,
.fw-9 h1,
.fw-9 h2,
.fw-9 h3,
.fw-9 h4,
.fw-9 h5,
.fw-9 h6,
.fw-9 li,
.fw-9 p,
.fw-9 a {
  font-weight:900;
}

.fw-8,
.fw-8 h1,
.fw-8 h2,
.fw-8 h3,
.fw-8 h4,
.fw-8 h5,
.fw-8 h6,
.fw-8 li,
.fw-8 p,
.fw-8 a {
  font-weight:800;
}

.fw-7,
.fw-7 h1,
.fw-7 h2,
.fw-7 h3,
.fw-7 h4,
.fw-7 h5,
.fw-7 h6,
.fw-7 li,
.fw-7 p,
.fw-7 a {
  font-weight:700;
}

.fw-6,
.fw-6 h1,
.fw-6 h2,
.fw-6 h3,
.fw-6 h4,
.fw-6 h5,
.fw-6 h6,
.fw-6 li,
.fw-6 p,
.fw-6 a {
  font-weight:600;
}

.fw-5,
.fw-5 h1,
.fw-5 h2,
.fw-5 h3,
.fw-5 h4,
.fw-5 h5,
.fw-5 h6,
.fw-5 li,
.fw-5 p,
.fw-5 a {
  font-weight:500;
}

.fw-4,
.fw-4 h1,
.fw-4 h2,
.fw-4 h3,
.fw-4 h4,
.fw-4 h5,
.fw-4 h6,
.fw-4 li,
.fw-4 p,
.fw-4 a {
  font-weight:400;
}

.fw-3,
.fw-3 h1,
.fw-3 h2,
.fw-3 h3,
.fw-3 h4,
.fw-3 h5,
.fw-3 h6,
.fw-3 li,
.fw-3 p,
.fw-3 a {
  font-weight:300;
}

/**********  Color  **********/


.all-text-white,
.all-text-white h1,
.all-text-white h2,
.all-text-white h3,
.all-text-white h4,
.all-text-white h5,
.all-text-white h6,
.all-text-white p,
.body-container-wrapper .all-text-white li,
.all-text-white span,
.body-container-wrapper .all-text-white a,
.all-text-white a{
  color:#ffffff;
}

.white-border li,
.white-border li span,
.white-border{
  border-color:#FFFFFF;
}

.all-text-black,
.all-text-black h1,
.all-text-black h2,
.all-text-black h3,
.all-text-black h4,
.all-text-black h5,
.all-text-black h6,
.all-text-black p,
.body-container-wrapper .all-text-black li,
.all-text-black span,
.body-container-wrapper .all-text-black a,
.all-text-black a{
  color:#000000;
}
.black-border li,
.black-border li span,
.black-border{
  border-color:#000000;
}

/**********  box Shadow **********/

.box-shadow{
  -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
  border-radius: 16px;
}
.box-shadow-hover{
  -webkit-transition:all 0.35s;
  -o-transition:all 0.35s;
  transition:all 0.35s;
}
.box-shadow-hover:hover{
  -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
}

/**********  Link Arrow  **********/

.under-line a,
a.under-line{
  text-decoration: underline;
}

.arrow-one a,
a.arrow-one{
  position:relative;
  display: inline-block;
}
.arrow-one.block_arrow a,
a.arrow-one.block_arrow{
  display:block;
}
.arrow-one a:after,
a.arrow-one:after{
  position: absolute;
  background-size: cover;
  top: 50%;
  background-repeat: no-repeat;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition:all 0.35s;
  -o-transition:all 0.35s;
  transition:all 0.35s;
} 
.arrow-one a:after,
a.arrow-one:after{
  content:"";
  background-image:url('https://20981506.fs1.hubspotusercontent-na1.net/hubfs/20981506/Taurus_assets/linking_arrow.svg');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  width:20px;
  height:16px;
  line-height: 1;
  font-weight: 300;
  right: -30px;
}
.arrow-one.block_arrow a:after,
a.arrow-one.block_arrow:after{
  right: 0px;
}
.link_hover_main:hover a.arrow-one:after, 
.link_hover_main:hover .arrow-one a:after, 
.arrow-one a:hover:after,
a.arrow-one:hover:after{
  -webkit-transform: translateY(-50%) translateX(5px);
  -ms-transform: translateY(-50%) translateX(5px);
  transform: translateY(-50%) translateX(5px);
}


/**********  Slick Slider  **********/

body .body-container-wrapper ul.slick-dots {
  padding: 0;
  margin: 0;
  text-align: center;
  display:block;
  margin-top:65px;
}
body .body-container-wrapper ul.slick-dots li {
  list-style:none;
  padding:0;
  margin:0;
  display:inline-block;
  margin:0 7.5px;
  line-height: 0;
}
body .body-container-wrapper ul.slick-dots li::before{
  content:none !important;
}
body .body-container-wrapper ul.slick-dots li button {
  background-color:var(--primary_color);
  font-size: 0;
  line-height: 0;
  height: 6px;
  padding: 0;
  width: 6px;
  border-radius: 100%;
  color: transparent;
  border: 0;
  opacity:0.6;
  transition:all 0.24s;
}

body .body-container-wrapper ul.slick-dots li.slick-active button {
  opacity:1;
}

.custom_slick_button .slick_buttons .slick_arrow{
  align-items: center;
  background-color: #ecf3fc;
  color: var(--secondary_color);
  cursor: pointer;
  display: flex;
  flex-basis: 50px;
  font-size: 18px;
  justify-content: center;
  max-width: 50px;
  min-height: 50px;
  text-align: center;
}
.custom_slick_button .slick-initialized .slick-arrow {
    display: none !important;
}
@media(max-width:767px){
  body .body-container-wrapper ul.slick-dots {
    margin-top:25px;
  }
  .custom_slick_button .slick_buttons .slick_arrow{
    max-width: 38px;
    min-height:38px;
  }
}

/**********  Rich text classes  **********/

.margin-0{
  margin: 0;
}

.all-margin-0,
.all-margin-0 h1,
.all-margin-0 h2,
.all-margin-0 h3,
.all-margin-0 h4,
.all-margin-0 h5,
.all-margin-0 h6{
  margin: 0;
}

@media(max-width: 767px){

}

/* v2 redesign — shared hero base + grain/glow utilities */
/* ================================================
   v2-shared — Shared CSS for v2 redesign
   Film-grain SVG URL + hero base + utilities
   ================================================ */

/* Intentionally NOT opting in to cross-document view transitions: when
   the PREview hero headline differs per subpage, the named element gets
   a default 250ms cross-fade between snapshots, which looks exactly like
   the entrance animation we are trying to suppress. The sessionStorage
   flag (see AP_Hero and AP_NewsFeed_Hero inline scripts) delivers the
   stable-hero feel reliably across every browser. */

/* Film grain SVG data URIs exposed as custom properties so individual
   modules can apply them via `background: var(--v2-grain)` without
   repeating the ~200-char data URI. Each module retains its own
   opacity, z-index, blend-mode tuning. */
:root {
  --v2-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --v2-grain-fine: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ── v2 type tokens (audience-lens) ──
     Older-investor audience: bigger base, generous line-height, higher
     contrast. New v2 modules should pull from these tokens instead of
     hard-coding 11/12/13px sizes.

     Research basis (2026-04-27 audit):
     • Health Literacy Online recommends ≥19px body text for older-audience
       sites — that's our floor on light bg.
     • Nielsen Norman / WCAG recommend body line-height ≥1.5× (we use 1.65).
     • >20% of 85-year-olds have meaningful visual impairment; ~1% of 50-54.
       Accordant's accredited-investor audience skews into that range.
     • Optimal line-length 50-75 chars (~66). Audit content max-widths too. */
  --v2-text-body:        19px;   /* was 15-17 in modules; bumped to research floor */
  --v2-text-body-mobile: 17px;   /* was 14 in modules; bumped from earlier 16 */
  --v2-text-meta:        15px;   /* was 13 — captions, dates, credits */
  --v2-text-eyebrow:     13px;   /* was 11 — tiny uppercase section labels */
  --v2-text-button:      14px;   /* was 12 — CTA labels */
  --v2-text-h2:          clamp(30px, 3.2vw, 42px);  /* normalized v2 section heading — was 36-48px across modules */
  --v2-line-height-body: 1.65;
  --v2-letter-spacing-eyebrow: 2px;

  /* ── v2 ink + accent (contrast-checked) ──
     Brand teal #059A91 on white is ~3.04:1 — fails WCAG AA for small
     text. Use --v2-teal-label for any small uppercase label on light
     bg; keep brand teal for accent lines, larger text, hover states. */
  --v2-ink:         #134847;   /* primary heading/text on light bg (site-wide canonical) */
  --v2-ink-soft:    #4A5568;   /* body copy on light bg (site-wide canonical) */
  --v2-ink-on-dark: #FFFFFF;
  --v2-teal-brand:  #059A91;   /* hero accent line, hover, large text */
  --v2-teal-label:  #03625A;   /* small uppercase labels — ~5.1:1 on white, AA-safe */

  /* ── v2 section surfaces ──
     Canonical light-section backgrounds. --v2-surface and --v2-surface-gray
     are near-identical (intentional, for sections meant to read as one block).
     --v2-surface-tint is the distinct band used to SEPARATE adjacent light
     sections so they don't blend into one flat field. Alternate
     surface ↔ surface-tint down a light page for visual rhythm. */
  --v2-surface:      #FAFBFB;   /* default light section */
  --v2-surface-gray: #F7F9F9;   /* subtle gray (reads as same block as surface) */
  --v2-surface-tint: #E6EEEE;   /* distinct gray-teal band — separates stacked light sections */
  --v2-surface-hero: #E0E6E7;   /* light-hero band background (v2-light-hero, FP hero) */

  /* Light teal for text/accents on DARK backgrounds — brand teal #059A91 fails
     AA there, so use this lighter variant (AA-safe on #0F2E2E and #134847).
     Canonical replacement for the drifting #82CDD3/#5BD4C9/#5ED3CB/#5EBFB7 set. */
  --v2-teal-on-dark: #82CDD3;
}

/* ── Hero base ──
   Foundation shared by all v2 page heroes. Page-specific overrides
   (content max-width, font-size, background-position) live in the
   individual module.css files. */
.v2-hero {
  position: relative;
  min-height: calc(60vh + 130px);
  min-height: calc(60svh + 130px);
  display: flex;
  align-items: flex-end;
  background-color: #0F2E2E;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  padding: 130px 0 clamp(56px, 8vh, 110px);
  overflow: hidden;
}

/* Directional gradient (only when a bg image is set).
   Headline/CTA stack sits at the LOWER-LEFT (.v2-hero is align-items:flex-end).
   Old 135deg gradient darkened the TOP-left (wrong corner) — bright photos
   like the Merck campus left white text struggling on glass reflections.
   New stack: a horizontal left-to-right fade for the full headline column,
   plus a stronger bottom-to-top fade so the CTA area stays legible. */
.v2-hero.has-bg-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(10, 32, 32, 0.80) 0%,
      rgba(10, 32, 32, 0.55) 35%,
      rgba(10, 32, 32, 0.18) 62%,
      transparent 85%),
    linear-gradient(to top,
      rgba(10, 32, 32, 0.62) 0%,
      transparent 42%);
  z-index: 1;
  pointer-events: none;
}

/* Film grain overlay — heroes use the standard grain */
.v2-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.04;
  background: var(--v2-grain);
  background-size: 256px 256px;
  mix-blend-mode: overlay;
}

.v2-hero .content-wrapper {
  position: relative;
  z-index: 3;
  width: 100%;
}

.v2-hero__content { max-width: 680px; }

/* Animated teal accent bar */
@keyframes v2-drawLine {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.v2-hero__accent-line {
  width: 48px;
  height: 2px;
  background: #059A91;
  margin-bottom: clamp(20px, 3vh, 36px);
  transform-origin: left;
  animation: v2-drawLine 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.v2-hero__headline {
  /* Unified hero size across all v2 pages (was clamp(28, 3.2vw, 48)).
     Sets the ceiling at 44px on laptops; HP, FP, IN, OM heroes were
     individually overshooting (52–72px) before this normalization. */
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 300;
  color: #FFFFFF;
  line-height: 1.08;
  margin: 0 0 clamp(16px, 2.5vh, 32px);
  letter-spacing: -0.5px;
}

.v2-hero__subtitle {
  font-size: var(--v2-text-body); /* 19px — desktop body floor; media query drops to 17 on narrow */
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85); /* was 0.75 — bumped per audience-lens contrast rule */
  font-style: italic;
  line-height: 1.65;
  margin: 0;
  max-width: 520px;
}

/* Dramatic variant — tighter content width only.
   Headline size is unified with .v2-hero__headline (clamp 26-3.2vw-44).
   Used by WA, PO, SL, DF, FP heroes. */
.v2-hero--dramatic .v2-hero__content { max-width: 620px; }
.v2-hero--dramatic .v2-hero__headline {
  letter-spacing: -0.5px;
}
.v2-hero--dramatic .v2-hero__subtitle { max-width: 480px; }

@media (max-width: 768px) {
  .v2-hero--dramatic .v2-hero__subtitle { max-width: 100%; }
}

@media (max-width: 480px) {
  .v2-hero--dramatic .v2-hero__subtitle { font-size: 17px; /* audience-lens floor */ }
}

/* PRE hero (What Is Private Real Estate) — anchor image to the top so
   only the upper portion of the photo shows. Overrides the base
   `.v2-hero { background-position: center 42% }`. Tune the Y value if
   the focal area shifts (lower = more top showing, higher = more middle). */
.v2-hero--pre {
  background-position: center top;
}

/* ================================================================
   Preview variant — used by AP_Hero (PREview homepage) and
   AP_NewsFeed_Hero (PREview newsfeed). Lives in shared CSS so any
   module using `.v2-hero--preview` gets identical sizing/behavior.
   Was previously in AP_Hero/module.css — newsfeed page didn't load
   it because its module CSS isn't bundled there, causing the hero
   to render taller and at a different image offset.
   ================================================================ */
.v2-hero--preview {
  /* Anchor image so more of the BUILDING shows, less palm-tops.
     Lauren feedback: full-screen view was showing only palms + wood
     (top of image), reading as "tropical Bali". Push Y to ~70% to crop
     from the top and reveal the building's middle/lower floors. */
  min-height: calc(28vh + 130px);
  min-height: calc(28svh + 130px);
  padding: clamp(130px, 15vh, 160px) 0 clamp(56px, 7vh, 88px);
  background-position: center 70%;
  /* Kill the dark-teal strip Cole was seeing between the translucent
     nav and the image. The base .v2-hero has bg-color #0F2E2E as a
     fallback; with bg-size cover the image should fully cover it, but
     the nav's translucent layer + backdrop-filter can let the fallback
     bleed through at the seam. Transparent removes any chance of it
     showing on PREview pages specifically. */
  background-color: transparent;
}

.v2-hero--preview .v2-hero__content {
  max-width: clamp(320px, 40vw, 540px);
}

.v2-hero--preview .v2-hero__headline {
  /* Inherits unified clamp(26, 3.2vw, 44) from .v2-hero__headline.
     Only structural overrides remain (max-width keeps copy column tight). */
  font-weight: 300;
  color: #FFFFFF;
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0 0 clamp(16px, 2vh, 26px);
  max-width: 9.2em;
  text-wrap: balance;
}

.v2-hero--preview .v2-hero__subtitle {
  font-family: inherit;
  font-size: clamp(var(--v2-text-body-mobile), 1vw, 19px); /* 17-19px via tokens */
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin: 0;
  max-width: 34em;
  text-wrap: balance;
}

.v2-hero--preview .v2-hero__subtitle strong {
  font-weight: 600;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.85em;
  margin-right: 0.15em;
}

/* Preview variant — responsive ladder.
   Breakpoints tuned so the headline keeps its two-line wrap
   ("Welcome to" / "Accordant PREview" — or equivalent) at every size. */

/* Wide monitors (1920+) — content width only.
   Headline size stays at the unified clamp(26, 3.2vw, 44) — at 1920vw
   the 3.2vw branch resolves to 61.4px but the 44px ceiling caps it. */
@media (min-width: 1920px) {
  .v2-hero--preview .v2-hero__content { max-width: 580px; }
}

/* Medium desktop (1200–1440) */
@media (max-width: 1440px) {
  .v2-hero--preview {
    padding: clamp(130px, 14vh, 156px) 0 clamp(52px, 6.5vh, 80px);
  }
}

/* Laptop (1024–1200) */
@media (max-width: 1200px) {
  .v2-hero--preview {
    padding: 136px 0 clamp(52px, 6.5vh, 76px);
    background-position: center 65%;
  }
  .v2-hero--preview .v2-hero__content {
    max-width: clamp(300px, 42vw, 480px);
  }
}

/* Tablet landscape (768–1024) */
@media (max-width: 1024px) {
  .v2-hero--preview {
    min-height: calc(44vh + 120px);
    min-height: calc(44svh + 120px);
    padding: 132px 0 clamp(56px, 7vh, 80px);
    background-position: center 68%;
  }
  .v2-hero--preview .v2-hero__content { max-width: 440px; }
}

/* Tablet portrait / large phone (640–768) */
@media (max-width: 768px) {
  .v2-hero--preview {
    min-height: calc(48vh + 100px);
    min-height: calc(48svh + 100px);
    padding: 124px 0 48px;
    background-position: center 70%;
  }
  .v2-hero--preview .v2-hero__content { max-width: 92%; }
  .v2-hero--preview .v2-hero__headline {
    font-size: clamp(28px, 6.2vw, 40px);
    line-height: 1.1;
    max-width: 10ch;
  }
  .v2-hero--preview .v2-hero__subtitle {
    font-size: 16px;
    max-width: 100%;
  }
}

/* Small phone (480–640) */
@media (max-width: 640px) {
  .v2-hero--preview {
    padding: 116px 0 44px;
    background-position: center 40%;
  }
  .v2-hero--preview .v2-hero__headline {
    font-size: clamp(26px, 7.4vw, 36px);
  }
}

/* Mobile (below 480) */
@media (max-width: 480px) {
  .v2-hero--preview {
    min-height: calc(44vh + 90px);
    min-height: calc(44svh + 90px);
    padding: 104px 0 36px;
    background-position: center 55%;
  }
  .v2-hero--preview .v2-hero__headline {
    font-size: clamp(24px, 8.4vw, 32px);
    letter-spacing: -0.3px;
    max-width: 11ch;
  }
  .v2-hero--preview .v2-hero__subtitle {
    font-size: 15px;
    line-height: 1.55;
  }
  .v2-hero--preview .v2-hero__subtitle strong {
    font-size: 0.78em;
    letter-spacing: 1.1px;
  }
}

/* ── Hero CTA — site-wide canonical pattern ──────────────────────────────
   Ghost outline button on dark hero backgrounds. Fills white from the
   bottom on hover with the arrow sliding right. Used by HP_Hero, WA_Hero,
   and mirrors OF_Hero's `.of-hero__button--primary` so the whole site
   reads as one button family.

   !important on every layout property is required: the theme's
   `.body-container-wrapper a` at (0,1,1) injects ``
   (font-family, font-size, font-weight, line-height) PLUS
   `transition: all 0.35s`. Without !important the theme wins on
   specificity (we're at (0,1,0)) and `transition: all` animates every
   property change → visible shrink/grow on hover and click. */
.v2-hero__cta-wrap { margin-top: clamp(28px, 4vh, 48px); }

/* .v2-hero__cta is the canonical hero ghost-on-dark CTA. Updated
   2026-05-21 to use background-position animation instead of ::before
   scaleY — eliminates the 1.5px sliver at the bottom that the old
   ::before pattern showed during the fill animation (the pseudo-element
   sits inside the padding-box, so the border-bottom gap was visible).
   Now the fill is a linear-gradient ON the parent's background, which
   naturally sits inside the border = no gap possible. */
.v2-hero__cta,
.v2-hero__cta:link,
.v2-hero__cta:visited,
.v2-hero__cta:hover,
.v2-hero__cta:active,
.v2-hero__cta:focus,
.v2-hero__cta:focus-visible {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 48px !important;
  background-color: transparent !important;
  background-image: linear-gradient(to top, #FFFFFF 50%, transparent 50%) !important;
  background-size: 100% 202% !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 3px !important;
  padding: 14px 28px 13px !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background-position 0.45s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.45s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.45s ease !important;
  transform: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.v2-hero__cta:hover,
.v2-hero__cta:focus-visible {
  background-position: 0 100% !important;
  color: #0F2E2E !important;
  border-color: #FFFFFF !important;
  outline: none;
}

.v2-hero__cta::after {
  content: '\2192';
  display: inline-block;
  font-size: 16px;
  line-height: 0;
  transform: translateY(-1px);
  transition: transform 0.35s ease;
}

.v2-hero__cta:hover::after { transform: translate(5px, -1px); }

.v2-hero__cta:focus-visible {
  outline: 2px solid #059A91 !important;
  outline-offset: 4px;
}

/* ── Property caption overlay ──────────────────────────────────────────
   White-on-image caption for full-bleed v2 heroes whose background photo
   is a real NFI-ODCE component asset. Mirrors HP_ODCEX's "what building
   are we showing" treatment so the pattern is consistent site-wide.
   Position: bottom-left of the hero, aligned to the content gutter. */
.v2-hero__property-caption {
  position: absolute;
  bottom: clamp(20px, 3.5vh, 36px);
  left: clamp(24px, 5vw, 96px); /* matches content-wrapper gutter so caption aligns with headline */
  z-index: 2;
  isolation: isolate; /* contains the dark halo so it stays scoped to the caption */
  margin: 0 !important;
  padding: 14px 18px !important; /* room for the soft dark halo behind */
  max-width: 380px; /* wider so the descriptive "Component asset of…" line wraps cleanly */
  font-size: var(--v2-text-eyebrow); /* 13px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); /* readability against varied photo content */
  pointer-events: none;
}

/* Soft dark halo behind the caption — matches the hero overlay treatment per Lauren */
.v2-hero__property-caption::before {
  content: '';
  position: absolute;
  inset: -4px -10px;
  z-index: -1;
  background: radial-gradient(ellipse 95% 110% at center,
    rgba(10, 32, 32, 0.62) 0%,
    rgba(10, 32, 32, 0.32) 55%,
    transparent 100%);
  pointer-events: none;
}

.v2-hero__property-caption strong {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 1.6px;
}

/* Property name line — sits between the uppercase descriptor (strong) and the
   italic ODCE attribution line. Sentence-case, modest weight, slightly larger
   so the building's actual name reads as the human-friendly identifier. */
.v2-hero__property-caption-name {
  display: block;
  margin-top: 6px;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.4;
}

.v2-hero__property-caption-meta {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.78); /* was 0.66 — audience-lens dark-bg body floor (≥0.78) */
  font-size: 14px;
}

/* Place caption on the right side on heroes where the headline copy sits
   on the left (default v2 layout) — opt-in via .v2-hero__property-caption--right */
.v2-hero__property-caption--right {
  left: auto;
  right: clamp(24px, 5vw, 96px);
  text-align: right;
}

/* Laptop+ : keep the uppercase descriptor on a single line.
   Strong becomes block-level + nowrap; caption max-width grows to fit.
   Some caption fallbacks (OF_Hero / PO_Hero / HP_Hero) include a legacy
   line-break element between strong and the name span that was harmless
   when strong was inline — hide it now that strong is its own block. */
@media (min-width: 769px) {
  .v2-hero__property-caption { max-width: none; width: max-content; }
  .v2-hero__property-caption strong { display: block; white-space: nowrap; line-height: 1.25; }
  .v2-hero__property-caption br { display: none; }
  .v2-hero__property-caption-name,
  .v2-hero__property-caption-meta { max-width: 380px; }
  .v2-hero__property-caption--right .v2-hero__property-caption-name,
  .v2-hero__property-caption--right .v2-hero__property-caption-meta { margin-left: auto; }
}

@media (max-width: 768px) {
  /* Hide on phones — it's decorative attribution. The building IS the photo,
     and the headline/CTA stack already occupies the lower-left on mobile. */
  .v2-hero__property-caption { display: none; }
}

/* ── v2-light-hero ──────────────────────────────────────────────────────
   Unified responsive system for the light editorial-band heroes that share
   the same vocabulary: SL_Hero (Leadership), WA_Hero (Who We Are),
   PRE_Hero (What Is Private Real Estate).

   Pattern:
     • Light gray band (#E0E6E7) with subtle teal radial wash
     • Two-column grid: headline/subtitle (optional CTA) BOTTOM-LEFT,
       transparent-PNG building cutout BOTTOM-RIGHT with the 3-line
       property caption tucked alongside, arrow → pointing at the photo
     • Identical band height across all 3 instances (single shared clamp)
     • Natural image sizing via max-height + object-fit (no transform:
       scale tricks, no per-breakpoint scale tweaks)
     • Tight caption (~36ch, max 380px) — photo-credit feel

   Markup contract (used by SL/WA/PRE): see hero module HTML files for
   the canonical structure. Top-level section.v2-light-hero contains a
   content-wrapper, a grid with content (accent line, headline, subtitle,
   optional CTA wrap), and a figure with caption + image.
   ──────────────────────────────────────────────────────────────────── */

.v2-light-hero {
  position: relative;
  background-color: var(--v2-surface-hero);
  padding: clamp(120px, 15vh, 160px) 0 0;
  color: var(--v2-ink, #134847);
  font-family: 'europa', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow: hidden;
}

.v2-light-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 20% 0%, rgba(5, 154, 145, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

.v2-light-hero__wrap {
  position: relative;
  z-index: 1;
}

/* Widen the content-wrapper for these heroes. The theme forces
   `body .content-wrapper { max-width: 90% !important; }` between
   993–1610px, which squeezes the figure column too narrow to hold
   the full-height building cutout + caption side-by-side. Promote
   to (0,2,1) specificity with !important to beat the theme rule. */
.v2-light-hero .content-wrapper {
  max-width: 1480px !important;
  width: 96% !important;
}
@media (min-width: 1700px) {
  .v2-light-hero .content-wrapper {
    max-width: 1560px !important;
    width: 92% !important;
  }
}

/* ── Grid ──
   min-height locks the band depth identically across all 3 pages so
   Leadership / Who We Are / What Is PRE read as exact siblings.
   Asymmetric split — figure column gets more breathing room so the
   tall building cutout doesn't have to shrink via flex-shrink and
   object-fit (which is what was rendering the building too small at
   wide viewports — the img element's container was narrower than the
   contain-fit needed). */
.v2-light-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  column-gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
  min-height: clamp(480px, 46vw, 620px);
}

.v2-light-hero__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Headline stack drops ~10% of the band height below the top so it
     reads as deliberately placed in the editorial canvas rather than
     pinned to the corner. Mobile rule below resets this — phones get
     the compact top-anchored version. */
  padding-top: clamp(60px, 9vh, 110px);
  padding-bottom: clamp(28px, 3.5vh, 48px);
  row-gap: 0;
}

/* ── Accent line ── */
@keyframes v2-light-hero-drawLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.v2-light-hero__accent {
  width: 48px;
  height: 2px;
  background: var(--v2-teal-brand, #059A91);
  margin-bottom: clamp(20px, 3vh, 36px);
  transform-origin: left;
  animation: v2-light-hero-drawLine 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.v2-light-hero__headline {
  font-size: clamp(34px, 4.2vw, 60px) !important;
  font-weight: 300 !important;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--v2-ink, #134847) !important;
  margin: 0 0 clamp(20px, 3vh, 32px) !important;
  max-width: 14ch;
}

.v2-light-hero__subtitle {
  font-size: var(--v2-text-body, 19px) !important;
  font-weight: 400 !important;
  color: rgba(15, 46, 46, 0.82) !important;
  font-style: italic;
  line-height: 1.6;
  margin: 0 !important;
  max-width: 42ch;
}

/* ── Optional CTA ──
   Ghost outline default + dark fill on hover (inverse of the standard
   .v2-hero__cta which is ghost-on-dark). Only WA_Hero currently renders
   this slot, but the inversion lives here so any new light-hero CTA gets
   identical styling. Cascades over the base .v2-hero__cta rules. */
.v2-light-hero__cta-wrap { margin-top: clamp(24px, 3.5vh, 40px); }

.v2-light-hero .v2-hero__cta,
.v2-light-hero .v2-hero__cta:link,
.v2-light-hero .v2-hero__cta:visited,
.v2-light-hero .v2-hero__cta:active,
.v2-light-hero .v2-hero__cta:focus {
  background-image: linear-gradient(to top, var(--v2-ink, #134847) 50%, transparent 50%) !important;
  color: var(--v2-ink, #134847) !important;
  border-color: rgba(15, 46, 46, 0.6) !important;
}
.v2-light-hero .v2-hero__cta:hover,
.v2-light-hero .v2-hero__cta:focus-visible {
  color: #FFFFFF !important;
  border-color: var(--v2-ink, #134847) !important;
}
.v2-light-hero .v2-hero__cta:focus-visible {
  outline: 2px solid var(--v2-teal-brand, #059A91) !important;
  outline-offset: 4px;
}

/* ── Figure column ──
   Caption + image are flex siblings, both bottom-aligned, clustered at
   the right edge. Caption sits left of the building so the arrow points
   at the photo. Image uses natural height capped by max-height — no
   transform: scale, no per-breakpoint scale tweaks. */
.v2-light-hero__figure {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  gap: clamp(24px, 3vw, 48px);
}

.v2-light-hero__figure .v2-hero-caption {
  flex: 0 0 auto;
  margin-bottom: clamp(40px, 5vh, 64px);
}

.v2-light-hero__image {
  display: block;
  width: auto;
  /* Image height exceeds the grid min-height so the building's tip
     rises into the section's padding-top area (toward the mega nav)
     while the GRAY BAND ITSELF stays exactly the same height. The
     negative margin-top "discounts" the extra height from the flex
     container's size calculation: layout box ≈ height + margin-top ≈
     grid min-height, but the visible image extends `|margin-top|`
     pixels upward beyond its layout position. Section's overflow:
     hidden clips anything that would escape the section bounds.

     Without negative margin, increasing image height pushes the grid
     item taller, which pushes the band taller — exactly what we don't
     want.

     flex: 0 0 auto (no shrink) so the image keeps its full computed
     width even when the figure column is tight; if it overflows the
     column at very narrow desktop, the media queries below shrink the
     height. */
  height: clamp(560px, 50vw, 720px);
  margin-top: clamp(-100px, -5vw, -40px);
  object-position: right bottom;
  background: transparent;
  flex: 0 0 auto;
}

/* ── Responsive ── */

/* Narrow-to-standard desktop (901–1199px): figure column is tight.
   Shrink the image height + tighten the gap so the caption always has
   ~150px+ of readable space alongside the building. This is the band
   where SL_Hero previously needed asymmetric column splits — solved
   here by image size, not grid template. */
@media (min-width: 901px) and (max-width: 1199px) {
  .v2-light-hero__grid {
    min-height: clamp(420px, 44vw, 500px);
  }
  .v2-light-hero__figure {
    gap: clamp(16px, 2vw, 28px);
  }
  .v2-light-hero__image {
    height: clamp(480px, 50vw, 580px);
    margin-top: clamp(-80px, -4vw, -30px);
  }
  .v2-light-hero__figure .v2-hero-caption {
    margin-bottom: clamp(28px, 4vh, 48px);
  }
}

/* No wide/ultrawide overrides needed — the default clamp on grid
   min-height + image height already scales up to 820/800 across 1500+
   viewports. Avoid redundant breakpoint stacks. */

/* ── Mobile (≤900px) — restrained editorial cover ──
   Single column. Image bleeds to viewport edge. Caption becomes a
   photo-credit with a 32px teal hairline above it (magazine vocabulary,
   anchors caption to the image above). No horizon glow / no oversized
   marketing atmosphere — older-investor audience-lens. */
@media (max-width: 900px) {
  .v2-light-hero {
    padding: clamp(110px, 14vh, 140px) 0 clamp(56px, 8vh, 88px);
  }

  .v2-light-hero__grid {
    grid-template-columns: 1fr;
    row-gap: clamp(28px, 4vh, 40px);
    align-items: start;
    min-height: 0;
  }

  .v2-light-hero__content {
    justify-content: flex-start;
    padding-top: clamp(8px, 1.5vh, 24px);
    padding-bottom: 0;
  }

  .v2-light-hero__headline {
    max-width: 20ch;
  }

  /* CTA scales down to a content-sized button on mobile. */
  .v2-light-hero .v2-hero__cta,
  .v2-light-hero .v2-hero__cta:link,
  .v2-light-hero .v2-hero__cta:visited,
  .v2-light-hero .v2-hero__cta:active,
  .v2-light-hero .v2-hero__cta:focus,
  .v2-light-hero .v2-hero__cta:hover {
    padding: 11px 20px 10px !important;
    min-height: 42px !important;
    font-size: 12px !important;
    letter-spacing: 1.4px !important;
    gap: 10px !important;
  }
  .v2-light-hero .v2-hero__cta::after { font-size: 14px !important; }

  .v2-light-hero__figure {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    position: relative;
  }

  .v2-light-hero__image {
    display: block;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: clamp(320px, 52vh, 500px);
    object-fit: contain;
    object-position: center bottom;
    order: 1;
    transform: translateX(-50%);
    position: relative;
    left: 50%;
    margin: 0;  /* resets the desktop negative margin-top */
    z-index: 1;
  }

  /* Photo credit — 32px horizontal teal hairline above the caption.
     Anchors it to the image above (magazine photo-credit pattern). */
  .v2-light-hero__figure .v2-hero-caption {
    order: 2;
    align-self: flex-start;
    position: relative;
    margin: 0;
    padding: 16px 0 0;
    max-width: none;
  }
  .v2-light-hero__figure .v2-hero-caption::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 2px;
    background: var(--v2-teal-brand, #059A91);
  }
}

@media (max-width: 640px) {
  .v2-light-hero {
    padding: clamp(100px, 12vh, 124px) 0 clamp(48px, 7vh, 72px);
  }
  .v2-light-hero__headline { max-width: 100%; }
  .v2-light-hero__subtitle {
    font-size: var(--v2-text-body-mobile, 17px) !important;
    max-width: 100%;
  }
  .v2-light-hero__image {
    max-height: clamp(280px, 48vh, 420px);
  }
}

@media (max-width: 420px) {
  .v2-light-hero {
    padding: 96px 0 56px;
  }
  .v2-light-hero__image {
    max-height: clamp(240px, 42vh, 340px);
  }
}


/* ── v2-hero-caption ────────────────────────────────────────────────────
   Shared property-caption utility for light-band heroes with transparent
   building cutouts (FP_Hero, SL_Hero, WA_Hero). Replaces the per-module
   `.xx-hero__caption` blocks so the three siblings render identically.

   Two-column CSS grid:
     • Column 1 holds the three text lines (label / name / meta), each on
       its own row, right-aligned.
     • Column 2 holds the teal arrow, locked to row 2 (property-name) so
       its vertical position stays anchored to the name regardless of how
       the italic meta wraps. (Old `align-items: center` made the arrow
       drift when the meta wrap count changed across viewports — that's
       the inconsistency Cole flagged 2026-05-27.)

   Wrap stability:
     • `__meta` has `width: 48ch`, so the italic ODCE attribution wraps
       at the same character count regardless of parent column width.
       Two-line wrap target: "Component asset of the NFI-ODCE Index—tracked
       / by the Accordant ODCE Index Fund."

   Markup contract (used by all three heroes): a p.v2-hero-caption holding
   a strong (location/type line), a span.v2-hero-caption__name (property
   name), a span.v2-hero-caption__meta (italic ODCE attribution), and an
   aria-hidden span.v2-hero-caption__arrow (right arrow glyph).

   Editors who override the underlying richtext field that pre-dates the
   new structure still render: the strong is row-1-anchored, and any stray
   legacy line-break element is hidden so it does not blow out a phantom
   grid row. */
.v2-hero-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-auto-rows: auto;
  column-gap: 14px;
  align-items: start;
  justify-items: end;

  /* The sibling building image has `transform: scale(...)` which creates
     a stacking context — without our own positioned context the arrow
     can fall *under* the image's semi-transparent PNG edge in narrow
     figure columns. Promote the caption so it always renders above. */
  position: relative;
  z-index: 2;

  margin: 0;
  padding: 0;
  max-width: 380px;
  font-size: var(--v2-text-eyebrow, 13px);
  line-height: 1.55;
  color: var(--v2-ink-soft, #4A5568);
  text-align: right;
}

/* Hide legacy line-break elements from stored richtext — the grid handles row stacking now. */
.v2-hero-caption br { display: none; }

.v2-hero-caption strong,
.v2-hero-caption__label {
  grid-column: 1;
  grid-row: 1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--v2-ink, #134847);
}

.v2-hero-caption__name {
  grid-column: 1;
  grid-row: 2;
  margin-top: 5px;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.3px;
  font-size: 15px;
  color: var(--v2-ink, #134847);
  line-height: 1.45;
}

.v2-hero-caption__meta {
  grid-column: 1;
  grid-row: 3;
  margin-top: 5px;
  /* Cap (not force) the italic ODCE attribution wrap. Combined with the
     parent's max-width: 380px, the 80-char string lands on 2 lines at any
     viewport ≥901px: "Component asset of the NFI-ODCE Index—tracked / by
     the Accordant ODCE Index Fund." (~46ch + ~33ch). */
  max-width: 48ch;
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.2px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(15, 46, 46, 0.72);
}

.v2-hero-caption__arrow {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: var(--v2-teal-brand, #059A91);
}

/* Mobile: stack everything left-aligned under the building image, hide
   the arrow (no building beside the caption to point at). */
@media (max-width: 900px) {
  .v2-hero-caption {
    display: block;
    text-align: left;
  }
  .v2-hero-caption strong,
  .v2-hero-caption__label,
  .v2-hero-caption__name,
  .v2-hero-caption__meta {
    display: block;
  }
  .v2-hero-caption__meta {
    width: 100%;
    max-width: 56ch;
  }
  .v2-hero-caption__arrow {
    display: none;
  }
}

/* ── Hero responsive ── */

@media (max-width: 768px) {
  .v2-hero {
    min-height: calc(55vh + 110px);
    min-height: calc(55svh + 110px);
    padding: 110px 0 48px;
  }
  .v2-hero.has-bg-image::before {
    background: linear-gradient(to bottom,
      rgba(10,32,32,0.2) 0%,
      rgba(10,32,32,0.6) 45%,
      rgba(10,32,32,0.92) 100%);
  }
  .v2-hero::after { display: none; }
  .v2-hero__content { max-width: 100%; }
}

@media (max-width: 480px) {
  .v2-hero {
    min-height: calc(50vh + 90px);
    min-height: calc(50svh + 90px);
    padding: 90px 0 36px;
  }
  .v2-hero__accent-line { width: 32px; margin-bottom: 16px; }
  .v2-hero__headline {
    font-size: clamp(26px, 7.5vw, 36px);
    letter-spacing: -0.3px;
  }
  .v2-hero__subtitle { font-size: 17px; /* was 14 — audience-lens floor */ max-width: 100%; }
}

@media (hover: none) {
  .v2-hero__cta:active { opacity: 0.7; transition: opacity 0.1s ease; }
}

/* ── Site-wide :focus-visible baseline ──
   WCAG 2.4.7 — every interactive element needs a visible focus indicator
   for keyboard users. Per-module focus rules exist on a handful of CTAs
   (.of-hero__button, .v2-hero__cta, etc.), but ~18 v2 modules with
   buttons/links don't define one. This rule provides a brand-consistent
   default for every BEM-prefixed v2 interactive class: 2px solid teal
   outline with 3px offset. Per-module rules with higher specificity
   still win when they exist. Selector list is wide on purpose — most
   v2 modules name their interactive elements with one of these suffixes. */
[class*="__cta"]:focus-visible,
[class*="__button"]:focus-visible,
[class*="__btn"]:focus-visible,
[class*="__link"]:focus-visible,
[class*="__tab"]:focus-visible,
[class*="__pill"]:focus-visible,
[class*="__toggle"]:focus-visible,
[class*="__trigger"]:focus-visible,
[class*="__nav"]:focus-visible,
[class*="__close"]:focus-visible,
[class*="__option"]:focus-visible,
[class*="__search"]:focus-visible,
[class*="__view-more"]:focus-visible,
[class*="__learn-more"]:focus-visible,
[class*="__read-bio"]:focus-visible,
[class*="__card"]:focus-visible {
  outline: 2px solid #059A91;
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── prefers-reduced-motion: site-wide overrides ──
   WCAG 2.1 SC 2.3.3. When users have OS-level motion-reduction enabled,
   neutralize:
   - AOS animations (every v2 module uses these for scroll-reveal)
   - The hero accent-line draw animation
   - All non-essential transitions (capped to 0.01s instead of 0 so
     state changes still occur but are imperceptible)
   - Decorative transforms (scale-on-hover, translate-on-hover)
   Note: this is broad. The !important on transition/animation is
   intentional — some modules add `transition` inline-style or via
   higher-specificity selectors. */
@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;
  }
  /* Neutralize AOS — these elements would otherwise start invisible
     and animate in; force them to their visible end state instantly. */
  [data-aos],
  [data-aos].aos-animate,
  [data-aos-id] {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Drop the hero accent-line draw-in animation */
  .v2-hero__accent-line { animation: none !important; }
}

/* ── PREview hero: skip entrance animation on revisit ──
   Set on the html element synchronously by inline scripts in AP_Hero /
   AP_NewsFeed_Hero modules when sessionStorage flag is present.
   The hero renders in its final state instantly so tab switches
   inside the PREview area feel like a stable, persistent header. */
html.preview-hero-static .v2-hero--preview [data-aos],
html.preview-hero-static .v2-hero--preview [data-aos].aos-animate,
html.preview-hero-static .v2-hero--preview .v2-hero__content {
  opacity: 1 !important;
  transform: none !important;
  transition-duration: 0s !important;
  transition: none !important;
  animation: none !important;
}
html.preview-hero-static .v2-hero--preview .v2-hero__accent-line {
  animation: none !important;
  transform: scaleX(1) !important;
  transition: none !important;
}

/* ── Skeleton placeholder body ──
   Temporary body section for Phase 1 skeleton pages. Replace with
   real modules once content + design is finalized. */
.v2-skeleton-body {
  background-color: #FAFBFB;
  padding: clamp(80px, 12vh, 140px) 0;
}

.v2-skeleton-body__accent {
  width: 48px;
  height: 2px;
  background: #059A91;
  margin-bottom: 24px;
}

.v2-skeleton-body__eyebrow {
  font-size: var(--v2-text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--v2-letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--v2-teal-label);
  margin: 0 0 16px;
}

.v2-skeleton-body__heading {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 300;
  color: var(--v2-ink);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0 0 24px;
  max-width: 640px;
}

.v2-skeleton-body__copy {
  font-size: var(--v2-text-body);
  line-height: var(--v2-line-height-body);
  color: var(--v2-ink-soft);
  margin: 0;
  max-width: 640px;
}

/* ── v2 shared eyebrow utility ──
   Most v2 modules repeat the same uppercase-teal section label
   pattern with their own scoped class. Modules can opt into this
   shared utility (apply class "v2-eyebrow" to a span)
   to inherit the audience-lens-safe token values. Use the
   `.v2-eyebrow--on-dark` modifier for dark-background sections. */
.v2-eyebrow {
  display: inline-block;
  font-size: var(--v2-text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--v2-letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--v2-teal-label);
  margin: 0 0 16px;
}

.v2-eyebrow--on-dark {
  /* Brand teal #059A91 on #0F2E2E hits ~5.4:1 — AA-safe for small text */
  color: var(--v2-teal-brand);
}

/* ── PREview secondary sub-nav (stub) ── */
.v2-preview-subnav {
  background: #F0F3F3;
  border-top: 1px solid rgba(15, 46, 46, 0.08);
  border-bottom: 1px solid rgba(15, 46, 46, 0.08);
}
.v2-preview-subnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(16px, 3vw, 48px);
  overflow-x: auto;
}
.v2-preview-subnav a {
  display: block;
  padding: 22px 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #0F2E2E;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.v2-preview-subnav a.is-active { border-bottom-color: #0F2E2E; }
.v2-preview-subnav a:hover { color: #059A91; }

/* ── PREview layout shell ──
   PREview pages keep the full mega nav (items + dropdowns + search +
   mobile menu) intact — reversed from the earlier "stripped shell"
   treatment. Only the content-wrapper inset below remains specific
   to PREview pages so individual AP_* modules don't each re-solve
   mobile padding. */

/* ── PREview content inset ──
   Theme's `.content-wrapper` defaults to `padding: 0 15px` (from
   `theme.spacing.horizontal_spacing`), which leaves mobile content
   crammed against the viewport edge. Bump to 24px on phones / 32px
   on tablet+ for every `.content-wrapper` inside a PREview page, so
   individual AP_* modules don't each re-solve the same problem.

   Specificity: `body.preview-layout .content-wrapper` = (0,2,1),
   which beats the theme's `body .content-wrapper { max-width: 90%
   !important }` at `min-width: 993px` only on the properties we set
   (padding-left/right) — max-width still honors the theme's
   !important rule above 993px. No !important needed. */
body.preview-layout .content-wrapper {
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 993px) {
  body.preview-layout .content-wrapper {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ── PREview subpages: strip the main mega-nav ──
   Subpages (ODCE / Meet Accordant / Contact / Newsfeed / Growth Fund)
   keep only the logo + INVESTOR LOGIN at the top — AP_SubNav becomes
   the primary navigation. The PREview homepage deliberately keeps the
   full mega-nav (it's NOT in `preview_slugs` in base.html), so this
   rule never matches there. */
body.preview-layout .mega-nav__items,
body.preview-layout .mega-nav__hamburger,
body.preview-layout .mega-nav__dropdown,
body.preview-layout .mega-nav__mobile-menu,
body.preview-layout .mega-nav__overlay {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Site-wide button system: .v2-btn-fill

   One canonical "ghost-outline button that fills from the bottom on
   hover" used across every v2 module. Replaces 28+ near-identical
   module-level button classes that each rolled their own ::before
   scaleY animation — those duplicated the mechanic AND all suffered
   from a 1.5px sliver at the bottom (because the ::before sits inside
   the padding-box, with the parent border showing through underneath).

   How the fill works here:
   - `linear-gradient` background ON the parent (not a child pseudo).
   - 50/50 stops, sized 100% wide × 202% tall, anchored to bottom.
   - On hover, background-position animates to top — fills the visible
     area edge-to-edge, naturally inside the border (no sliver possible).
   - No ::before/::after needed. No z-index choreography.

   Variants:
   - `.v2-btn-fill--ghost-on-dark`   white outline, fills WHITE, text white → dark teal
   - `.v2-btn-fill--ghost-on-light`  dark outline, fills DARK TEAL, text dark → white
   - `.v2-btn-fill--ghost-on-light-brand`  same but fills brand teal
   - `.v2-btn-fill--solid-brand`     solid teal, fills slightly darker on hover

   Each module should use `.v2-btn-fill .v2-btn-fill--{variant}` on its
   CTA anchor/button. Module CSS only needs to set sizing/positioning
   that differs from the default — color/border/fill are owned here.

   `!important` is required throughout: theme's `.body-container-wrapper
   a { transition: all 0.35s }` at (0,1,1) beats single-class selectors
   and animates every property change → reintroduces the original
   shrink-on-click bug. We pin every layout property explicitly.
   ───────────────────────────────────────────────────────────────────── */

.v2-btn-fill,
.v2-btn-fill:link,
.v2-btn-fill:visited,
.v2-btn-fill:hover,
.v2-btn-fill:active,
.v2-btn-fill:focus,
.v2-btn-fill:focus-visible {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 48px !important;
  border-radius: 3px !important;
  padding: 14px 28px 13px !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transform: none !important;
  /* Only the properties that ACTUALLY change on hover get transitioned —
     never `all`. Beats the theme's global 0.35s `all` transition. */
  transition: background-position 0.45s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.45s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.45s ease !important;
  background-repeat: no-repeat !important;
  background-size: 100% 202% !important;
  /* Gradient is half-color (top) / half-transparent (bottom). bg-position
     `0 0` (top-aligned) shows the bottom half of the gradient = transparent.
     `0 100%` (bottom-aligned) shows the top half = color. Hover fills
     visually from bottom-up because the color half slides into view. */
  background-position: 0 0 !important;
  /* origin/clip = border-box so the gradient extends to the OUTER edge
     of the border, not just inside it — eliminates the 1.5px sliver at
     the bottom that Lauren caught when hovering long enough to see the
     fill reach the end of its travel. */
  background-origin: border-box !important;
  background-clip: border-box !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.v2-btn-fill:hover,
.v2-btn-fill:focus-visible {
  background-position: 0 100% !important;
  outline: none;
}

/* Arrow that slides on hover. Apply this class to any inline element
   (typically a span) holding the arrow glyph. Modules can replace with
   SVG by targeting their own arrow class within this button. */
.v2-btn-fill__arrow {
  display: inline-block;
  font-size: 16px;
  line-height: 0;
  transform: translateY(-1px);
  transition: transform 0.35s ease;
}

.v2-btn-fill:hover .v2-btn-fill__arrow {
  transform: translate(5px, -1px);
}

.v2-btn-fill:focus-visible {
  outline: 2px solid #059A91 !important;
  outline-offset: 4px;
}

/* ── Variant: ghost outline on a DARK background ────────────────────
   Transparent + white outline at rest. Fills WHITE on hover; text
   flips to dark teal. Used on every hero CTA + any CTA sitting on a
   dark teal section. Replaces .v2-hero__cta, .of-hero__button--primary,
   .hp-team__cta--primary, .sl-cta__cta, .ap-opp__cta, etc. */
.v2-btn-fill--ghost-on-dark,
.v2-btn-fill--ghost-on-dark:link,
.v2-btn-fill--ghost-on-dark:visited,
.v2-btn-fill--ghost-on-dark:active,
.v2-btn-fill--ghost-on-dark:focus {
  background-color: transparent !important;
  background-image: linear-gradient(to top, #FFFFFF 50%, transparent 50%) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
}

.v2-btn-fill--ghost-on-dark:hover,
.v2-btn-fill--ghost-on-dark:focus-visible {
  color: #0F2E2E !important;
  border-color: #FFFFFF !important;
  background-color: transparent !important;
}

/* ── Variant: ghost outline on a LIGHT background ───────────────────
   Transparent + dark teal outline at rest. Fills DARK TEAL on hover;
   text flips to white. Used on light bg sections like PO_Intro,
   DF_Body, etc. */
.v2-btn-fill--ghost-on-light,
.v2-btn-fill--ghost-on-light:link,
.v2-btn-fill--ghost-on-light:visited,
.v2-btn-fill--ghost-on-light:active,
.v2-btn-fill--ghost-on-light:focus {
  background-color: transparent !important;
  background-image: linear-gradient(to top, #134847 50%, transparent 50%) !important;
  color: #134847 !important;
  border: 1.5px solid #134847 !important;
}

.v2-btn-fill--ghost-on-light:hover,
.v2-btn-fill--ghost-on-light:focus-visible {
  color: #FFFFFF !important;
  border-color: #134847 !important;
  background-color: transparent !important;
}

/* ── Variant: ghost outline on light bg, BRAND-TEAL fill ─────────────
   Same as ghost-on-light but fills with the brand teal #059A91.
   Used when you want the hover state to pop with brand color. */
.v2-btn-fill--ghost-on-light-brand,
.v2-btn-fill--ghost-on-light-brand:link,
.v2-btn-fill--ghost-on-light-brand:visited,
.v2-btn-fill--ghost-on-light-brand:active,
.v2-btn-fill--ghost-on-light-brand:focus {
  background-color: transparent !important;
  background-image: linear-gradient(to top, #059A91 50%, transparent 50%) !important;
  color: #134847 !important;
  border: 1.5px solid #134847 !important;
}

.v2-btn-fill--ghost-on-light-brand:hover,
.v2-btn-fill--ghost-on-light-brand:focus-visible {
  color: #FFFFFF !important;
  border-color: #059A91 !important;
  background-color: transparent !important;
}

/* ── Variant: solid brand teal ──────────────────────────────────────
   Brand teal background, white text. Hover darkens to deep teal via
   the same fill mechanic. Used for primary CTAs that want full color
   weight rather than a ghost outline. */
.v2-btn-fill--solid-brand,
.v2-btn-fill--solid-brand:link,
.v2-btn-fill--solid-brand:visited,
.v2-btn-fill--solid-brand:active,
.v2-btn-fill--solid-brand:focus {
  background-color: #059A91 !important;
  background-image: linear-gradient(to top, #0F2E2E 50%, transparent 50%) !important;
  color: #FFFFFF !important;
  border: 1.5px solid #059A91 !important;
}

.v2-btn-fill--solid-brand:hover,
.v2-btn-fill--solid-brand:focus-visible {
  color: #FFFFFF !important;
  border-color: #0F2E2E !important;
}

/* ─────────────────────────────────────────────────────────────────────
   COMPATIBILITY SHIM (2026-05-22)

   New modules should use `.v2-btn-fill` + a variant class. The 28 legacy
   button classes below still use the old `::before { transform: scaleY }`
   pattern in their module CSS — which showed a visible 1.5px sliver at
   the bottom during hover (pseudo-element clipped to padding-box left a
   gap below the fill where the parent border was). Migrating all 28
   would require touching every module's HTML, so this shim does two
   things WITHOUT touching individual modules:

     1. Hides each legacy ::before fill layer.
     2. Applies the gradient `background-image` + animated
        `background-position` directly to the parent — same visual,
        same timing, no sliver.

   Each color group below mirrors the fill color used in the legacy
   ::before so the visual is identical. Module CSS retains ownership of
   colors / borders / sizing / typography — this only swaps the fill
   mechanic. Safe to delete once every module has migrated to
   `.v2-btn-fill`. ───────────────────────────────────────────────────── */

/* IMPORTANT: every selector in this shim is prefixed with `html` to bump
   specificity from (0,1,0) → (0,1,1). Many module CSS files declare
   `background: transparent !important` as a shorthand on the button —
   which resets all background properties including background-image.
   Without the `html` prefix, the module's shorthand wins (same
   specificity, declared later in cascade) and the gradient fill never
   renders. The `html` prefix beats single-class declarations cleanly. */

/* Kill the old ::before fills on every legacy button. */
html .ap-agreement__cta::before,
html .ap-bestpractice__cta::before,
html .ap-connect__cta::before,
html .ap-feat__cta::before,
html .ap-login__form-host .hs-button::before,
html .ap-login__form-host input[type="submit"]::before,
html .ap-login__member-form .hs-login-widget-submit::before,
html .ap-login__member-form input[type="submit"]::before,
html .ap-login__member-form button[type="submit"]::before,
html .ap-news__view-more::before,
html .ap-opp__cta::before,
html .ap-opp__learn-more::before,
html .df-body__cta::before,
html .df-docs__card-cta::before,
html .hp-cta__button::before,
html .hp-philosophy__cta::before,
html .hp-pre-intro__cta::before,
html .hp-team__cta--primary::before,
html .hp-team__cta--secondary::before,
html .mega-nav__login::before,
html .of-access__cta::before,
html .of-hero__button--primary::before,
html .of-hero__button--secondary::before,
html .po-access__cta::before,
html .po-body__cta::before,
html .po-intro__cta::before,
html .pre-blocks__cta::before,
html .sl-body__cta::before,
html .sl-cta__cta::before,
html .wa-story__cta::before,
html .wa-team-intro__cta::before {
  display: none !important;
}

/* Base — every legacy button gets the gradient transport. Variants below
   set the fill color via background-image. */
html .ap-agreement__cta,
html .ap-bestpractice__cta,
html .ap-connect__cta,
html .ap-feat__cta,
html .ap-login__form-host .hs-button,
html .ap-login__form-host input[type="submit"],
html .ap-login__member-form .hs-login-widget-submit,
html .ap-login__member-form input[type="submit"],
html .ap-login__member-form button[type="submit"],
html .ap-news__view-more,
html .ap-opp__cta,
html .ap-opp__learn-more,
html .df-body__cta,
html .df-docs__card-cta,
html .hp-cta__button,
html .hp-philosophy__cta,
html .hp-pre-intro__cta,
html .hp-team__cta--primary,
html .hp-team__cta--secondary,
html .mega-nav__login,
html .of-access__cta,
html .of-hero__button--primary,
html .of-hero__button--secondary,
html .po-access__cta,
html .po-body__cta,
html .po-intro__cta,
html .pre-blocks__cta,
html .sl-body__cta,
html .sl-cta__cta,
html .wa-story__cta,
html .wa-team-intro__cta {
  background-color: transparent !important;
  background-size: 100% 202% !important;
  background-position: 0 0 !important; /* top: shows transparent half of gradient */
  background-repeat: no-repeat !important;
  /* Crucial: origin = border-box so the gradient positions against the
     OUTER edge of the border, not the inner padding-box edge. With the
     default origin (padding-box), the bottom 1.5px (= border-width) was
     outside the image's reach — that's the "sliver" Lauren saw on long
     hovers. border-box origin extends the image to the very edge. */
  background-origin: border-box !important;
  background-clip: border-box !important;
  /* Augment the module's existing transition without replacing it. */
  transition: background-position 0.45s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.45s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.45s ease !important;
}

html .ap-agreement__cta:hover,
html .ap-bestpractice__cta:hover,
html .ap-connect__cta:hover,
html .ap-feat__cta:hover,
html .ap-login__form-host .hs-button:hover,
html .ap-login__form-host input[type="submit"]:hover,
html .ap-login__member-form .hs-login-widget-submit:hover,
html .ap-login__member-form input[type="submit"]:hover,
html .ap-login__member-form button[type="submit"]:hover,
html .ap-news__view-more:hover,
html .ap-opp__cta:hover,
html .ap-opp__learn-more:hover,
html .df-body__cta:hover,
html .df-docs__card-cta:hover,
html .hp-cta__button:hover,
html .hp-philosophy__cta:hover,
html .hp-pre-intro__cta:hover,
html .hp-team__cta--primary:hover,
html .hp-team__cta--secondary:hover,
html .mega-nav__login:hover,
html .of-access__cta:hover,
html .of-hero__button--primary:hover,
html .of-hero__button--secondary:hover,
html .po-access__cta:hover,
html .po-body__cta:hover,
html .po-intro__cta:hover,
html .pre-blocks__cta:hover,
html .sl-body__cta:hover,
html .sl-cta__cta:hover,
html .wa-story__cta:hover,
html .wa-team-intro__cta:hover {
  background-position: 0 100% !important; /* bottom: shows color half */
}

/* Fill color #FFFFFF — used on dark-bg buttons that turn dark on hover. */
html .ap-login__member-form input[type="submit"],
html .ap-login__member-form .hs-login-widget-submit,
html .ap-login__member-form button[type="submit"],
html .ap-opp__learn-more,
html .hp-team__cta--primary,
html .of-access__cta,
html .of-hero__button--primary,
html .po-access__cta,
html .pre-blocks__cta,
html .sl-cta__cta,
html .wa-team-intro__cta {
  background-image: linear-gradient(to top, #FFFFFF 50%, transparent 50%) !important;
}

/* Fill color #134847 (dark teal primary) — used on light-bg buttons. */
html .ap-bestpractice__cta,
html .ap-feat__cta,
html .df-body__cta,
html .hp-philosophy__cta,
html .hp-pre-intro__cta,
html .po-body__cta,
html .po-intro__cta,
html .sl-body__cta,
html .wa-story__cta {
  background-image: linear-gradient(to top, #134847 50%, transparent 50%) !important;
}

/* Fill color #0F2E2E (deepest teal) — used on AP_* light-bg buttons. */
html .ap-agreement__cta,
html .ap-connect__cta,
html .ap-news__view-more,
html .ap-opp__cta {
  background-image: linear-gradient(to top, #0F2E2E 50%, transparent 50%) !important;
}

/* Fill color #059A91 (brand teal accent) — HP_CTA on dark band. */
html .hp-cta__button {
  background-image: linear-gradient(to top, #059A91 50%, transparent 50%) !important;
}

/* Translucent white — Mega_Nav login (header hover). */
html .mega-nav__login {
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 50%) !important;
}

/* Special cases — buttons whose ::before color couldn't be auto-detected.
   These get a sensible default (translucent white). Verify visually and
   override here if the original was different. */
html .ap-login__form-host .hs-button,
html .ap-login__form-host input[type="submit"],
html .df-docs__card-cta,
html .hp-team__cta--secondary,
html .of-hero__button--secondary {
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.08) 50%, transparent 50%) !important;
}

/* Insights blog — archive grid + rich post body helpers */
/* ============================================
   Insights — template-level styles
   Archive grid (topic-filtered listing) +
   rich content styles for post bodies
   ============================================ */

/* ── Archive (topic filter) ── */
.in-archive {
  background-color: var(--v2-surface);
  padding: clamp(56px, 7vw, 96px) 0;
  position: relative;
}

.in-archive::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--v2-grain-fine);
  background-size: 256px 256px;
  opacity: 0.025;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.in-archive .content-wrapper {
  position: relative;
  z-index: 1;
}

.in-archive__header {
  margin-bottom: clamp(32px, 4vw, 48px);
}

.in-archive__accent {
  width: 36px;
  height: 2px;
  background: var(--v2-teal-brand);
  margin-bottom: 14px;
}

.in-archive__eyebrow {
  font-size: var(--v2-text-eyebrow); /* 13px floor — was 11 */
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--v2-teal-label); /* was #059A91 — failed AA on light bg */
  margin: 0 0 10px;
}

.in-archive__heading {
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 300;
  color: #0F2E2E;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0;
}

.in-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.in-archive__card {
  background: #FFFFFF;
  border: 1px solid rgba(15, 46, 46, 0.08);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.in-archive__card:hover {
  transform: translateY(-4px);
  border-color: rgba(5, 154, 145, 0.3);
  box-shadow: 0 20px 40px -20px rgba(15, 46, 46, 0.22);
}

.in-archive__card-link,
.in-archive__card-link:visited {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.in-archive__card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--v2-surface-gray);
}

.in-archive__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.in-archive__card:hover .in-archive__card-media img { transform: scale(1.05); }

.in-archive__card-body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.in-archive__card-title {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 400;
  line-height: 1.3;
  color: #0F2E2E;
  margin: 0 0 10px;
  letter-spacing: -0.2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.in-archive__card-excerpt {
  font-size: 16px; /* secondary-body floor — was 14 */
  line-height: 1.55;
  color: rgba(15, 46, 46, 0.78); /* was 0.65 — AA */
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.in-archive__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--v2-text-eyebrow); /* 13px floor — was 11 */
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(15, 46, 46, 0.7); /* was 0.5 — AA */
  padding-top: 14px;
  border-top: 1px solid rgba(15, 46, 46, 0.08);
  margin-top: auto;
  flex-wrap: nowrap;
  gap: 12px;
  white-space: nowrap;
}

.in-archive__card-meta > span { min-width: 0; }
.in-archive__card-cta { flex-shrink: 0; }

.in-archive__card-cta {
  color: var(--v2-teal-label); /* was #059A91 — failed AA on light bg */
  font-weight: 600;
  letter-spacing: 1.2px;
}

.in-archive__empty {
  font-size: 16px;
  color: rgba(15, 46, 46, 0.65);
  text-align: center;
  padding: 48px 0;
}

/* ── Pagination ── */
.in-archive__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 32px;
  border-top: 1px solid rgba(15, 46, 46, 0.08);
}

.in-archive__page,
.in-archive__page:visited {
  font-size: var(--v2-text-eyebrow); /* 13px floor — was 12 */
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--v2-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 46, 46, 0.25);
  padding-bottom: 4px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.in-archive__page:hover {
  color: var(--v2-teal-label);
  border-bottom-color: var(--v2-teal-brand);
}

.in-archive__page-count {
  font-size: var(--v2-text-eyebrow); /* 13px floor — was 12 */
  color: rgba(15, 46, 46, 0.7); /* was 0.55 — AA */
  letter-spacing: 1px;
}

@media (max-width: 900px) {
  .in-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .in-archive__grid { grid-template-columns: 1fr; gap: 24px; }
  .in-archive__pagination { flex-direction: column; gap: 16px; }
}
/* ============================================
   IN_Category_Row — Category section
   2 cards + sidebar list + view-all
   ============================================ */

.in-catrow {
  padding: clamp(80px, 9vw, 112px) 0;
  position: relative;
  background-color: #FFFFFF !important;
}

.in-catrow--light,
.in-catrow--gray,
.in-catrow--white { background-color: #FFFFFF !important; }

/* Override the global .content-wrapper inside this section — the theme's
   variable-driven padding resolves to 0 on blog listings, so force a real
   horizontal gutter and a sensible editorial max-width. */
.in-catrow > .content-wrapper {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding-left: clamp(24px, 5vw, 72px) !important;
  padding-right: clamp(24px, 5vw, 72px) !important;
  box-sizing: border-box;
}

/* Hairline divider aligned with the content column */
.in-catrow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1240px, calc(100% - 48px));
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(15, 46, 46, 0.08) 15%,
    rgba(15, 46, 46, 0.08) 85%,
    transparent 100%
  );
}

.in-catrow__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  margin-bottom: clamp(36px, 4.2vw, 56px);
}

.in-catrow__header-lede {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.in-catrow__eyebrow {
  font-size: var(--v2-text-eyebrow) !important; /* 13px — was 11 */
  font-weight: 600 !important;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--v2-teal-label) !important; /* was #059A91 — failed AA on light bg */
  margin: 0;
  position: relative;
  padding-left: 36px;
}

.in-catrow__eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 1px;
  background: var(--v2-teal-brand);
}

.in-catrow__heading {
  font-family: 'europa', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: clamp(32px, 4.2vw, 46px) !important;
  font-weight: 300 !important;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #0F2E2E !important;
  margin: 0;
}

.in-catrow__view-all,
.in-catrow__view-all:visited {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--v2-text-eyebrow) !important; /* 13px — was 11 */
  font-weight: 600 !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--v2-ink) !important;
  text-decoration: none !important;
  padding-bottom: 6px;
  margin-bottom: 6px;
  white-space: nowrap;
  position: relative;
  transition: color 0.3s ease;
}

.in-catrow__view-all::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.3s ease;
}

.in-catrow__view-all:hover { color: var(--v2-teal-label) !important; }

.in-catrow__arrow {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.in-catrow__view-all:hover .in-catrow__arrow { transform: translateX(5px); }

.in-catrow__view-all--mobile { display: none; }

/* ── Grid ── */
.in-catrow__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
}

.in-catrow__grid--solo { grid-template-columns: minmax(0, 1fr); }

.in-catrow__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.in-catrow__cards--1 {
  grid-template-columns: minmax(0, 1fr);
}

/* Solo-post layout: horizontal editorial card */
.in-catrow__grid--solo .in-catrow__card-link {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.in-catrow__grid--solo .in-catrow__card-media {
  aspect-ratio: auto !important;
  height: 380px !important;
  max-height: 380px !important;
  min-height: 0 !important;
  width: 100%;
}

.in-catrow__grid--solo .in-catrow__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.in-catrow__grid--solo .in-catrow__card-body {
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.in-catrow__grid--solo .in-catrow__card-title {
  font-size: clamp(22px, 2.2vw, 28px) !important;
  line-height: 1.25;
  margin-bottom: 14px;
}

.in-catrow__grid--solo .in-catrow__card-excerpt {
  font-size: var(--v2-text-body) !important; /* 19px via token — was 15 */
  line-height: 1.6;
  margin-bottom: 28px;
}

@media (max-width: 720px) {
  .in-catrow__grid--solo .in-catrow__card-link {
    grid-template-columns: 1fr;
  }
  .in-catrow__grid--solo .in-catrow__card-media {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
}

/* ── Card ── */
.in-catrow__card {
  background: #FFFFFF;
  border: 1px solid rgba(15, 46, 46, 0.1);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
}

.in-catrow__card:hover {
  transform: translateY(-4px);
  border-color: rgba(5, 154, 145, 0.4);
  box-shadow: 0 24px 48px -24px rgba(15, 46, 46, 0.22);
}

.in-catrow__card-link {
  display: flex;
  flex-direction: column;
  color: inherit !important;
  text-decoration: none !important;
}

.in-catrow__card-link:visited {
  color: inherit !important;
  text-decoration: none !important;
}

.in-catrow__card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #0F2E2E 0%, #134847 100%);
  flex-shrink: 0;
}

.in-catrow__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.in-catrow__card:hover .in-catrow__card-media img { transform: scale(1.05); }

.in-catrow__card-body {
  padding: 24px 24px 26px;
}

.in-catrow__card-title {
  font-size: clamp(17px, 1.4vw, 20px) !important;
  font-weight: 400 !important;
  line-height: 1.3;
  color: #0F2E2E !important;
  margin: 0 0 10px;
  letter-spacing: -0.2px;
}

.in-catrow__card-excerpt {
  font-size: 16px !important; /* was 14 — secondary-body floor; cards stay tight */
  line-height: 1.55;
  color: rgba(15, 46, 46, 0.78) !important; /* was 0.65 */
  margin: 0 0 18px;
}

.in-catrow__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--v2-text-eyebrow) !important; /* 13px — was 11 */
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(15, 46, 46, 0.7) !important; /* was 0.5 */
  padding-top: 14px;
  border-top: 1px solid rgba(15, 46, 46, 0.08);
}

.in-catrow__card-cta {
  color: var(--v2-teal-label) !important; /* was #059A91 — failed AA (~3.48:1) on light bg */
  font-weight: 600 !important;
  letter-spacing: 1.2px;
  transition: transform 0.3s ease;
}

.in-catrow__card:hover .in-catrow__card-cta { letter-spacing: 1.4px; }

/* ── Sidebar list ── */
.in-catrow__sidebar {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-left: 32px;
  border-left: 1px solid rgba(15, 46, 46, 0.08);
}

.in-catrow__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.in-catrow__list li {
  border-bottom: 1px solid rgba(15, 46, 46, 0.07);
}

.in-catrow__list li:last-child { border-bottom: none; }

.in-catrow__list-link,
.in-catrow__list-link:visited {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  color: #0F2E2E !important;
  text-decoration: none !important;
  transition: color 0.25s ease;
}

.in-catrow__list-link:hover { color: var(--v2-teal-label) !important; }

.in-catrow__list-marker {
  color: var(--v2-teal-brand);
  font-size: 14px;
  line-height: 1.5;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.in-catrow__list-link:hover .in-catrow__list-marker { transform: translateX(3px); }

.in-catrow__list-title {
  font-size: 16px; /* secondary-body floor — was 15 */
  line-height: 1.5;
  font-weight: 400;
}

@media (max-width: 900px) {
  .in-catrow__grid { grid-template-columns: 1fr; }
  .in-catrow__sidebar {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(15, 46, 46, 0.08);
    padding-top: 24px;
  }
}

@media (max-width: 720px) {
  .in-catrow__header {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 20px;
  }
  .in-catrow__view-all { justify-self: start; margin-bottom: 0; }
}

@media (max-width: 640px) {
  .in-catrow__cards { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .in-catrow { padding: 48px 0; }
  .in-catrow__header { margin-bottom: 28px; padding-bottom: 20px; }
  .in-catrow__heading { letter-spacing: -0.01em; }
}

/* ============================================
   2-card "no-sidebar" layout (exactly 2 posts)
   Full-width vertical card pair — not the cramped
   horizontal editorial card layout used in solo.
   ============================================ */

.in-catrow__grid--no-sidebar {
  grid-template-columns: minmax(0, 1fr);
}

.in-catrow__grid--no-sidebar .in-catrow__cards {
  max-width: 1040px;
  margin: 0 auto;
  gap: clamp(24px, 2.8vw, 40px);
}

.in-catrow__grid--no-sidebar .in-catrow__card-media {
  aspect-ratio: auto !important;
  height: 240px !important;
}

/* Body grows so meta pins to bottom regardless of text length — keeps both
   cards in a row at the same height. Skipped in solo (horizontal editorial). */
.in-catrow__grid:not(.in-catrow__grid--solo) .in-catrow__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.in-catrow__grid:not(.in-catrow__grid--solo) .in-catrow__card-meta {
  margin-top: auto;
  flex-wrap: nowrap !important;
  gap: 16px;
  white-space: nowrap;
}

.in-catrow__grid:not(.in-catrow__grid--solo) .in-catrow__card-meta > span {
  min-width: 0;
}

.in-catrow__grid:not(.in-catrow__grid--solo) .in-catrow__card-cta {
  flex-shrink: 0;
}

/* Title clamp 2 lines, excerpt clamp 3 — uniform card heights */
.in-catrow__grid:not(.in-catrow__grid--solo) .in-catrow__card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.in-catrow__grid:not(.in-catrow__grid--solo) .in-catrow__card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 720px) {
  .in-catrow__grid--no-sidebar .in-catrow__cards {
    grid-template-columns: 1fr;
  }
}

/* Old Man & The PRE blog — B&W editorial shared styles */
/* ============================================
   om-shared — Shared CSS for Old Man & The PRE blog
   B&W image treatment, journal typography, shared
   modifiers for modules reused from the v2 system.
   ============================================ */

:root {
  --om-bw-filter: grayscale(1) contrast(1.02);
  --om-card-bg: #F2F4F4;
  --om-journal-label: #0F2E2E;
}

/* B&W image treatment — applied to any image inside an .om-bw context */
.om-bw img,
.om-post__media img,
.om-featured__media img,
.om-card__media img,
.om-hero__portrait img {
  filter: var(--om-bw-filter);
  transition: filter 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Subtle warming on hover — still B&W but slightly lifted */
.om-post__card:hover .om-post__media img,
.om-featured:hover .om-featured__media img,
.om-card:hover .om-card__media img {
  filter: grayscale(0.92) contrast(1.04);
}

/* ============================================
   Listing / archive / pagination shared styles
   Used by the old-man-listing.html template.
   ============================================ */

.om-section-label {
  font-family: 'europa', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #0F2E2E !important;
  margin: 0 0 clamp(20px, 2.5vw, 28px);
}

/* ── Listing (main view) ── */
.om-listing {
  background-color: #FFFFFF;
  padding: clamp(20px, 2.5vw, 32px) 0 clamp(32px, 4vw, 56px);
}

.om-listing__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 24px);
}

.om-listing__list > li {
  padding: 0;
  margin: 0;
}

/* ── Archive (tag view) ── */
.om-archive {
  background-color: #FFFFFF;
  padding: clamp(32px, 4vw, 56px) 0 clamp(32px, 4vw, 56px);
}

.om-archive__header {
  margin-bottom: clamp(24px, 3vw, 36px);
}

.om-archive__eyebrow {
  font-size: var(--v2-text-eyebrow) !important; /* 13px floor — was 11 */
  font-weight: 700 !important;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--v2-teal-label) !important; /* was #059A91 — failed AA on light bg */
  margin: 0 0 10px;
}

.om-archive__heading {
  font-family: 'europa', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: clamp(28px, 3.4vw, 42px) !important;
  font-weight: 300 !important;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: #0F2E2E !important;
  margin: 0;
}

.om-archive__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 24px);
}

.om-archive__empty {
  font-size: 15px;
  color: rgba(15, 46, 46, 0.7); /* was 0.55 — AA */
  text-align: center;
  padding: 48px 0;
  margin: 0;
}

/* ── Pagination (VIEW MORE button + optional prev/next) ── */
.om-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: clamp(32px, 4vw, 56px);
  flex-wrap: wrap;
}

.om-pagination__link,
.om-pagination__link:visited {
  display: inline-flex;
  align-items: center;
  padding: 11px 28px;
  font-family: 'europa', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: var(--v2-text-button) !important; /* 14px button floor — was 12 */
  font-weight: 600 !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0F2E2E !important;
  border: 1px solid rgba(15, 46, 46, 0.22);
  border-radius: 999px;
  background: #FFFFFF;
  text-decoration: none !important;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.om-pagination__link:hover,
.om-pagination__link:focus-visible {
  background: #0F2E2E;
  color: #FAFBFB !important;
  border-color: #0F2E2E;
  outline: none;
}

.om-pagination__count {
  font-size: var(--v2-text-eyebrow); /* 13px floor — was 11.5 */
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(15, 46, 46, 0.7); /* was 0.55 — AA */
}

@media (max-width: 480px) {
  .om-pagination { gap: 20px; }
}

/* ============================================
   .om-card — shared post card (horizontal: image left, body right).
   Moved here from OM_Featured.module so the ARCHIVE/tag view (which
   renders .om-card markup but does NOT load OM_Featured) is styled.
   Used by both the main listing loop and the tag archive.
   ============================================ */
/* ── Card (horizontal: image left, body right) ── */
.om-card {
  background-color: var(--om-card-bg, #F2F4F4);
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.45s ease;
}

.om-card + .om-card {
  margin-top: clamp(18px, 2vw, 24px);
}

.om-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -24px rgba(15, 46, 46, 0.25);
}

.om-card__link,
.om-card__link:visited {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0;
  color: inherit !important;
  text-decoration: none !important;
  align-items: stretch;
  min-height: clamp(200px, 24vw, 280px);
}

.om-card__media {
  overflow: hidden;
  background: #0F2E2E;
  aspect-ratio: auto;
  min-height: 100%;
}

.om-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.om-card:hover .om-card__media img {
  transform: scale(1.03);
}

.om-card__body {
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.om-card__journal {
  font-family: 'europa', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: var(--v2-text-eyebrow) !important; /* 13px — audience-lens floor (was 11) */
  font-weight: 700 !important;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--om-journal-label, #0F2E2E) !important;
  margin: 0 0 10px;
  line-height: 1;
}

.om-card__title {
  font-family: 'europa', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: clamp(20px, 2vw, 28px) !important;
  font-weight: 400 !important;
  line-height: 1.24;
  letter-spacing: -0.018em;
  color: #0F2E2E !important;
  margin: 0 0 clamp(12px, 1.5vw, 18px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.om-card__excerpt {
  font-size: var(--v2-text-body-mobile) !important; /* 17px body floor — was 14.5 */
  line-height: 1.6;
  color: rgba(15, 46, 46, 0.78) !important; /* was 0.68 — AA */
  margin: 0 0 clamp(18px, 2.5vw, 28px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 56ch;
}

.om-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: clamp(12px, 1.5vw, 18px);
  margin-top: auto;
  border-top: 1px solid rgba(15, 46, 46, 0.08);
  flex-wrap: nowrap;
  white-space: nowrap;
}

.om-card__read-time {
  font-size: var(--v2-text-eyebrow) !important; /* 13px — audience-lens floor (was 12) */
  color: rgba(15, 46, 46, 0.72) !important; /* was 0.6 — AA */
  font-weight: 400 !important;
}

.om-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--v2-text-button) !important; /* 14px button floor — was 12 */
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  color: #0F2E2E !important;
  text-decoration: none !important;
  transition: color 0.25s ease;
  flex-shrink: 0;
}

/* Underline only the text label — the arrow stays clean per Lauren.
   Previously `text-decoration: underline` was on the whole .om-card__cta
   flex container which dragged a line under the arrow span too. */
.om-card__cta-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.om-card:hover .om-card__cta {
  color: var(--v2-teal-label) !important; /* was #059A91 — failed AA on light bg */
}

.om-card__arrow {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.om-card:hover .om-card__arrow {
  transform: translateX(4px);
}

/* ── Responsive ──────────────────────────── */
@media (max-width: 768px) {
  .om-card__link {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .om-card__media {
    aspect-ratio: 16 / 10;
  }
  .om-card__body {
    padding: 22px 22px 24px;
  }
}

@media (max-width: 480px) {
  .om-card__meta { flex-wrap: wrap; }
}