/* === normalize.css === */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. CUSTOM FOR WEBFLOW: Removed the input[type="submit"] selector to reduce
 *    specificity and defer to the .w-button selector
 */
button,
html input[type="button"],
input[type="reset"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. CUSTOM FOR WEBFLOW: changed from `textfield` to `none` to normalize iOS rounded input
 * 2. CUSTOM FOR WEBFLOW: box-sizing: content-box rule removed
 *    (similar to normalize.css >=4.0.0)
 */
input[type='search'] {
  -webkit-appearance: none;
  /* 1 */
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}


/* === webflow.css === */
@font-face {
  font-family: 'webflow-icons';
  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format('truetype');
  font-weight: normal;
  font-style: normal;
}
[class^="w-icon-"],
[class*=" w-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'webflow-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.w-icon-slider-right:before {
  content: "\e600";
}
.w-icon-slider-left:before {
  content: "\e601";
}
.w-icon-nav-menu:before {
  content: "\e602";
}
.w-icon-arrow-down:before,
.w-icon-dropdown-toggle:before {
  content: "\e603";
}
.w-icon-file-upload-remove:before {
  content: "\e900";
}
.w-icon-file-upload-icon:before {
  content: "\e903";
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
img {
  max-width: 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  height: auto;
  vertical-align: middle;
  display: inline-block;
}
/* Keep transparent artwork clear when a text selection crosses an image. */
img::selection {
  background: transparent;
}
html.w-mod-touch * {
  background-attachment: scroll !important;
}
.w-block {
  display: block;
}
.w-inline-block {
  max-width: 100%;
  display: inline-block;
}
.w-clearfix:before,
.w-clearfix:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.w-clearfix:after {
  clear: both;
}
.w-hidden {
  display: none;
}
.w-button {
  display: inline-block;
  padding: 9px 15px;
  background-color: #3898EC;
  color: white;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
input.w-button {
  -webkit-appearance: button;
}
:where(button.w-popover-trigger) {
  background-color: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  text-decoration: inherit;
}
.w-popover {
  position-anchor: none;
}
.w-popover[popover]:not(:popover-open) {
  display: none;
}
html[data-w-dynpage] [data-w-cloak] {
  color: transparent !important;
}
.w-code-block {
  margin: unset;
}
pre.w-code-block code {
  all: inherit;
}
pre.w-code-block code > span {
  display: block !important;
}
.w-optimization {
  display: contents;
}
.w-webflow-badge,
.w-webflow-badge > img {
  box-sizing: unset;
  width: unset;
  height: unset;
  max-height: unset;
  max-width: unset;
  min-height: unset;
  min-width: unset;
  margin: unset;
  padding: unset;
  float: unset;
  clear: unset;
  border: unset;
  border-radius: unset;
  background: unset;
  background-image: unset;
  background-position: unset;
  background-size: unset;
  background-repeat: unset;
  background-origin: unset;
  background-clip: unset;
  background-attachment: unset;
  background-color: unset;
  box-shadow: unset;
  transform: unset;
  transition: unset;
  direction: unset;
  font-family: unset;
  font-weight: unset;
  color: unset;
  font-size: unset;
  line-height: unset;
  font-style: unset;
  font-variant: unset;
  text-align: unset;
  letter-spacing: unset;
  text-decoration: unset;
  text-indent: unset;
  text-transform: unset;
  list-style-type: unset;
  text-shadow: unset;
  vertical-align: unset;
  cursor: unset;
  white-space: unset;
  word-break: unset;
  word-spacing: unset;
  word-wrap: unset;
}
.w-webflow-badge {
  position: fixed !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
  top: auto !important;
  right: 12px !important;
  bottom: 12px !important;
  left: auto !important;
  color: #aaadb0 !important;
  background-color: #fff !important;
  border-radius: 3px !important;
  padding: 6px !important;
  font-size: 12px !important;
  line-height: 14px !important;
  text-decoration: none !important;
  transform: none !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  overflow: unset !important;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.w-webflow-badge > img {
  position: unset;
  display: inline-block !important;
  visibility: unset !important;
  opacity: 1 !important;
  vertical-align: middle !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  margin-bottom: 10px;
}
h1 {
  font-size: 38px;
  line-height: 44px;
  margin-top: 20px;
}
h2 {
  font-size: 32px;
  line-height: 36px;
  margin-top: 20px;
}
h3 {
  font-size: 24px;
  line-height: 30px;
  margin-top: 20px;
}
h4 {
  font-size: 18px;
  line-height: 24px;
  margin-top: 10px;
}
h5 {
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;
}
h6 {
  font-size: 12px;
  line-height: 18px;
  margin-top: 10px;
}
p {
  margin-top: 0;
  margin-bottom: 10px;
}
blockquote {
  margin: 0 0 10px 0;
  padding: 10px 20px;
  border-left: 5px solid #E2E2E2;
  font-size: 18px;
  line-height: 22px;
}
figure {
  margin: 0;
  margin-bottom: 10px;
}
figcaption {
  margin-top: 5px;
  text-align: center;
}
ul,
ol {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 40px;
}
.w-list-unstyled {
  padding-left: 0;
  list-style: none;
}
.w-embed:before,
.w-embed:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.w-embed:after {
  clear: both;
}
.w-video {
  width: 100%;
  position: relative;
  padding: 0;
}
.w-video iframe,
.w-video object,
.w-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}
button,
[type='button'],
[type='reset'] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}
.w-form {
  margin: 0 0 15px;
}
.w-form-done {
  display: none;
  padding: 20px;
  text-align: center;
  background-color: #dddddd;
}
.w-form-fail {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffdede;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.w-input,
.w-select {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.w-input::placeholder,
.w-select::placeholder {
  color: #999;
}
.w-input:focus,
.w-select:focus {
  border-color: #3898EC;
  outline: 0;
}
.w-input[disabled],
.w-select[disabled],
.w-input[readonly],
.w-select[readonly],
fieldset[disabled] .w-input,
fieldset[disabled] .w-select {
  cursor: not-allowed;
}
.w-input[disabled]:not(.w-input-disabled),
.w-select[disabled]:not(.w-input-disabled),
.w-input[readonly],
.w-select[readonly],
fieldset[disabled]:not(.w-input-disabled) .w-input,
fieldset[disabled]:not(.w-input-disabled) .w-select {
  background-color: #eeeeee;
}
textarea.w-input,
textarea.w-select {
  height: auto;
}
.w-select {
  background-color: #f3f3f3;
}
.w-select[multiple] {
  height: auto;
}
.w-form-label {
  display: inline-block;
  cursor: pointer;
  font-weight: normal;
  margin-bottom: 0px;
}
.w-radio {
  display: block;
  margin-bottom: 5px;
  padding-left: 20px;
}
.w-radio:before,
.w-radio:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.w-radio:after {
  clear: both;
}
.w-radio-input {
  margin: 4px 0 0;
  line-height: normal;
  float: left;
  margin-left: -20px;
}
.w-radio-input {
  margin-top: 3px;
}
.w-file-upload {
  display: block;
  margin-bottom: 10px;
}
.w-file-upload-input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -100;
}
.w-file-upload-default,
.w-file-upload-uploading,
.w-file-upload-success {
  display: inline-block;
  color: #333333;
}
.w-file-upload-error {
  display: block;
  margin-top: 10px;
}
.w-file-upload-default.w-hidden,
.w-file-upload-uploading.w-hidden,
.w-file-upload-error.w-hidden,
.w-file-upload-success.w-hidden {
  display: none;
}
.w-file-upload-uploading-btn {
  display: flex;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #cccccc;
  background-color: #fafafa;
}
.w-file-upload-file {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  margin: 0;
  padding: 8px 9px 8px 11px;
  border: 1px solid #cccccc;
  background-color: #fafafa;
}
.w-file-upload-file-name {
  font-size: 14px;
  font-weight: normal;
  display: block;
}
.w-file-remove-link {
  margin-top: 3px;
  margin-left: 10px;
  width: auto;
  height: auto;
  padding: 3px;
  display: block;
  cursor: pointer;
}
.w-icon-file-upload-remove {
  margin: auto;
  font-size: 10px;
}
.w-file-upload-error-msg {
  display: inline-block;
  color: #ea384c;
  padding: 2px 0;
}
.w-file-upload-info {
  display: inline-block;
  line-height: 38px;
  padding: 0 12px;
}
.w-file-upload-label {
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #cccccc;
  background-color: #fafafa;
}
.w-icon-file-upload-icon,
.w-icon-file-upload-uploading {
  display: inline-block;
  margin-right: 8px;
  width: 20px;
}
.w-icon-file-upload-uploading {
  height: 20px;
}
.w-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}
.w-container:before,
.w-container:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.w-container:after {
  clear: both;
}
.w-container .w-row {
  margin-left: -10px;
  margin-right: -10px;
}
.w-row:before,
.w-row:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.w-row:after {
  clear: both;
}
.w-row .w-row {
  margin-left: 0;
  margin-right: 0;
}
.w-col {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
}
.w-col .w-col {
  padding-left: 0;
  padding-right: 0;
}
.w-col-1 {
  width: 8.33333333%;
}
.w-col-2 {
  width: 16.66666667%;
}
.w-col-3 {
  width: 25%;
}
.w-col-4 {
  width: 33.33333333%;
}
.w-col-5 {
  width: 41.66666667%;
}
.w-col-6 {
  width: 50%;
}
.w-col-7 {
  width: 58.33333333%;
}
.w-col-8 {
  width: 66.66666667%;
}
.w-col-9 {
  width: 75%;
}
.w-col-10 {
  width: 83.33333333%;
}
.w-col-11 {
  width: 91.66666667%;
}
.w-col-12 {
  width: 100%;
}
.w-hidden-main {
  display: none !important;
}
@media screen and (max-width: 991px) {
  .w-container {
    max-width: 728px;
  }
  .w-hidden-main {
    display: inherit !important;
  }
  .w-hidden-medium {
    display: none !important;
  }
  .w-col-medium-1 {
    width: 8.33333333%;
  }
  .w-col-medium-2 {
    width: 16.66666667%;
  }
  .w-col-medium-3 {
    width: 25%;
  }
  .w-col-medium-4 {
    width: 33.33333333%;
  }
  .w-col-medium-5 {
    width: 41.66666667%;
  }
  .w-col-medium-6 {
    width: 50%;
  }
  .w-col-medium-7 {
    width: 58.33333333%;
  }
  .w-col-medium-8 {
    width: 66.66666667%;
  }
  .w-col-medium-9 {
    width: 75%;
  }
  .w-col-medium-10 {
    width: 83.33333333%;
  }
  .w-col-medium-11 {
    width: 91.66666667%;
  }
  .w-col-medium-12 {
    width: 100%;
  }
  .w-col-stack {
    width: 100%;
    left: auto;
    right: auto;
  }
}
@media screen and (max-width: 767px) {
  .w-hidden-main {
    display: inherit !important;
  }
  .w-hidden-medium {
    display: inherit !important;
  }
  .w-hidden-small {
    display: none !important;
  }
  .w-row,
  .w-container .w-row {
    margin-left: 0;
    margin-right: 0;
  }
  .w-col {
    width: 100%;
    left: auto;
    right: auto;
  }
  .w-col-small-1 {
    width: 8.33333333%;
  }
  .w-col-small-2 {
    width: 16.66666667%;
  }
  .w-col-small-3 {
    width: 25%;
  }
  .w-col-small-4 {
    width: 33.33333333%;
  }
  .w-col-small-5 {
    width: 41.66666667%;
  }
  .w-col-small-6 {
    width: 50%;
  }
  .w-col-small-7 {
    width: 58.33333333%;
  }
  .w-col-small-8 {
    width: 66.66666667%;
  }
  .w-col-small-9 {
    width: 75%;
  }
  .w-col-small-10 {
    width: 83.33333333%;
  }
  .w-col-small-11 {
    width: 91.66666667%;
  }
  .w-col-small-12 {
    width: 100%;
  }
}
@media screen and (max-width: 479px) {
  .w-container {
    max-width: none;
  }
  .w-hidden-main {
    display: inherit !important;
  }
  .w-hidden-medium {
    display: inherit !important;
  }
  .w-hidden-small {
    display: inherit !important;
  }
  .w-hidden-tiny {
    display: none !important;
  }
  .w-col {
    width: 100%;
  }
  .w-col-tiny-1 {
    width: 8.33333333%;
  }
  .w-col-tiny-2 {
    width: 16.66666667%;
  }
  .w-col-tiny-3 {
    width: 25%;
  }
  .w-col-tiny-4 {
    width: 33.33333333%;
  }
  .w-col-tiny-5 {
    width: 41.66666667%;
  }
  .w-col-tiny-6 {
    width: 50%;
  }
  .w-col-tiny-7 {
    width: 58.33333333%;
  }
  .w-col-tiny-8 {
    width: 66.66666667%;
  }
  .w-col-tiny-9 {
    width: 75%;
  }
  .w-col-tiny-10 {
    width: 83.33333333%;
  }
  .w-col-tiny-11 {
    width: 91.66666667%;
  }
  .w-col-tiny-12 {
    width: 100%;
  }
}
.w-widget {
  position: relative;
}
.w-widget-map {
  width: 100%;
  height: 400px;
}
.w-widget-map label {
  width: auto;
  display: inline;
}
.w-widget-map img {
  max-width: inherit;
}
.w-widget-map .gm-style-iw {
  text-align: center;
}
.w-widget-map .gm-style-iw > button {
  display: none !important;
}
.w-widget-twitter {
  overflow: hidden;
}
.w-widget-twitter-count-shim {
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 28px;
  height: 20px;
  text-align: center;
  background: white;
  border: #758696 solid 1px;
  border-radius: 3px;
}
.w-widget-twitter-count-shim * {
  pointer-events: none;
  user-select: none;
}
.w-widget-twitter-count-shim .w-widget-twitter-count-inner {
  position: relative;
  font-size: 15px;
  line-height: 12px;
  text-align: center;
  color: #999;
  font-family: serif;
}
.w-widget-twitter-count-shim .w-widget-twitter-count-clear {
  position: relative;
  display: block;
}
.w-widget-twitter-count-shim.w--large {
  width: 36px;
  height: 28px;
}
.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 18px;
}
.w-widget-twitter-count-shim:not(.w--vertical) {
  margin-left: 5px;
  margin-right: 8px;
}
.w-widget-twitter-count-shim:not(.w--vertical).w--large {
  margin-left: 6px;
}
.w-widget-twitter-count-shim:not(.w--vertical):before,
.w-widget-twitter-count-shim:not(.w--vertical):after {
  top: 50%;
  left: 0;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.w-widget-twitter-count-shim:not(.w--vertical):before {
  border-color: rgba(117, 134, 150, 0);
  border-right-color: #5d6c7b;
  border-width: 4px;
  margin-left: -9px;
  margin-top: -4px;
}
.w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
  border-width: 5px;
  margin-left: -10px;
  margin-top: -5px;
}
.w-widget-twitter-count-shim:not(.w--vertical):after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: white;
  border-width: 4px;
  margin-left: -8px;
  margin-top: -4px;
}
.w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
  border-width: 5px;
  margin-left: -9px;
  margin-top: -5px;
}
.w-widget-twitter-count-shim.w--vertical {
  width: 61px;
  height: 33px;
  margin-bottom: 8px;
}
.w-widget-twitter-count-shim.w--vertical:before,
.w-widget-twitter-count-shim.w--vertical:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.w-widget-twitter-count-shim.w--vertical:before {
  border-color: rgba(117, 134, 150, 0);
  border-top-color: #5d6c7b;
  border-width: 5px;
  margin-left: -5px;
}
.w-widget-twitter-count-shim.w--vertical:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: white;
  border-width: 4px;
  margin-left: -4px;
}
.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 22px;
}
.w-widget-twitter-count-shim.w--vertical.w--large {
  width: 76px;
}
.w-background-video {
  position: relative;
  overflow: hidden;
  height: 500px;
  color: white;
}
.w-background-video > video {
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  margin: auto;
  width: 100%;
  height: 100%;
  right: -100%;
  bottom: -100%;
  top: -100%;
  left: -100%;
  object-fit: cover;
  z-index: -100;
}
.w-background-video > video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.w-background-video--control {
  position: absolute;
  bottom: 1em;
  right: 1em;
  background-color: transparent;
  padding: 0;
}
.w-background-video--control > [hidden] {
  display: none !important;
}
.w-slider {
  position: relative;
  height: 300px;
  text-align: center;
  background: #dddddd;
  clear: both;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
}
.w-slider-mask {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 1;
  left: 0;
  right: 0;
  height: 100%;
  white-space: nowrap;
}
.w-slide {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 100%;
  white-space: normal;
  text-align: left;
}
.w-slider-nav {
  position: absolute;
  z-index: 2;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  padding-top: 10px;
  height: 40px;
  text-align: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
}
.w-slider-nav.w-round > div {
  border-radius: 100%;
}
.w-slider-nav.w-num > div {
  width: auto;
  height: auto;
  padding: 0.2em 0.5em;
  font-size: inherit;
  line-height: inherit;
}
.w-slider-nav.w-shadow > div {
  box-shadow: 0 0 3px rgba(51, 51, 51, 0.4);
}
.w-slider-nav-invert {
  color: #fff;
}
.w-slider-nav-invert > div {
  background-color: rgba(34, 34, 34, 0.4);
}
.w-slider-nav-invert > div.w-active {
  background-color: #222;
}
.w-slider-dot {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  margin: 0 3px 0.5em;
  transition: background-color 100ms, color 100ms;
}
.w-slider-dot.w-active {
  background-color: #fff;
}
.w-slider-dot:focus {
  outline: none;
  box-shadow: 0px 0px 0px 2px #fff;
}
.w-slider-dot:focus.w-active {
  box-shadow: none;
}
.w-slider-arrow-left,
.w-slider-arrow-right {
  position: absolute;
  width: 80px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  cursor: pointer;
  overflow: hidden;
  color: white;
  font-size: 40px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
}
.w-slider-arrow-left [class^='w-icon-'],
.w-slider-arrow-right [class^='w-icon-'],
.w-slider-arrow-left [class*=' w-icon-'],
.w-slider-arrow-right [class*=' w-icon-'] {
  position: absolute;
}
.w-slider-arrow-left:focus,
.w-slider-arrow-right:focus {
  outline: 0;
}
.w-slider-arrow-left {
  z-index: 3;
  right: auto;
}
.w-slider-arrow-right {
  z-index: 4;
  left: auto;
}
.w-icon-slider-left,
.w-icon-slider-right {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 1em;
  height: 1em;
}
.w-slider-aria-label {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.w-slider-force-show {
  display: block !important;
}
.w-dropdown {
  display: inline-block;
  position: relative;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  z-index: 900;
}
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
  position: relative;
  vertical-align: top;
  text-decoration: none;
  color: #222222;
  padding: 20px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
}
.w-dropdown-toggle {
  user-select: none;
  display: inline-block;
  cursor: pointer;
  padding-right: 40px;
}
.w-dropdown-toggle:focus {
  outline: 0;
}
.w-icon-dropdown-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  margin-right: 20px;
  width: 1em;
  height: 1em;
}
.w-dropdown-list {
  position: absolute;
  background: #dddddd;
  display: none;
  min-width: 100%;
}
.w-dropdown-list.w--open {
  display: block;
}
.w-dropdown-link {
  padding: 10px 20px;
  display: block;
  color: #222222;
}
.w-dropdown-link.w--current {
  color: #0082f3;
}
.w-dropdown-link:focus {
  outline: 0;
}
/**
 * ## Note
 * Safari (on both iOS and OS X) does not handle viewport units (vh, vw) well.
 * For example percentage units do not work on descendants of elements that
 * have any dimensions expressed in viewport units. It also doesn’t handle them at
 * all in `calc()`.
 */
/**
 * Wrapper around all lightbox elements
 *
 * 1. Since the lightbox can receive focus, IE also gives it an outline.
 * 2. Fixes flickering on Chrome when a transition is in progress
 *    underneath the lightbox.
 */
.w-lightbox-backdrop {
  cursor: auto;
  font-style: normal;
  letter-spacing: normal;
  list-style: disc;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  visibility: visible;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 300;
  text-align: center;
  background: rgba(0, 0, 0, 0.9);
  z-index: 2000;
  outline: 0;
  /* 1 */
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-transform: translate(0, 0);
  /* 2 */
}
/**
 * Neat trick to bind the rubberband effect to our canvas instead of the whole
 * document on iOS. It also prevents a bug that causes the document underneath to scroll.
 */
.w-lightbox-backdrop,
.w-lightbox-container {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.w-lightbox-content {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.w-lightbox-view {
  position: absolute;
  width: 100vw;
  height: 100vh;
  opacity: 0;
}
.w-lightbox-view:before {
  content: "";
  height: 100vh;
}
/* .w-lightbox-content */
.w-lightbox-group,
.w-lightbox-group .w-lightbox-view,
.w-lightbox-group .w-lightbox-view:before {
  height: 86vh;
}
.w-lightbox-frame,
.w-lightbox-view:before {
  display: inline-block;
  vertical-align: middle;
}
/*
 * 1. Remove default margin set by user-agent on the <figure> element.
 */
.w-lightbox-figure {
  position: relative;
  margin: 0;
  /* 1 */
}
.w-lightbox-group .w-lightbox-figure {
  cursor: pointer;
}
/**
 * IE adds image dimensions as width and height attributes on the IMG tag,
 * but we need both width and height to be set to auto to enable scaling.
 */
.w-lightbox-img {
  width: auto;
  height: auto;
  max-width: none;
}
/**
 * 1. Reset if style is set by user on "All Images"
 */
.w-lightbox-image {
  display: block;
  float: none;
  /* 1 */
  max-width: 100vw;
  max-height: 100vh;
}
.w-lightbox-group .w-lightbox-image {
  max-height: 86vh;
}
.w-lightbox-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.5em 1em;
  background: rgba(0, 0, 0, 0.4);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.w-lightbox-embed {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.w-lightbox-control {
  position: absolute;
  top: 0;
  width: 4em;
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.w-lightbox-left {
  display: none;
  bottom: 0;
  left: 0;
  /* <svg xmlns="http://www.w3.org/2000/svg" viewBox="-20 0 24 40" width="24" height="40"><g transform="rotate(45)"><path d="m0 0h5v23h23v5h-28z" opacity=".4"/><path d="m1 1h3v23h23v3h-26z" fill="#fff"/></g></svg> */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
}
.w-lightbox-right {
  display: none;
  right: 0;
  bottom: 0;
  /* <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 0 24 40" width="24" height="40"><g transform="rotate(45)"><path d="m0-0h28v28h-5v-23h-23z" opacity=".4"/><path d="m1 1h26v26h-3v-23h-23z" fill="#fff"/></g></svg> */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+");
}
/*
 * Without specifying the with and height inside the SVG, all versions of IE render the icon too small.
 * The bug does not seem to manifest itself if the elements are tall enough such as the above arrows.
 * (http://stackoverflow.com/questions/16092114/background-size-differs-in-internet-explorer)
 */
.w-lightbox-close {
  right: 0;
  height: 2.6em;
  /* <svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 0 18 17" width="18" height="17"><g transform="rotate(45)"><path d="m0 0h7v-7h5v7h7v5h-7v7h-5v-7h-7z" opacity=".4"/><path d="m1 1h7v-7h3v7h7v3h-7v7h-3v-7h-7z" fill="#fff"/></g></svg> */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");
  background-size: 18px;
}
/**
 * 1. All IE versions add extra space at the bottom without this.
 */
.w-lightbox-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 1vh;
  line-height: 0;
  /* 1 */
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
/*
 * 1. We use content-box to avoid having to do `width: calc(10vh + 2vw)`
 *    which doesn’t work in Safari anyway.
 * 2. Chrome renders images pixelated when switching to GPU. Making sure
 *    the parent is also rendered on the GPU (by setting translate3d for
 *    example) fixes this behavior.
 */
.w-lightbox-item {
  display: inline-block;
  width: 10vh;
  padding: 2vh 1vh;
  box-sizing: content-box;
  /* 1 */
  cursor: pointer;
  -webkit-transform: translate3d(0, 0, 0);
  /* 2 */
}
.w-lightbox-active {
  opacity: 0.3;
}
.w-lightbox-thumbnail {
  position: relative;
  height: 10vh;
  background: #222;
  overflow: hidden;
}
.w-lightbox-thumbnail-image {
  position: absolute;
  top: 0;
  left: 0;
}
.w-lightbox-thumbnail .w-lightbox-tall {
  top: 50%;
  width: 100%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.w-lightbox-thumbnail .w-lightbox-wide {
  left: 50%;
  height: 100%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
/*
 * Spinner
 *
 * Absolute pixel values are used to avoid rounding errors that would cause
 * the white spinning element to be misaligned with the track.
 */
.w-lightbox-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  border: 5px solid rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  -webkit-animation: spin 0.8s infinite linear;
  animation: spin 0.8s infinite linear;
}
.w-lightbox-spinner:after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  border: 3px solid transparent;
  border-bottom-color: #fff;
  border-radius: 50%;
}
/*
 * Utility classes
 */
.w-lightbox-hide {
  display: none;
}
.w-lightbox-noscroll {
  overflow: hidden;
}
@media (min-width: 768px) {
  .w-lightbox-content {
    height: 96vh;
    margin-top: 2vh;
  }
  .w-lightbox-view,
  .w-lightbox-view:before {
    height: 96vh;
  }
  /* .w-lightbox-content */
  .w-lightbox-group,
  .w-lightbox-group .w-lightbox-view,
  .w-lightbox-group .w-lightbox-view:before {
    height: 84vh;
  }
  .w-lightbox-image {
    max-width: 96vw;
    max-height: 96vh;
  }
  .w-lightbox-group .w-lightbox-image {
    max-width: 82.3vw;
    max-height: 84vh;
  }
  .w-lightbox-left,
  .w-lightbox-right {
    display: block;
    opacity: 0.5;
  }
  .w-lightbox-close {
    opacity: 0.8;
  }
  .w-lightbox-control:hover {
    opacity: 1;
  }
}
.w-lightbox-inactive,
.w-lightbox-inactive:hover {
  opacity: 0;
}
.w-richtext:before,
.w-richtext:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.w-richtext:after {
  clear: both;
}
.w-richtext[contenteditable="true"]:before,
.w-richtext[contenteditable="true"]:after {
  white-space: initial;
}
.w-richtext ol,
.w-richtext ul {
  overflow: hidden;
}
.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after,
.w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after {
  outline: 2px solid #2895f7;
}
.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div,
.w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
  outline: 2px solid #2895f7;
}
.w-richtext figure.w-richtext-figure-type-video > div:after,
.w-richtext figure[data-rt-type="video"] > div:after {
  content: '';
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.w-richtext figure {
  position: relative;
  max-width: 60%;
}
.w-richtext figure > div:before {
  cursor: default!important;
}
.w-richtext figure img {
  width: 100%;
}
.w-richtext figure figcaption.w-richtext-figcaption-placeholder {
  opacity: 0.6;
}
.w-richtext figure div {
  /* fix incorrectly sized selection border in the data manager */
  font-size: 0px;
  color: transparent;
}
.w-richtext figure.w-richtext-figure-type-image,
.w-richtext figure[data-rt-type="image"] {
  display: table;
}
.w-richtext figure.w-richtext-figure-type-image > div,
.w-richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}
.w-richtext figure.w-richtext-figure-type-image > figcaption,
.w-richtext figure[data-rt-type="image"] > figcaption {
  display: table-caption;
  caption-side: bottom;
}
.w-richtext figure.w-richtext-figure-type-video,
.w-richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}
.w-richtext figure.w-richtext-figure-type-video iframe,
.w-richtext figure[data-rt-type="video"] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.w-richtext figure.w-richtext-figure-type-video > div,
.w-richtext figure[data-rt-type="video"] > div {
  width: 100%;
}
.w-richtext figure.w-richtext-align-center {
  margin-right: auto;
  margin-left: auto;
  clear: both;
}
.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div,
.w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div {
  max-width: 100%;
}
.w-richtext figure.w-richtext-align-normal {
  clear: both;
}
.w-richtext figure.w-richtext-align-fullwidth {
  width: 100%;
  max-width: 100%;
  text-align: center;
  clear: both;
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.w-richtext figure.w-richtext-align-fullwidth > div {
  display: inline-block;
  /* padding-bottom is used for aspect ratios in video figures
      we want the div to inherit that so hover/selection borders in the designer-canvas
      fit right*/
  padding-bottom: inherit;
}
.w-richtext figure.w-richtext-align-fullwidth > figcaption {
  display: block;
}
.w-richtext figure.w-richtext-align-floatleft {
  float: left;
  margin-right: 15px;
  clear: none;
}
.w-richtext figure.w-richtext-align-floatright {
  float: right;
  margin-left: 15px;
  clear: none;
}
.w-nav {
  position: relative;
  background: #dddddd;
  z-index: 1000;
}
.w-nav:before,
.w-nav:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.w-nav:after {
  clear: both;
}
.w-nav-brand {
  position: relative;
  float: left;
  text-decoration: none;
  color: #333333;
}
.w-nav-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  color: #222222;
  padding: 20px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}
.w-nav-link.w--current {
  color: #0082f3;
}
.w-nav-menu {
  position: relative;
  float: right;
}
[data-nav-menu-open] {
  display: block !important;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #C8C8C8;
  text-align: center;
  overflow: visible;
  min-width: 200px;
}
.w--nav-link-open {
  display: block;
  position: relative;
}
.w-nav-overlay {
  position: absolute;
  overflow: hidden;
  display: none;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
}
.w-nav-overlay [data-nav-menu-open] {
  top: 0;
}
.w-nav[data-animation='over-left'] .w-nav-overlay {
  width: auto;
}
.w-nav[data-animation='over-left'] .w-nav-overlay,
.w-nav[data-animation='over-left'] [data-nav-menu-open] {
  right: auto;
  z-index: 1;
  top: 0;
}
.w-nav[data-animation='over-right'] .w-nav-overlay {
  width: auto;
}
.w-nav[data-animation='over-right'] .w-nav-overlay,
.w-nav[data-animation='over-right'] [data-nav-menu-open] {
  left: auto;
  z-index: 1;
  top: 0;
}
.w-nav-button {
  position: relative;
  float: right;
  padding: 18px;
  font-size: 24px;
  display: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
}
.w-nav-button:focus {
  outline: 0;
}
.w-nav-button.w--open {
  background-color: #C8C8C8;
  color: white;
}
.w-nav[data-collapse='all'] .w-nav-menu {
  display: none;
}
.w-nav[data-collapse='all'] .w-nav-button {
  display: block;
}
.w--nav-dropdown-open {
  display: block;
}
.w--nav-dropdown-toggle-open {
  display: block;
}
.w--nav-dropdown-list-open {
  position: static;
}
/**
 * NOTE: These rules are overridden in site-designer.less to use container queries instead of media queries
 * when the navbar is inside a Frame on the Open Canvas.
 */
@media screen and (max-width: 991px) {
  .w-nav[data-collapse='medium'] .w-nav-menu {
    display: none;
  }
  .w-nav[data-collapse='medium'] .w-nav-button {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .w-nav[data-collapse='small'] .w-nav-menu {
    display: none;
  }
  .w-nav[data-collapse='small'] .w-nav-button {
    display: block;
  }
  .w-nav-brand {
    padding-left: 10px;
  }
}
@media screen and (max-width: 479px) {
  .w-nav[data-collapse='tiny'] .w-nav-menu {
    display: none;
  }
  .w-nav[data-collapse='tiny'] .w-nav-button {
    display: block;
  }
}
.w-tabs {
  position: relative;
}
.w-tabs:before,
.w-tabs:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.w-tabs:after {
  clear: both;
}
.w-tab-menu {
  position: relative;
}
.w-tab-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  padding: 9px 30px;
  text-align: left;
  cursor: pointer;
  color: #222222;
  background-color: #dddddd;
}
.w-tab-link.w--current {
  background-color: #C8C8C8;
}
.w-tab-link:focus {
  outline: 0;
}
.w-tab-content {
  position: relative;
  display: block;
  overflow: hidden;
}
.w-tab-pane {
  position: relative;
  display: none;
}
.w--tab-active {
  display: block;
}
@media screen and (max-width: 479px) {
  .w-tab-link {
    display: block;
  }
}
.w-ix-emptyfix:after {
  content: "";
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.w-dyn-empty {
  padding: 10px;
  background-color: #dddddd;
}
.w-dyn-hide {
  display: none !important;
}
.w-dyn-bind-empty {
  display: none !important;
}
.w-condition-invisible {
  display: none !important;
}
.wf-layout-layout {
  display: grid;
}


/* === ssm003.webflow.css === */
/* Shared foundations. Keep semantic accents and component geometry separate. */
:root {
    --bg-hero: #c7d2d4;
    --carousel-surface: #6e8191;
    --bg-base: #d1dcdf;
    --nav-surface: rgb(54 73 91 / 0.55000000);
    --nav-surface-hover: rgb(54 73 91 / 0.62000000);
    --brand-blue: #006aff;
    --brand-blue-hover: #0068d7;
    --brand-blue-pale: #ade6fc;
    --service-progress: #8abaff;
    --text-outline: #6392da;
    --text-outline-shadow: rgb(31 139 232 / 59%);
    --text-contact: #596b83;
    --brand-yellow-bright: #ffe052;
    --brand-slate: var(--brand-gray-blue);
    --link-blue: var(--brand-blue);
    --link-blue-on-dark: #54caff;
    --link-blue-open: var(--brand-blue);
    --link-blue-open-hover: var(--brand-blue-hover);
    --link-blue-inline-hover: var(--brand-blue-hover);
    --border-col: #b9d1e2;
    --ftrbg: #224155;
    --base-clr: #4ac5ff;
    --brand-ink: #0a2946;
    --brand-gray-blue: #526779;
    --text-gray-half: #808080;
    --surface-shout: var(--brand-gray-blue);
    --brand-cool-gray: #91a4ad;
    --brand-slate-dark: #36495b;
    --brand-shadow: #22333e;
    --brand-reflection: #627b88;
    --brand-yellow: #e8ca62;
    --brand-yellow-soft: #f2e7b8;
    --brand-yellow-ink: #877b59;
    --text-muted: #536b7a;
    --text-on-dark: #f7fafb;
    --text-on-dark-muted: #f1f5f7;
    --collection-muted: #60778b;
    --collection-ink: #29465f;
    --collection-meta: #42637d;
    --link-blue-collection: var(--brand-blue);
    --control-ink: #17394d;
    --control-muted: #536e7e;
    --control-surface: #dbe4e7;
    --control-shadow: #b8c4cb;
    --border-input: #c0cfd5;
    --surface-toc: #e6edf0;
    --surface-glass: #ffffff14;
    --surface-faq: #ffffff33;
    --surface-dark-glass: rgb(54 73 91 / 0.56000000);
    --surface-gray-blue: linear-gradient(180deg, var(--brand-gray-blue) 0%, var(--brand-slate-dark) 65%, var(--brand-shadow) 100%);
    --border-on-dark: #bccbd233;
    --border-on-dark-top: #d9e3e84d;
    --border-on-dark-bottom: rgb(98 123 136 / 0.40000000);
    --ss-prism-border-top: #f5fcffe6;
    --ss-prism-border-bottom: #e9e9b9cc;
    --ss-prism-border-left: #acfffbb3;
    --ss-prism-border-right: #a7d9efd9;
    --shadow-glass: 0 3px 12px #17384f12;
    --shadow-glass-hover: 0 4px 12px #17384f24;
    --shadow-control-inset: inset 3px 3px 7px #304f6326, inset -3px -3px 7px #ffffff80;
    --button-blue-soft: #a0dbff6e;
    --button-yellow-text: #ffe489;
    --button-light-surface: #a8c5d04d;
    --button-light-text: var(--brand-reflection);
    --button-dark-surface: var(--bg-base);
    --button-dark-text: var(--brand-gray-blue);
    --quote-primary: var(--brand-blue);
    --quote-primary-hover: var(--brand-blue-hover);
    --content-body-size: 18px;
    --content-body-leading: 1.3;
    --content-reading-leading: 1.6;
    --content-subheading-size: 38px;
    --content-subheading-leading: 1.25;
    --content-compact-size: 16px;
    --ss-reading-width: 600px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-15: 60px;
    --space-16: 64px;
    --space-20: 80px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --radius-panel: 28px;
}

.w-layout-blockcontainer {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    display: block
}

.w-layout-grid {
    grid-row-gap: 0;
    grid-column-gap: 0;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
    max-width: 1400px;
    margin: 0 auto
}

@media screen and (max-width: 991px) {
    .w-layout-blockcontainer {
        max-width:728px
    }
}

@media screen and (max-width: 767px) {
    .w-layout-blockcontainer {
        max-width:none
    }
}

body {
    color: var(--brand-ink);
    background-color: var(--bg-base);
    font-family: Open Sans,sans-serif;
    font-size: 15px;
    line-height: 1.5
}

h1 {
    opacity: .72;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 5.2rem;
    font-weight: 700;
    line-height: 1
}

h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: -4px;
    font-size: 3.5rem;
    line-height: 1.1
}

h3 {
    letter-spacing: .02rem;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: -2px;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.3
}

h4 {
    opacity: .69;
    letter-spacing: .05rem;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px
}

p {
    opacity: .82;
    margin-bottom: 10px
}

a {
    padding: 0 12px;
    font-size: 2rem
}

ul {
    opacity: .7;
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 20px
}

ol {
    opacity: .8;
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 20px
}

strong {
    opacity: .85;
    font-weight: 700
}

blockquote {
    opacity: .6;
    border-left: 5px solid #e2e2e2;
    margin-bottom: 10px;
    padding: 10px 20px;
    font-family: Kanit,sans-serif;
    font-size: 18px;
    font-style: italic;
    line-height: 22px
}

.hero_cont {
    z-index: 1;
    flex-flow: column;
    justify-content: center;
    align-self: stretch;
    align-items: flex-start;
    width: 100%;
    max-width: 1470px;
    padding: 40px 40px 100px;
    display: flex;
    position: relative
}

.hero_cont.service-holder-af {
    justify-content: center;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
    overflow: clip
}

.hero_cont.service-holder-af.af-3d {
    flex-flow: column;
    flex: 0 auto;
    justify-content: center;
    align-self: stretch;
    align-items: center;
    min-height: 100vh;
    position: sticky;
    top: 0
}

.hero_cont.about-mission {
    padding-bottom: 0
}

.hero_cont.sub-sec-af.left-al {
    align-self: flex-start;
    padding-top: 60px
}

.hero_cont.hero-se {
    justify-content: center;
    align-items: flex-start
}

.black_a {
    z-index: 1;
    background-color: var(--bg-hero);
    color: #fff;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    min-height: calc(min(100dvh, 80vw) + 83px);
    padding-top: 80px;
    padding-bottom: 80px;
    display: flex;
    position: relative;
    overflow: clip;
    transform: perspective(1009px)
}

.heading-2 {
    opacity: 1;
    color: #c5d0db;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0;
    font-size: min(4.4vw, 88px);
    font-weight: 700;
    line-height: 1;
    position: relative
}

.af-grid-sys {
    z-index: -2;
    pointer-events: none;
    width: 100vw;
    max-width: 1420px;
    position: fixed;
    inset: 0 auto 0% 50%;
    transform: translate(-50%)
}

.black_hole_cont {
    opacity: 0;
    mix-blend-mode: lighten;
    background-color: #ededed00;
    position: absolute;
    inset: 0%
}

.div-block-11 {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 4px;
    display: flex
}

.div-block-13 {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: 7px;
    flex-flow: column;
    justify-content: center;
    align-self: flex-start;
    align-items: flex-start;
    padding: 30px;
    transition: all .35s;
    display: flex;
    box-shadow: inset 0 0 20px -6px #2395ff
}

.link-block {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: #0d182a;
    text-align: left;
    max-width: 13vw;
    text-shadow: none;
    background-color: #2b9bd2;
    border: 1px solid #489bff;
    border-radius: 20px;
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: center;
    padding: 4px 16px 6px 12px;
    font-size: min(2rem, 2.2vw);
    text-decoration: none;
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease;
    display: flex;
    box-shadow: inset 0 0 13px #3c99ff5c
}

.link-block:hover {
    color: #fff
}

.image {
    width: 40px;
    margin-left: 4px;
    display: inline;
    position: relative;
    top: 0
}

.image.icn {
    justify-content: center;
    align-items: flex-start;
    width: 34px;
    height: 40px;
    margin-left: 0;
    margin-right: 4px;
    padding: 0 0 3px 3px;
    display: inline-block;
    top: 1px
}

.service-carousel {
    z-index: 1;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    aspect-ratio: 2.2;
    perspective: 16vw;
    perspective-origin: 50%;
    border: 1px #bad2e3;
    flex: 0 auto;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    overflow: clip
}

.service-carousel.af-r {
    max-width: 100%;
    transform-style: preserve-3d;
    flex-flow: row;
    flex: 0 auto;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: -27vh;
    overflow: auto;
    transform: rotateX(-18deg) rotateY(0) rotateZ(0)
}

.af-c {
    z-index: 3;
    outline-offset: -4px;
    color: var(--text-on-dark);
    text-align: left;
    background-color: var(--carousel-surface);
    border-radius: 60px;
    outline: 1px solid #d1dcdf;
    justify-content: center;
    align-self: flex-end;
    align-items: center;
    max-width: 48vw;
    max-height: 230px;
    margin-left: 0;
    margin-right: 0;
    padding: 20px 40px 40px;
    display: flex;
    transform: rotate(0)
}

.div-block-17 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    min-width: 200px;
    transform-style: preserve-3d;
    flex: 1;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: center;
    align-self: stretch;
    align-items: center;
    display: flex
}

.heading-5 {
    color: var(--text-on-dark);
    text-transform: uppercase;
    overflow-wrap: anywhere;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: min(2.8rem, 2.6vw);
    font-weight: 300;
    line-height: 1
}

.code-embed-5 {
    z-index: 3;
    max-width: none;
    height: 85px;
    color: var(--bg-base);
    background-image: linear-gradient(180deg, transparent 49px, var(--bg-base) 30px);
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    inset: auto 0 -5px
}


.div-block-19 {
    height: 0;
    position: relative
}

.code-embed-6 {
    opacity: 0;
    background-color: transparent;
    height: 100%;
    margin-bottom: 0;
    position: absolute;
    inset: 0%
}

.div-block-24 {
    filter: blur(1px);
    background-image: radial-gradient(circle,#ffffffc4 24%,#fff0 96%);
    justify-content: center;
    align-items: center;
    height: 2px;
    display: flex;
    position: absolute;
    left: -2%;
    right: -2%;
    box-shadow: 0 0 20px 2px #00aeff33
}

.grid-2 {
    grid-column-gap: 55px;
    grid-row-gap: 55px;
    flex-flow: row;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
    display: flex
}

.heading-6 {
    opacity: 1;
    color: #0a2946;
    text-transform: uppercase;
    flex-flow: column;
    flex: 1;
    justify-content: center;
    align-items: flex-start;
    margin-top: 0;
    margin-bottom: 0;
    font-size: min(3.5vw, 62px);
    font-weight: 600;
    display: block
}

.div-block-26 {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background-color: #0000;
    border: 1px solid #2b3e4b61;
    border-radius: 12px;
    flex-flow: row;
    flex: 1;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    transition: all 2.5s;
    display: grid;
    overflow: clip;
    transform: perspective(972px)
}

.text-block-2 {
    color: #45494a;
    text-align: center;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    font-family: Open Sans,sans-serif;
    font-size: min(3vw, 60px);
    font-weight: 400;
    line-height: 1.2;
    display: flex
}

.div-block-27 {
    flex-flow: column;
    flex: 1;
    justify-content: center;
    align-self: stretch;
    align-items: flex-start;
    padding-bottom: 8px;
    display: flex
}

.div-block-28 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    outline-offset: -12px;
    color: #000;
    background-color: #17171700;
    border: 1px #fff;
    border-radius: 14px;
    outline: 1px dashed #fff0;
    flex-flow: row;
    padding: 20px;
    transition: all .5s;
    display: flex;
    position: relative
}

.div-block-28:hover {
    outline-offset: -6px;
    background-color: #ffffff4a;
    outline-color: #186bdf47
}

.paragraph-3 {
    opacity: 1;
    color: #0a2946;
    flex: 1;
    margin-bottom: 0;
    font-size: min(1.5vw, 20px);
    line-height: 1.3
}

.div-block-29 {
    grid-column-gap: 30px;
    grid-row-gap: 12px;
    color: #000;
    flex-flow: column;
    flex: 1;
    justify-content: center;
    align-items: flex-start;
    min-width: 250px;
    max-width: 40%;
    margin-left: auto;
    margin-right: auto;
    display: flex
}

.code-embed-7 {
    opacity: .55;
    flex: 0 auto;
    width: min(8vw,120px)
}

.text-block-3 {
    color: var(--brand-slate);
    text-transform: uppercase;
    flex: 0 auto;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    font-size: min(22px, 2vw);
    font-weight: 600;
    line-height: 1.1;
    display: flex
}

.centre-cont {
    justify-content: center;
    align-items: center;
    width: 0;
    height: 0;
    display: flex;
    position: absolute;
    inset: auto 0% 0% auto
}

.fixd-line-af {
    background-color: #2b3e4b61;
    width: 100%;
    min-width: 100vw;
    height: 1px;
    position: absolute
}

.fixd-line-af.vart-af {
    transform: rotate(90deg)
}

.button {
    background-color: #5082da;
    color: #fff;
    text-transform: uppercase;
    background-image: radial-gradient(circle at 100% 0,#a3e5ff4f,#00d0ff2e);
    border-radius: 50px;
    margin-left: auto;
    padding-left: 35px;
    padding-right: 35px;
    transition: box-shadow .4s,background-color .3s;
    box-shadow: inset -8px -7px 12px #0003,0 2px #0000
}

.button:hover {
    background-color: #1a277096;
    box-shadow: inset -8px -7px 12px #0003,-7px 7px 6px #00000069
}

.div-block-31 {
    flex: 0 auto;
    align-self: stretch
}

.div-block-33 {
    flex-flow: column;
    flex: 1;
    justify-content: center;
    align-items: stretch;
    margin-top: auto;
    display: flex
}

.navbar-brand-2 {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background-color: var(--nav-surface);
    border: 1px solid #ffffff4d;
    border-radius: 55px 25px 25px 55px;
    align-self: center;
    margin: 20px;
    padding: 5px 8px 5px 5px;
    transition: background-color .4s;
    position: absolute;
    inset: 0% auto auto 0%;
    box-shadow: 0 2px 5px #0003
}

.navbar-brand-2:hover {
    background-color: var(--nav-surface)
}

.paragraph-5 {
    opacity: 1;
    margin-bottom: 0;
    font-size: min(16px, 1.1vw);
    line-height: 1.2
}

.div-block-6 {
    z-index: 2;
    background-color: transparent;
    background-image: linear-gradient(90deg,var(--subhero-surface) 69%,transparent);
    flex: 0 auto;
    align-self: center;
    width: 50%;
    margin-top: 2px;
    margin-bottom: 2px;
    position: relative
}

.sub_her_hld_af {
    z-index: 1;
    color: #fff;
    flex-flow: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    min-height: 586px;
    padding: 0 0 0 55px;
    font-weight: 300;
    display: flex
}

.block-quote {
    opacity: .82;
    border-left-style: none;
    margin-bottom: 0;
    padding: 20px 0;
    font-family: Open Sans,sans-serif;
    font-size: min(2.6vw, 2rem);
    font-style: normal;
    font-weight: 300;
    line-height: 1.2
}

.hero_cont-2 {
    justify-content: center;
    align-self: stretch;
    align-items: center;
    width: 100%;
    max-width: none;
    padding: 70px 80px 80px;
    display: flex;
    position: relative
}

.hero_cont-2.adfff {
    justify-content: center;
    align-items: flex-end;
    height: auto;
    min-height: 0;
    padding: 120px 10px 0;
    overflow: clip
}

.hoz_guide {
    background-color: var(--border-col);
    width: 99.9vw;
    height: 1px;
    position: absolute;
    inset: 0% auto auto 50%;
    transform: translate(-50%)
}

.hoz_guide.bottom {
    top: auto;
    bottom: 0
}

.italic-text {
    color: var(--brand-yellow-bright);
    font-size: min(3.5vw, 2.5rem);
    line-height: 1
}

.quote_img {
    z-index: 1;
    width: 120px;
    position: absolute;
    inset: 0% auto auto 0%;
    transform: translate(0,-59%)
}

.div-block-7 {
    --subhero-surface: var(--brand-gray-blue);
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    background-color: var(--subhero-surface);
    grid-template-rows: auto;
    grid-template-columns: .75fr .25fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    align-self: flex-end;
    align-items: flex-end;
    width: 100%;
    max-width: 1400px;
    display: flex;
    position: relative
}

.div-block-39 {
    z-index: 8;
    outline-offset: 0px;
    background-color: #e2e2e224;
    border-radius: 55px;
    outline: 1px solid #fff;
    width: 60px;
    height: 50px;
    margin: 30px;
    position: fixed;
    inset: auto 0% 0% auto
}

.tiled_bg_blur-af {
    z-index: 5;
    -webkit-backdrop-filter: invert(2%) blur(3px);
    backdrop-filter: invert(2%) blur(3px);
    background-color: #ffffff0d;
    border-radius: 20px;
    width: 80vw;
    height: 100vh;
    padding: 38px;
    display: none;
    position: fixed;
    inset: -14% -10% auto auto
}

.grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
    align-self: stretch
}

.grid-3.port-pg {
    grid-template-columns: 1fr 1fr 1fr
}

.image-4 {
    pointer-events: none;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.div-block-40 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 60px;
    position: relative
}

.rich-text-block {
    background-color: var(--bg-base);
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto
}

.paragraph-6 {
    background-color: var(--bg-base);
    font-size: 18px;
    line-height: 1.3
}

.paragraph-6.std-al {
    color: var(--brand-slate);
    font-size: 36px
}

.heading-7 {
    color: #ffffff26;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--brand-slate);
    text-transform: uppercase;
    text-shadow: -3px 4px 1px #8da4aa;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0;
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1
}

.div-block-41 {
    text-align: center;
    align-self: center;
    width: 80%;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 40px;
    padding-bottom: 60px
}

.tag-works {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    color: #484d54;
    white-space: break-spaces;
    mix-blend-mode: color-dodge;
    border-radius: 15px;
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 80%;
    margin: 8px;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    display: flex;
    position: absolute;
    inset: auto auto 0% 0%
}

.text-block-4 {
    border-left: 1px solid #000;
    padding-left: 6px;
    padding-right: 6px;
    display: inline-block
}

.info-tag-af {
    aspect-ratio: 1;
    opacity: .26;
    color: #889296;
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    margin: 8px;
    padding: 8px;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.2;
    display: flex;
    position: absolute;
    inset: 0% 0% auto auto;
    box-shadow: -3px 3px 3px #0000008c
}

.text-block-5 {
    pointer-events: none
}

.image-9 {
    object-fit: cover;
    border-radius: 4px;
    width: 100%;
    max-height: 100%
}

.div-block-50 {
    background-color: #007bff0f;
    padding: 20px;
    position: relative;
    overflow: hidden
}

.link-block-4 {
    color: #fff;
    cursor: pointer;
    margin-top: 140px;
    text-decoration: none;
    display: none
}

.div-block-164 {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    display: flex
}

.image-14 {
    width: 32px;
    height: 32px;
    margin-top: -4px;
    margin-bottom: -4px
}

.text-legal-footer {
    opacity: .69;
    color: #fff;
    flex: 1;
    font-size: 24px;
    font-weight: 200;
    line-height: 130%
}

.div-block-165 {
    grid-column-gap: 22px;
    grid-row-gap: 22px;
    flex-flow: wrap;
    justify-content: center;
    align-self: stretch;
    align-items: center;
    margin-top: 60px;
    display: flex
}

.div-block-54 {
    z-index: 0;
    color: #fff;
    background-color: #093e53;
    background-image: radial-gradient(circle at 50% 35%,#00e1ff00,#fff0);
    border: 1px solid #ffffff78;
    border-radius: 20px;
    position: absolute;
    inset: 0%
}

.footer_section {
    z-index: 11;
    background-color: #111d25;
    background-image: linear-gradient(180deg,var(--ftrbg) 16%,#001f3c00);
    position: relative
}

.image-10 {
    object-fit: contain;
    object-position: 50% 100%;
    position: absolute;
    inset: auto 0% 0%
}

.footer-brand {
    border: 1px solid #143d8c;
    border-radius: 80px 30px 30px 80px;
    margin-bottom: 40px;
    padding: 5px 7px 2px 5px;
    transition: box-shadow .2s;
    box-shadow: 2px -3px 5px #ffffff0f,0 11px 8px #0003
}

.footer-brand:hover {
    box-shadow: 0 0 20px #2a8ae385
}

.link-block-5 {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    color: #fff;
    background-color: #0000003d;
    border: 1px solid #0059ff70;
    border-radius: 8px;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 16px 8px 8px;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
    transition: background-color .325s;
    display: flex
}

.link-block-5:hover {
    background-color: #034b81
}

.link-block-5.non_links {
    color: #ffffffd9;
    background-color: #0000;
    border-style: none;
    font-family: Kanit,sans-serif;
    font-size: 1.2rem;
    font-weight: 300
}

.link-block-5.non_links:hover {
    background-color: #034b8100
}

.div-block-57 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 2fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
    position: relative
}

.rich-text-block-4 {
    text-align: center
}

.code-embed-43 {
    aspect-ratio: 4/1.12;
    filter: drop-shadow(0 0 #d6f2ff00);
    color: #ffffff36;
    justify-content: center;
    align-items: center;
    width: 230px;
    line-height: 100%;
    transition: all .45s;
    display: flex
}

.morning-eve-anm-af {
    pointer-events: none;
    background-image: linear-gradient(#001f3c 8%,#0d182a00);
    height: 100%;
    position: absolute;
    inset: auto 0% 0%
}

.legal-footer {
    z-index: 3;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    flex-flow: wrap;
    justify-content: center;
    align-self: stretch;
    align-items: center;
    margin-top: 80px;
    padding-left: 65px;
    padding-right: 65px;
    font-family: Kanit,sans-serif;
    display: flex;
    position: relative
}

.div-block-169 {
    pointer-events: none;
    position: absolute;
    inset: 0%;
    box-shadow: inset 3px 0 5px 3px #ffffff24
}

.div-block-49 {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background-color: #3e444d33;
    border-radius: 8px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    align-self: center;
    margin-top: 15px;
    padding: 0;
    display: grid;
    box-shadow: inset 0 2px 5px #00aeff33
}

.container {
    z-index: 1;
    flex: 1;
    width: 100%;
    max-width: 1400px;
    margin-bottom: 60px;
    padding: 4rem 2rem;
    position: relative
}

.container.footer_cont {
    color: #fff;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    display: flex
}

.button-3 {
    background-color: #001f3c59;
    border: 1px solid #005f9c;
    border-radius: 7px;
    font-family: Kanit,sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.2;
    transition: box-shadow .2s
}

.button-3:hover {
    background-color: #00000075;
    box-shadow: 0 0 5px 6px #3287ff24
}

.code-embed-44 {
    opacity: .16;
    color: #e6eaee;
    min-height: 50%;
    transition: opacity .3s;
    position: absolute;
    inset: 0% 0% auto
}

.image-15 {
    object-fit: contain;
    max-width: 300px
}

.div-block-51 {
    opacity: .69;
    background-image: radial-gradient(circle,#00aeff,#217edb);
    border-radius: 8px 0 0 8px;
    transition: opacity .5s;
    position: relative;
    overflow: clip
}

.div-block-51:hover {
    opacity: .9
}

.div-block-156 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: wrap;
    flex: 0 auto;
    justify-content: center;
    align-self: center;
    align-items: center;
    display: flex
}

.ssm_btn-2 {
    color: #364652;
    background-color: #0d182ab3;
    border: 1px solid #215085;
    border-radius: 59px 24px 47px 59px;
    padding: 6px 16px 6px 6px;
    transition: all .45s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 5px #0003
}

.ssm_btn-2:hover {
    color: #fff;
    background-color: #13243b;
    box-shadow: 0 0 19px #ffffff38
}

.div-block-56 {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 25px 15px;
    display: flex;
    position: relative
}

.l_ht_b {
    font-family: Kanit,sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1
}

.image-11 {
    object-fit: contain;
    object-position: 50% 50%;
    background-color: #fff;
    border-radius: 12px;
    max-width: 200px;
    padding: 3px 14px
}

.code-embed-4 {
    filter: invert();
    mix-blend-mode: luminosity;
    height: calc(100% + 15px);
    margin-bottom: -18px;
    margin-left: -10px;
    position: relative
}

.text-block-53 {
    color: #4187ce;
    font-weight: 200
}

.div-block-55 {
    position: relative
}

.heading-8 {
    font-size: 2rem
}

.paragraph-7 {
    font-size: 1.1rem;
    line-height: 1.2
}

.image-16 {
    max-width: 200px
}

.code-embed-45 {
    z-index: 5;
    height: 60px;
    color: var(--ftrbg);
    margin-bottom: -4px;
    margin-left: -2px;
    margin-right: -2px;
    position: relative
}

.div-block-170 {
    z-index: 1;
    background-image: linear-gradient(180deg,var(--bg-base) 3%,#d1dcdf00);
    height: 50px;
    position: absolute;
    inset: -2px 0% auto
}

.special_btn {
    pointer-events: auto;
    color: #fff;
    flex: 0 auto;
    align-self: center;
    margin-top: 15px;
    padding: 8px;
    font-size: 22px;
    line-height: 135%;
    text-decoration: none;
    position: relative
}

.special_btn:hover {
    opacity: 1
}

.special_btn.lal {
    justify-content: center;
    align-self: stretch;
    align-items: center;
    display: flex
}

.special_btn.slbtn {
    color: var(--text-on-dark);
    flex: 0 auto;
    justify-content: center;
    align-self: stretch;
    align-items: center;
    margin-top: 0;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
    top: -4%
}

.btn_overlay {
    opacity: .15;
    border: 4px solid #fffc;
    border-color: #fffc #fffc #000 #000;
    border-radius: 80px;
    position: absolute;
    inset: 0%
}

.btn_overlay.high_pros {
    z-index: 0;
    opacity: .43;
    filter: blur(2px);
    pointer-events: none;
    border-style: solid;
    border-color: #fff0;
    border-radius: 31px;
    transition: opacity .15s ease-in-out;
    box-shadow: -7px 12px 18px #304f6345,8px -6px 15px #fff
}

.btn_overlay.high_pros.dark {
    z-index: -1;
    border-radius: 48px;
    box-shadow: -7px 12px 18px #00000075,8px -6px 15px #ffffff30
}

.btn_overlay.high_pros.dark.review-blurr {
    box-shadow: -7px 12px 18px #00000075,8px -6px 15px #ffffffa3
}

.btn_overlay.high_pros.dark.cor-bvl {
    opacity: .63;
    background-color: var(--carousel-surface)
}

.btn_overlay.high_pros.dark.in-clr-af {
    box-shadow: -7px 12px 18px #20445a96,8px -6px 15px #ffffffdb
}

.text-block-65 {
    color: #556071;
    background-color: #d1dcdf;
    border: 1px solid #5f93b85c;
    border-radius: 35px;
    padding: 12px 30px;
    font-size: 36px;
    font-weight: 600;
    line-height: 130%
}

.div-block-173 {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    justify-content: center;
    align-items: center;
    display: flex
}

.div-block-173.ral-af {
    text-align: left;
    justify-content: flex-end;
    align-items: center
}

.div-block-173.lal-af {
    justify-content: flex-start;
    align-items: center
}

.nav-holder {
    z-index: 9;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    max-width: 1600px;
    height: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    display: flex;
    position: fixed;
    inset: 0% 0% auto
}

.bold-text {
    color: #176ade;
    font-weight: 600
}

.text-span {
    color: #646f7f;
    font-size: min(3.5vw, 62px);
    display: inline
}

.menu {
    z-index: 99;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    background-color: var(--nav-surface);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: #d6d6d6;
    border: 1px solid #ffffff4d;
    border-radius: 12px;
    justify-content: flex-start;
    align-items: center;
    margin: 20px;
    padding: 8px 12px;
    display: flex;
    position: absolute;
    inset: 0% 0% auto auto;
    box-shadow: 0 2px 5px #0003
}

.menu:hover {
    color: #d6d6d6;
    background-color: var(--nav-surface)
}

.bar01 {
    background-color: #fff;
    border-radius: 16px;
    width: 50px;
    height: 2px
}

.ic-bars {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 14px;
    display: flex
}

.m-txt {
    font-weight: 600
}

.section {
    background-color: var(--brand-gray-blue);
    min-height: 200px;
    padding-top: 100px;
    padding-bottom: 60px;
    position: relative
}

.heading-12 {
    color: var(--bg-hero);
    text-align: center;
    text-transform: uppercase;
    align-self: center
}

.text-block-66 {
    color: var(--bg-hero);
    text-align: center;
    letter-spacing: 1.2rem;
    /* Balance the trailing letter spacing so the visible letters are centered. */
    padding-inline-start: 1.2rem;
    text-transform: uppercase;
    align-self: center
}

.rich-text-block-6 {
    padding-bottom: 20px;
    padding-left: 4px
}

.heading-13 {
    color: var(--brand-slate);
    text-transform: uppercase;
    font-weight: 300
}

.div-block-175 {
    z-index: 8;
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
    background-color: #d1dcdfb5;
    border-bottom: 1px solid #00000024;
    border-radius: 0 0 18px 18px;
    height: 58%;
    max-height: 550px;
    margin: 0 10px 10px;
    padding: 80px 20px 60px;
    display: none;
    position: fixed;
    inset: 0% 0% auto;
    overflow: clip;
    box-shadow: 0 16px 20px #4ab1e245
}

.div-block-176 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    border-radius: 20px;
    grid-template-rows: auto;
    grid-template-columns: 1fr .5fr;
    grid-auto-columns: 1fr;
    margin-top: 20px;
    padding: 20px;
    display: grid;
    box-shadow: inset -5px 5px 4px #4f96d033,inset 4px -2px 5px #ffffff30
}

.link-block-7 {
    color: #343e46;
    text-align: left;
    text-transform: uppercase;
    border-radius: 4px;
    padding-top: 6px;
    padding-bottom: 6px;
    text-decoration: none
}

.link-block-7:hover {
    color: #4392c2;
    background-color: #ffffff47
}

.div-block-177 {
    flex-flow: column;
    display: flex
}

.text-span-2 {
    color: #3c90a7
}

.text-block-67 {
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.2
}

.text-span-3 {
    vertical-align: top;
    font-size: 1.4rem
}

.div-block-178 {
    justify-content: space-between;
    display: flex
}

.div-block-179 {
    flex: 1;
    width: 400px
}

.text-block-68 {
    color: #2f6ca5
}

.div-block-180 {
    border-right: 3px solid #306ca547;
    flex-flow: column;
    display: flex
}

.text-block-69 {
    font-size: 2rem;
    line-height: 1.3
}

.div-block-182 {
    flex-flow: column;
    flex: 1;
    align-self: flex-start;
    display: flex
}

.code-embed-46 {
    background-color: #ededed;
    display: none;
    position: absolute;
    inset: 0% 0% -3%
}

.stk-wv {
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    height: 0;
    display: none;
    position: sticky;
    top: 0
}

.code-embed-47 {
    width: 100%;
    height: 100vh;
    position: absolute;
    inset: 0% 0% auto
}

.div-block-183 {
    z-index: -1;
    background-image: linear-gradient(90deg,var(--bg-hero) 53%,#fff0);
    opacity: .7;
    width: 100%;
    display: flex;
    position: absolute;
    inset: -11% 50% -10% auto
}

.image-19 {
    aspect-ratio: 4/3.2;
    object-fit: cover;
    object-position: 50% 0%;
    align-self: stretch;
    width: 100%;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    position: relative
}

.div-block-185 {
    aspect-ratio: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0%
}

.blr-bx {
    aspect-ratio: 1;
    filter: blur(11px);
    border-radius: 50% 50% 0 0;
    width: 70%;
    position: absolute;
    box-shadow: 15px -12px 5px #dcf7ff5c,-8px 6px 5px #0003
}

.blr-bx._2nd-bl {
    width: calc(100% - 60px)
}

.paragraph-8 {
    font-size: 24px;
    line-height: 1.2
}

.rich-text-block-8 {
    text-align: center;
    border-radius: 20px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 26px 60px;
    position: relative
}

.div-block-187 {
    background-color: #d1dcdf;
    border: 1px solid #b9d1e2;
    border-radius: 6px 6px 6px 50px;
    flex-flow: column;
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 60px 60px 40px;
    display: flex
}

.paragraph-9 {
    font-size: 18px;
    line-height: 1.3
}

.image-20 {
    width: 200px;
    margin-left: auto
}

.div-block-188 {
    flex-flow: column;
    justify-content: center;
    align-self: flex-end;
    align-items: center;
    margin-top: 40px;
    display: flex
}

.bold-text-2 {
    color: #8a6e40;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3
}

.div-block-189 {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: relative
}

.div-block-190 {
    background-color: #0000;
    background-image: linear-gradient(#d1dcdf00 13%,#d1dcdf 41% 94%,#d1dcdf00);
    height: 100%;
    position: absolute;
    inset: auto -8% -30%
}

.body {
    background-color: var(--bg-base);
    overflow-x: clip
}

.heading-14 {
    color: #3e4f5f;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 40px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1
}

.heading-14.h-3-af {
    margin-bottom: 20px
}

.section-2 {
    padding-bottom: 100px
}

.sec-crop-60 {
    flex-flow: column;
    padding-left: 60px;
    padding-right: 60px;
    display: flex;
    position: relative
}

.sec-crop-60.top-serv-af {
    justify-content: flex-end;
    align-items: center;
    min-height: 400vh;
    padding-left: 0;
    padding-right: 0
}

.div-block-191 {
    z-index: 2;
    flex-flow: column;
    justify-content: flex-start;
    align-self: flex-start;
    align-items: center;
    width: 50px;
    height: 100%;
    display: flex;
    position: absolute;
    inset: 0% auto 0% 0%
}

.heading-15 {
    color: #ffffff30;
    text-transform: uppercase;
    text-shadow: 0 4px 3px #507f8861;
    justify-content: center;
    align-items: flex-start;
    width: 70vh;
    min-width: 70vh;
    height: 50px;
    margin-top: 30vh;
    margin-bottom: 30vh;
    font-size: min(10vh, 4.5vw);
    font-weight: 700;
    line-height: 1;
    display: flex;
    position: sticky;
    top: 50%;
    transform: rotate(-90deg)
}

.devider {
    z-index: 3;
    background-image: linear-gradient(180deg,var(--bg-base),#d1dcdf00);
    height: 60px;
    position: absolute;
    inset: 0% 0% auto
}

.devider.btm-af {
    background-image: linear-gradient(360deg,var(--bg-base),#d1dcdf00);
    inset: auto 0% 0%
}

.heading-16 {
    background-color: var(--bg-base);
    color: var(--brand-slate);
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 20px;
    margin-left: 0;
    font-size: 65px;
    font-weight: 300;
    line-height: 1.1
}

.heading-16.darkbg-af {
    color: var(--text-on-dark-muted);
    background-color: #d1dcdf00
}

.heading-16.no-bg-hrd {
    background-color: #d1dcdf00
}

.grid-4 {
    color: #304f6b;
    border-radius: 12px;
    grid-template-rows: auto;
    grid-template-columns: 1fr .75fr;
    padding: 30px;
    position: relative
}

.grid-4._2nd_light {
    color: #fff;
    grid-template-columns: 1fr 1fr
}

.div-block-193 {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 40px 0 0;
    display: flex
}

.div-block-193._2nd-rtf-c {
    padding: 60px
}

.heading-17 {
    opacity: 1;
    color: var(--brand-slate);
    text-transform: uppercase;
    text-shadow: none;
    margin-top: 10px;
    margin-bottom: 40px;
    font-size: min(80px, 5vw);
    font-weight: 300;
    line-height: 1
}

.paragraph-11 {
    opacity: 1;
    color: #334d66;
    text-shadow: none;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2
}

.paragraph-11._2nd-light {
    color: #fff;
    margin-top: 0;
    font-size: 18px
}

.rich-text-block-9 {
    max-width: 560px;
    margin-bottom: 40px;
    background-color: #d1dcdf
}

.div-block-194 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-self: stretch;
    display: grid;
    margin: 0 auto
}

.div-block-195 {
    flex-flow: column;
    flex: 1;
    justify-content: center;
    align-items: flex-start;
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex
}

.div-block-196 {
    box-shadow: 0 0 5px 5px var(--bg-base),inset 0 0 10px 0 #01aeff40;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    outline-color: var(--base-clr);
    outline-offset: 0px;
    border-radius: 8px;
    outline-width: 1px;
    outline-style: solid;
    flex-flow: column;
    justify-content: space-around;
    align-items: flex-start;
    padding: 18px;
    display: flex
}

.heading-18 {
    opacity: .8;
    color: #5a8599;
    text-transform: uppercase;
    align-self: flex-end;
    margin-bottom: -10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2
}

.paragraph-12 {
    opacity: .75;
    font-size: 18px;
    line-height: 1.3
}

.div-block-197 {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: row;
    grid-template-rows: auto;
    grid-template-columns: 1.25fr 1fr;
    grid-auto-columns: 1fr;
    align-self: stretch;
    margin-bottom: 60px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex
}

.div-block-198 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    background-color: #0000;
    border-radius: 20px;
    flex-flow: wrap;
    justify-content: space-between;
    align-self: center;
    align-items: center;
    padding: 12px;
    display: flex;
    position: relative
}

.image-21 {
    align-self: center;
    width: 45px
}

.stars {
    background-image: url('../images/Star-1.svg');
    background-position: 0;
    background-repeat: repeat-x;
    background-size: 40px 54%;
    width: 200px;
    height: 35px
}

.div-block-200 {
    z-index: -1;
    background-color: #b4c5ca;
    border-radius: 20px;
    position: absolute;
    inset: 27px
}

.div-block-200._2nd-itr {
    background-color: #516877
}

.div-block-201 {
    flex-flow: row;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative
}

.embd-glb {
    aspect-ratio: 5/6;
    color: #199edf63;
    align-self: flex-start;
    min-width: 300px;
    margin-top: -40px;
    margin-bottom: -40px;
    position: sticky;
    top: 110px;
    height: calc(100vh - 220px);
    max-height: 800px
}

.div-block-202 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
    display: flex
}

.text-block-70 {
    opacity: .7;
    flex: 1;
    justify-content: center;
    align-items: center;
    font-style: italic;
    display: flex
}

.link-block-8 {
    color: #0a2946;
    border-radius: 20px;
    min-width: 320px;
    font-size: 1rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .2s
}

.link-block-8:hover {
    opacity: 1;
    background-color: #9eabdb29
}

.scroll-progress-af {
    background-color: var(--bg-base);
    outline-offset: 0px;
    border: 1px solid #d1dcdf;
    border-radius: 20px;
    outline: .01rem solid #b1c5d6;
    width: 50vh;
    min-width: 50vh;
    max-width: 400px;
    height: 20px;
    margin-top: 20px;
    margin-bottom: 40px;
    padding: 4px;
    display: flex;
    box-shadow: 0 5px 18px rgb(173 230 252 / 0.32000000)
}

.indicator-af {
    background-color: var(--service-progress);
    border-radius: 8px;
    width: 10%;
    height: 100%;
    position: relative
}

.paragraph-13 {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2
}

.cor-img-holder {
    aspect-ratio: 1;
    pointer-events: none;
    width: 90vw;
    max-width: 1100px;
    height: 100vh;
    max-height: 1100px;
    transform-style: preserve-3d;
    background-image: none;
    flex: 0 auto;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate3d(-50%,-60%,-300px)
}

.div-block-205 {
    justify-content: center;
    align-items: center;
    width: 0;
    height: 0;
    margin-top: 50px;
    margin-bottom: 30px;
    display: flex;
    position: absolute;
    inset: auto 0% 40px 50%;
    transform: translate(-50%)
}

.image-25 {
    object-fit: contain;
    width: 100%;
    height: 100%
}

.image-26 {
    z-index: -2;
    opacity: .82;
    pointer-events: none;
    position: absolute;
    inset: 50% 0% auto;
    transform: translate(0,-50%)
}

.paragraph-14 {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    font-size: 24px;
    line-height: 1.2
}

.div-block-206 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    padding-top: 60px;
    padding-bottom: 60px;
    display: grid
}

.heading-19 {
    color: var(--brand-slate);
    text-transform: uppercase;
    line-height: 1
}

.div-block-208 {
    background-image: linear-gradient(90deg,#d1dcdfa6 46%,#d1dcdf00);
    width: 90px;
    position: absolute;
    inset: 0% auto 0% 0%
}

.div-block-209 {
    flex: 1;
    align-self: stretch;
    width: 100%;
    position: relative
}

.div-block-210 {
    text-align: center;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    display: flex
}

.text-span-4 {
    color: #62748f;
    text-transform: none;
    padding-top: 17px;
    padding-bottom: 17px;
    font-size: 36px;
    font-weight: 300;
    line-height: 1.1;
    display: block
}

.review-thumb {
    outline-offset: -1px;
    border-radius: 8px;
    outline: 2px solid #fff;
    margin-top: 20px;
    margin-bottom: 10px;
    transition: all .2s;
    box-shadow: -4px 8px 5px #1581b42b
}

.review-thumb:hover {
    box-shadow: 9px -9px 0 0 var(--brand-slate)
}

.text-block-71 {
    text-align: center;
    white-space: break-spaces;
    align-self: center;
    font-size: 18px;
    line-height: 128%
}

.rich-text-block-11 {
    padding: 0
}

.div-block-211 {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    align-self: stretch
}

.div-block-212 {
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative
}

.image-27 {
    aspect-ratio: 1;
    object-fit: contain;
    flex: 1;
    align-self: flex-start;
    max-width: 110%;
    margin-top: -116px;
    margin-bottom: -116px;
    position: sticky;
    top: 20%
}

.div-block-213 {
    align-self: flex-start
}

.text-block-72 {
    color: #313e48;
    text-transform: none;
    background-color: #d1dcdf;
    border-radius: 60px;
    padding: 14px 20px;
    font-size: 24px;
    font-weight: 400;
    line-height: 120%
}

.text-span-5 {
    color: var(--text-on-dark-muted);
    font-weight: 600
}

.heading-20 {
    color: var(--brand-blue-pale);
    letter-spacing: 1px;
    align-self: flex-start;
    width: 58%;
    margin-bottom: 0;
    font-size: min(1.2vw, .8rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1;
    margin: 0 2px
}

.heading-21 {
    color: #3a5470;
    margin-top: 30px;
    margin-bottom: 60px;
    font-size: 1.8rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.2
}

.div-block-214 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 40px;
    display: flex
}

._3sec-grdss {
    outline-offset: -7px;
    color: #0a2946;
    text-align: center;
    background-color: #d1dcdf8c;
    border-radius: 14px;
    outline: 1px solid #ffffff73;
    flex-flow: column;
    flex: 1;
    justify-content: space-around;
    align-items: center;
    padding: 40px 20px;
    transition: all .5s;
    display: flex;
    box-shadow: -3px 3px 5px #e0f7ff7d,2px -3px 15px #0528471f
}

._3sec-grdss:hover {
    outline-offset: -7px;
    outline: 3px dashed #6db0ee
}

.paragraph-15 {
    margin-bottom: 0;
    font-size: 20px;
    line-height: 1.3
}

.heading-22 {
    color: var(--brand-slate);
    text-transform: uppercase;
    margin-top: 0;
    margin-left: 0;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.3
}

.div-block-215 {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    padding: 0 60px
}

.heading-23 {
    color: #fff;
    text-transform: uppercase;
    text-shadow: -2px 2px 2px #00000017;
    margin-top: 60px;
    margin-bottom: 10px;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2
}

.div-block-216 {
    flex: 1;
    justify-content: center;
    align-self: stretch;
    align-items: center;
    margin: -120px -125px -120px -34px;
    display: flex;
    position: relative;
    transform: rotate(-12deg)
}

.image-28 {
    aspect-ratio: 1;
    object-fit: contain
}

.star-hldr {
    width: 70%;
    height: 100%;
    position: absolute;
    inset: 0% 0% 0% auto;
    overflow: clip
}

.bold-text-3 {
    color: var(--brand-blue-pale);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--text-outline);
    text-shadow: -5px 5px var(--brand-blue-pale);
    font-size: min(120px, 6vw)
}

.heading-24 {
    color: #fff;
    margin-top: 40px;
    margin-left: 0;
    font-size: 20px;
    font-weight: 400
}

.paragraph-16 {
    color: #b6c0c5;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.3
}

.section-3 {
    padding-left: 20px;
    padding-right: 20px
}

.container-2 {
    background-color: var(--bg-base);
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    max-width: 1600px;
    padding: 64px 34px 34px;
    box-shadow: 0 3px 5px #4788b629
}

.hholder-cnt-nav {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1.5fr 1fr;
    grid-auto-columns: 1fr;
    display: flex;
    position: relative
}

.div-block-217 {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    padding: 18px 0 18px 18px;
    display: flex
}

.link-block-10 {
    color: var(--ftrbg);
    text-transform: uppercase;
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 1.5rem;
    font-weight: 300;
    text-decoration: none;
    transition: all .2s;
    display: flex;
    box-shadow: 0 0 #0000
}

.link-block-10:hover {
    color: var(--brand-slate);
    background-image: radial-gradient(circle at 0 100%,#d1dcdf00 61%,#ffffff4a);
    box-shadow: -4px 3px 4px #51667c2e
}

.link-block-10.w--current {
    background-color: #fff3
}

.link-block-10.inner-no-pad {
    padding: 0
}

.link-block-10.inner-no-pad:hover {
    box-shadow: none;
    background-image: none
}

.link-block-10.actv-link-dd {
    background-color: #bcd2d8;
    margin-left: -20px;
    padding-right: 32px
}

.link-block-10.actv-link-dd:hover {
    box-shadow: none;
    background-image: none
}

.image-29 {
    background-image: linear-gradient(90deg,var(--bg-base) 48%,#d1dcdf00);
    opacity: .29;
    width: 2rem;
    transform-style: preserve-3d;
    order: -9999;
    align-self: stretch;
    margin-top: -6px;
    margin-bottom: -6px;
    margin-left: -2rem;
    padding-top: 1px;
    padding-right: .8rem
}

.div-block-218 {
    z-index: -1;
    filter: blur(2px);
    pointer-events: none;
    border-radius: 20px;
    flex: 1;
    justify-content: center;
    align-items: stretch;
    position: absolute;
    inset: -1%;
    box-shadow: inset -2px 2px 5px #10447533,inset 2px -1px 9px #ffffffad
}

.div-block-219 {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-flow: column;
    flex: 1;
    justify-content: center;
    align-self: stretch;
    align-items: flex-start;
    min-width: 280px;
    max-width: 333px;
    padding: 0;
    display: flex
}

.div-block-220 {
    z-index: 1;
    pointer-events: none;
    flex: 1;
    margin-left: 20px;
    padding: 18px;
    position: relative
}

.text-block-73 {
    letter-spacing: 4px;
    flex: 1;
    justify-content: center;
    align-items: flex-end;
    font-size: 12px;
    line-height: 1.2;
    display: flex
}

.text-block-74 {
    color: #7487a0;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.2
}

.text-block-75 {
    font-size: min(90px, 7vw);
    font-weight: 500;
    line-height: 1;
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease
}

.div-block-221 {
    filter: blur(2px);
    color: var(--bg-hero);
    -webkit-text-stroke-width: 0px;
    text-shadow: 2px -2px 1px #ffffff7a,-2px 2px #455c708a;
    flex: 1;
    justify-content: space-between;
    align-self: stretch;
    align-items: center;
    font-family: Oswald,sans-serif;
    font-weight: 700;
    display: flex
}

.text-block-76 {
    text-align: center;
    letter-spacing: 4px;
    text-transform: uppercase;
    align-self: center;
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
    position: relative;
    top: -8%
}

.text-block-77 {
    font-size: min(6vw, 70px);
    font-weight: 400;
    line-height: 1
}

.div-block-222 {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    outline-offset: 0px;
    border-radius: 13px;
    outline: 1px dashed #fff6;
    flex: 1;
    justify-content: flex-start;
    align-self: stretch;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    padding: 0 20px;
    display: flex
}

.link-block-11 {
    z-index: 1;
    aspect-ratio: 1;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    padding: 12px;
    display: flex;
    position: relative
}

.link-block-11:hover {
    background-color: #79baff5e;
    border-radius: 40px
}

.image-30 {
    aspect-ratio: 1;
    opacity: .65;
    width: 100%;
    height: 100%
}

.text-block-78 {
    flex: 1;
    max-width: 298px;
    font-size: min(16px, 1.2vw);
    line-height: 1.2
}

.inner-links-cont {
    z-index: 1;
    grid-column-gap: 14px;
    grid-row-gap: 10px;
    background-color: var(--bg-base);
    border-radius: 20px;
    flex-flow: column;
    justify-content: flex-start;
    align-self: stretch;
    align-items: flex-start;
    height: 100%;
    padding: 20px;
    display: flex;
    position: absolute;
    inset: 0 212px auto min(31vw,430px)
}

.link-block-12 {
    color: #224155b8;
    text-transform: none;
    background-color: #0000;
    border: 1px solid #0000001a;
    border-radius: 10px;
    flex: 1;
    justify-content: flex-start;
    align-self: stretch;
    align-items: center;
    min-width: 40%;
    margin: 3px;
    padding: 8px 12px;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .3s,color .3s;
    display: flex;
    box-shadow: -2px 4px 5px #426e9214
}

.link-block-12:hover {
    color: var(--brand-slate);
    background-color: #ffffff61
}

.div-block-223 {
    flex-flow: wrap;
    flex: 1 auto;
    width: 100%;
    display: flex
}

.link {
    text-transform: none;
    border-radius: 10px;
    margin-left: auto;
    text-decoration: none
}

.link:hover {
    background-color: #ffffff2e
}

.link.sm {
    text-align: left;
    border-radius: 10px;
    flex: 0 auto;
    align-self: flex-start;
    width: 100%;
    padding: 0 12px;
    font-size: 1.5rem
}

.link.sm:hover {
    background-color: #ffffff36
}

.div-block-224 {
    flex-flow: column;
    flex: 1;
    justify-content: space-around;
    padding: 12px;
    display: flex
}

.div-block-225 {
    z-index: -1;
    box-shadow: inset -2px 0 60px 90px var(--bg-base);
    opacity: .06;
    background-image: url('../images/source-select-1-df76d1c0.avif');
    background-position: 50%;
    background-size: 381px;
    position: absolute;
    inset: 0%
}

@media screen and (max-width: 991px) {
    h1 {
        font-size:4.2rem;
        line-height: 1
    }

    h2 {
        font-size: 3rem;
        line-height: 1.3
    }

    .hero_cont {
        padding: 0 50px 40px
    }

    .hero_cont.service-holder-af.af-3d {
        min-height: auto;
        padding: 100px 60px;
        position: relative;
        top: auto
    }

    .hero_cont.sub-sec-af {
        padding-left: 60px;
        padding-right: 60px
    }

    .black_a {
        min-height: calc(min(100dvh,120vw) + 50px)
    }

    .div-block-11 {
        justify-content: space-between;
        align-items: flex-start
    }

    .div-block-13 {
        justify-content: center;
        align-items: flex-start
    }

    .service-carousel {
        grid-column-gap: 15px;
        grid-row-gap: 15px;
        aspect-ratio: auto;
        flex-flow: wrap;
        max-width: 100%
    }

    .service-carousel.af-r {
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        aspect-ratio: auto;
        flex-flow: wrap;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr 1fr;
        grid-auto-columns: 1fr;
        justify-content: flex-start;
        align-items: center;
        margin-top: 0;
        margin-bottom: auto;
        padding-left: 60px;
        padding-right: 60px;
        display: flex;
        top: auto;
        overflow: visible
    }

    .af-c {
        color: var(--text-on-dark);
        border-radius: 20px;
        flex-flow: column;
        flex: 1;
        justify-content: center;
        align-self: stretch;
        align-items: center;
        min-width: 300px;
        max-width: none;
        max-height: 500px;
        padding: 48px 40px;
        position: relative
    }

    .div-block-17 {
        grid-column-gap: 30px;
        grid-row-gap: 30px;
        text-align: center;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        margin-right: -4px;
        top: auto;
        transform: none
    }

    .heading-5 {
        color: var(--text-on-dark);
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        font-size: 24px;
        font-weight: 400;
        line-height: 1.2
    }

    .code-embed-5 {
        height: 40px
    }

    .grid-2 {
        grid-column-gap: 60px;
        grid-row-gap: 60px;
        text-align: center;
        flex-flow: wrap;
        grid-template-columns: 1.25fr;
        align-self: center;
        margin-top: 20px;
        margin-bottom: 60px
    }

    .heading-6 {
        max-width: 550px;
        margin-bottom: 20px;
        padding-top: 40px;
        font-size: 56px;
        line-height: .9
    }

    .div-block-26 {
        flex: 0 auto;
        max-width: 90%
    }

    .text-block-2 {
        text-align: left;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 0;
        font-size: 42px;
        line-height: 1.1
    }

    .div-block-27 {
        justify-content: center;
        align-items: center;
        margin-top: 20px
    }

    .div-block-28 {
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        text-align: center;
        flex-flow: row;
        justify-content: center;
        align-items: center;
        min-width: auto;
        padding: 39px 30px 39px 20px
    }

    .paragraph-3 {
        max-width: 550px;
        margin-left: auto;
        margin-right: auto;
        font-size: 18px;
        line-height: 1.2
    }

    .div-block-29 {
        grid-column-gap: 12px;
        grid-row-gap: 12px;
        justify-content: center;
        align-items: center;
        min-width: auto;
        max-width: none;
        padding-left: 70px;
        padding-right: 70px
    }

    .code-embed-7 {
        aspect-ratio: 16/9;
        order: -9999;
        width: 90px;
        height: 100%;
        margin-bottom: 0
    }

    .text-block-3 {
        font-size: 18px;
        line-height: 1.2
    }

    .button {
        margin-top: 20px;
        margin-left: 0
    }

    .div-block-31 {
        flex: 0 auto;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: -24px;
        padding-bottom: 10px;
        display: flex
    }

    .div-block-33 {
        text-align: left;
        flex-flow: column;
        justify-content: center;
        align-items: flex-start
    }

    .paragraph-5 {
        margin-bottom: 10px;
        font-size: 14px
    }

    .div-block-6 {
        background-color: transparent;
        background-image: linear-gradient(90deg,var(--subhero-surface) 49%,transparent);
        width: auto;
        max-width: 60%
    }

    .sub_her_hld_af {
        min-height: auto;
        padding-top: 60px;
        padding-bottom: 60px
    }

    .hero_cont-2.adfff {
        padding-top: 60px
    }

    .grid-3 {
        grid-template-columns: 1fr 1fr 1fr;
        padding: 0 30px
    }

    .div-block-40 {
        padding-bottom: 20px;
        padding-left: 40px;
        padding-right: 40px;
        bottom: auto
    }

    .rich-text-block {
        text-align: left;
        width: auto;
        padding-top: 20px
    }

    .paragraph-6.std-al {
        text-align: center;
        font-size: 20px
    }

    .heading-7 {
        margin-top: 40px
    }

    .div-block-41 {
        width: auto;
        padding-top: 20px;
        padding-bottom: 60px
    }

    .div-block-164 {
        justify-content: center;
        align-items: center
    }

    .div-block-54 {
        z-index: -1;
        background-color: #a3d9dd;
        top: 0;
        left: 0;
        right: 0
    }

    .footer-brand {
        /* max-width:50%; */
        margin-top: 20px;
        margin-bottom: 40px;
        padding: 5px 12px 4px 4px;
    }

    .div-block-57 {
        grid-column-gap: 80px;
        grid-row-gap: 20px;
        grid-template-columns: 1fr 1fr
    }

    .legal-footer {
        grid-column-gap: 35px;
        grid-row-gap: 35px;
        flex-flow: wrap;
        justify-content: center;
        align-items: center;
        margin-bottom: 60px
    }

    .div-block-169 {
        box-shadow: inset 3px 4px 4px #ffffff24
    }

    .div-block-49 {
        grid-template-columns: 1fr 1fr
    }

    .container {
        flex: 0 auto
    }

    .container.footer_cont {
        padding-left: 3rem;
        padding-right: 3rem
    }

    .image-15 {
        max-width: 250px
    }

    .div-block-156 {
        grid-column-gap: 22px;
        grid-row-gap: 22px;
        flex: 1;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .ssm_btn-2 {
        color: #bdbdbd;
        background-color: #00000082
    }

    .div-block-56 {
        margin-top: 0;
        padding-top: 35px;
        padding-left: 24px;
        padding-right: 24px
    }

    .image-11 {
        max-width: 200px
    }

    .div-block-55 {
        justify-content: center;
        align-items: center;
        max-width: 300px;
        display: flex
    }

    .code-embed-45 {
        height: 35px
    }

    .special_btn {
        order: 1
    }

    .special_btn.slbtn {
        justify-content: flex-start;
        align-self: center;
        align-items: center;
        margin-top: auto;
        padding-top: 16px;
        padding-bottom: 16px;
        top: auto
    }

    .btn_overlay.high_pros {
        opacity: 1
    }

    .btn_overlay.high_pros.dark.review-blurr {
        box-shadow: none;
        filter: none;
        outline-offset: 0px;
        outline: 3px solid #0a29461f;
        transition: none
    }

    .text-block-65 {
        font-size: 20px
    }

    .div-block-173 {
        text-align: right
    }

    .div-block-173.ral-af {
        justify-content: flex-start;
        align-items: center
    }

    .nav-holder {
        z-index: 99
    }

    .text-span {
        font-size: 56px;
        font-weight: 600;
        line-height: .9
    }

    .heading-14 {
        margin-top: 10px;
        margin-bottom: 20px
    }

    .sec-crop-60 {
        padding-left: 0;
        padding-right: 0
    }

    .sec-crop-60.top-serv-af {
        min-height: auto
    }

    .heading-15 {
        margin-left: -12px;
        font-size: 60px;
        line-height: 1
    }

    .heading-16 {
        font-size: 42px;
        font-weight: 400
    }

    .grid-4 {
        flex-flow: column;
        display: flex;
        position: relative;
        margin: 0 auto
    }

    .grid-4._2nd_light {
        flex-flow: column;
        margin-top: 100px
    }

    .div-block-193 {
        z-index: 1;
        flex: 1;
        padding: 24px;
        position: relative
    }

    .div-block-193._2nd-rtf-c {
        justify-content: center;
        align-items: flex-end;
        padding: 10px 40px 40px
    }

    .heading-17 {
        margin-bottom: 20px;
        font-size: 48px
    }

    .paragraph-11 {
        margin-bottom: 20px;
        font-size: 16px
    }

    .paragraph-11._2nd-light {
        font-size: 18px
    }

    .div-block-194 {
        grid-template-columns: 1fr 1fr;
        margin-left: 40px;
        margin-right: 40px
    }

    .div-block-196 {
        padding: 30px 20px 20px
    }

    .heading-18 {
        margin-top: 0;
        margin-bottom: 0
    }

    .div-block-197 {
        grid-column-gap: 12px;
        grid-row-gap: 12px;
        flex-flow: row;
        justify-content: center;
        align-items: flex-end;
        margin-top: 40px;
        padding-left: 40px;
        padding-right: 40px
    }

    .div-block-198 {
        padding: 8px 12px 8px 10px
    }

    .image-21 {
        width: 40px
    }

    .div-block-201 {
        flex: 0 auto;
        order: -9999;
        justify-content: center;
        align-self: stretch;
        align-items: center;
        display: flex
    }

    .embd-glb {
        position: relative;
        top: auto
    }

    .text-block-70 {
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px
    }

    .link-block-8 {
        margin-left: -16px;
        margin-right: -16px;
        padding: 12px
    }

    .paragraph-13 {
        margin-bottom: 0;
        font-size: 18px
    }

    .cor-img-holder {
        flex: 0 auto;
        justify-content: center;
        align-items: center;
        width: 100%;
        display: none;
        top: 80%
    }

    .div-block-205,.div-block-208,.image-26 {
        display: none
    }

    .div-block-209 {
        flex: 0 auto;
        height: auto
    }

    .review-thumb {
        pointer-events: auto;
        margin-top: 10px
    }

    .rich-text-block-11 {
        align-self: stretch;
        padding: 0
    }

    .div-block-211 {
        background-color: #ce9b2e00;
        padding: 0
    }

    .div-block-212 {
        aspect-ratio: 3/2;
        flex: 1;
        order: -9999;
        display: block
    }

    .image-27 {
        max-width: 100%;
        margin-top: -220px;
        margin-bottom: 0;
        top: -36.8516%;
        left: auto
    }

    .heading-20 {
        width: auto
    }

    .div-block-214 {
        flex-flow: wrap
    }

    ._3sec-grdss {
        min-width: 270px
    }

    .link-block-9 {
        pointer-events: none;
        padding: 0
    }

    .div-block-216 {
        margin-left: -179px;
        margin-right: 0
    }

    .image-28 {
        filter: none
    }

    .star-hldr {
        width: 80%
    }

    .bold-text-3 {
        color: var(--brand-slate);
        -webkit-text-stroke-width: 0px;
        text-shadow: none
    }

    .container-2 {
        border-style: none;
        padding-top: 100px
    }

    .hholder-cnt-nav {
        grid-column-gap: 30px;
        grid-row-gap: 30px;
        flex-flow: wrap
    }

    .div-block-217 {
        flex: 0 auto
    }

    .div-block-219 {
        grid-column-gap: 12px;
        grid-row-gap: 12px;
        text-align: center;
        background-color: #c7d2d5;
        border-radius: 14px;
        flex-flow: wrap;
        order: 9999;
        justify-content: center;
        align-items: center;
        min-width: 50%;
        max-width: 100%;
        padding: 40px
    }

    .div-block-220 {
        flex: 1;
        min-width: 60%;
        margin-left: 0
    }

    .text-block-73 {
        flex: 0 auto;
        width: 100%
    }

    .text-block-74 {
        flex: 0 auto;
        align-self: center;
        width: 100%;
        margin-bottom: 10px
    }

    .div-block-221 {
        grid-column-gap: 8px;
        grid-row-gap: 8px;
        flex: 0 auto;
        align-self: stretch;
        padding-left: 12px;
        padding-right: 12px
    }

    .text-block-76 {
        font-size: 30px
    }

    .div-block-222 {
        flex: 1;
        justify-content: center;
        align-self: center;
        align-items: center;
        margin-top: 0;
        padding-top: 20px;
        padding-bottom: 20px
    }

    .text-block-78 {
        max-width: none;
        font-size: 14px;
        line-height: 1.3
    }

    .inner-links-cont {
        flex-flow: column;
        flex: 1;
        justify-content: flex-start;
        align-items: flex-start;
        height: 58%;
        left: auto;
        right: 222px
    }

    .link-block-12 {
        padding: 4px 12px;
        font-size: .8rem
    }

    .link.sm {
        font-size: 1rem
    }

    .div-block-224 {
        padding: 4px
    }

    .div-block-225 {
        display: none
    }
}

@media screen and (max-width: 767px) {
    h1 {
        font-size:3.5rem;
        line-height: 1
    }

    h2 {
        font-size: 2.8rem;
        line-height: 1.3
    }

    .hero_cont.service-holder-af.af-3d {
        justify-content: center;
        align-items: flex-start;
        padding-left: 25px;
        padding-right: 25px
    }

    .hero_cont.sub-sec-af,.hero_cont.sub-sec-af.left-al {
        padding-left: 20px;
        padding-right: 20px
    }

    .service-carousel.af-r {
        grid-column-gap: 18px;
        grid-row-gap: 18px;
        aspect-ratio: auto;
        justify-content: flex-start;
        align-self: flex-start;
        align-items: center;
        padding-left: 0;
        padding-right: 0;
        display: flex
    }

    .af-c {
        flex-flow: column;
        align-self: stretch;
        width: 100%;
        min-width: 280px;
        max-height: none;
        padding: 26px 26px 40px
    }

    .div-block-17 {
        grid-column-gap: 40px;
        grid-row-gap: 40px;
        flex-flow: column;
        flex: 0 auto;
        justify-content: center;
        align-items: flex-start;
        height: 100%
    }

    .heading-5 {
        color: var(--text-on-dark)
    }

    .div-block-26 {
        max-width: none
    }

    .text-block-2 {
        text-align: center;
        justify-content: center;
        align-items: center
    }

    .div-block-28 {
        flex-flow: column;
        justify-content: space-between;
        align-items: center;
        padding: 40px 30px
    }

    .div-block-29 {
        padding-left: 0;
        padding-right: 0
    }

    .text-block-3 {
        text-align: center;
        justify-content: center;
        align-items: center
    }

    .paragraph-5 {
        text-align: center
    }

    .div-block-40 {
        padding: 0 25px 30px
    }

    .rich-text-block {
        width: 100%
    }

    .paragraph-6 {
        text-align: left
    }

    .heading-7 {
        font-size: 3.5rem;
        line-height: 1
    }

    .div-block-41 {
        padding-bottom: 10px
    }

    .text-legal-footer {
        font-size: 16px
    }

    .legal-footer {
        grid-row-gap: 24px;
        text-align: center;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center
    }

    .container.footer_cont {
        padding-top: 2rem
    }

    .code-embed-45 {
        height: 40px;
        margin-top: 40px
    }

    .special_btn {
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto
    }

    .special_btn.lal {
        align-self: flex-start;
        margin-left: 0;
        margin-right: 0
    }

    .special_btn.slbtn {
        flex: 0 auto;
        justify-content: center;
        align-self: center;
        align-items: center;
        width: 166px;
        height: 100%;
        margin-top: 0;
        margin-left: 0
    }

    .div-block-173 {
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        text-align: left;
        flex-flow: wrap;
        justify-content: center;
        align-items: center
    }

    .div-block-173.lal-af {
        justify-content: center;
        align-items: center
    }

    .paragraph-8 {
        font-size: 18px;
        line-height: 1.2
    }

    .div-block-187 {
        padding-top: 30px;
        padding-left: 30px;
        padding-right: 30px
    }

    .italic-text-2 {
        font-size: 28px;
        line-height: 1.3
    }

    .heading-14 {
        margin-bottom: 10px
    }

    .sec-crop-60 {
        padding-left: 0
    }

    .div-block-191 {
        order: -9999;
        width: auto;
        height: auto;
        margin-top: 40px;
        padding-top: 30px;
        padding-bottom: 0;
        padding-left: 20px;
        position: relative;
        inset: auto
    }

    .heading-15 {
        overflow-wrap: anywhere;
        align-self: center;
        width: auto;
        min-width: auto;
        height: auto;
        margin: 0;
        font-size: 80px;
        line-height: .9;
        inset: auto;
        transform: none
    }

    .devider {
        display: none
    }

    .heading-16 {
        text-align: left
    }

    .grid-4 {
        flex-flow: column
    }

    .div-block-193 {
        border-radius: 20px;
        margin-top: -120px;
        padding-top: 120px;
        padding-left: 40px;
        padding-right: 40px
    }

    .div-block-193._2nd-rtf-c {
        background-image: none;
        margin-top: 0;
        padding-top: 40px;
        padding-bottom: 40px
    }

    .heading-17 {
        font-size: 48px
    }

    .div-block-194 {
        margin-left: 0;
        margin-right: 0
    }

    .div-block-195 {
        margin-left: 0;
        margin-right: 0;
        padding-left: 2px
    }

    .div-block-196 {
        padding: 12px
    }

    .div-block-197 {
        padding-left: 0;
        padding-right: 0
    }

    .div-block-201 {
        order: -9999;
        max-height: 400px
    }

    .embd-glb {
        margin-top: 0;
        margin-bottom: 0;
        position: relative;
        top: auto;
        padding: 0;
        max-width: 85vw
    }

    .link-block-8 {
        background-color: #0000;
        justify-content: center;
        align-self: stretch;
        align-items: center;
        margin-left: 0;
        margin-right: 0;
        display: flex;
        box-shadow: 0 2px 5px #0003
    }

    .image-26 {
        top: 20%
    }

    .div-block-210 {
        justify-content: center;
        align-items: flex-start
    }

    .rich-text-block-11 {
        text-align: left;
        flex: 1
    }

    .div-block-211 {
        padding: 20px 6px 6px
    }

    .star-hldr {
        width: 100%
    }

    .bold-text-3 {
        font-size: min(120px, 8vw)
    }

    .div-block-217 {
        width: 100%
    }

    .link-block-10.inner-no-pad {
        display: none
    }

    .link-block-10.actv-link-dd {
        background-color: #bcd2d800;
        flex-flow: column;
        margin-left: 0;
        padding: 0
    }

    .image-29 {
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 0;
        padding: 4px;
        display: none;
        position: absolute;
        inset: auto 0% auto auto;
        transform: rotate(-90deg)
    }

    .div-block-218 {
        display: none
    }

    .div-block-220 {
        z-index: 3;
        background-color: #d1dcdf;
        border-radius: 10px;
        flex-flow: column;
        justify-content: flex-start;
        align-items: flex-start;
        min-width: 72%;
        min-height: 310px;
        padding: 12px;
        display: none;
        position: absolute;
        top: 206px;
        box-shadow: 0 2px 5px #186bb933
    }

    .div-block-221 {
        padding-top: 8px;
        padding-bottom: 12px
    }

    .text-block-78 {
        text-align: left;
        font-size: 14px;
        line-height: 1.2
    }

    .inner-links-cont {
        grid-row-gap: 4px;
        background-color: #fff0;
        border: 1px dashed #ffffff78;
        align-self: stretch;
        height: auto;
        margin-left: 0;
        margin-right: 0;
        padding: 8px;
        position: relative;
        top: auto;
        right: auto
    }

    .link-block-12 {
        padding-top: 8px;
        padding-bottom: 8px
    }

    .text-block-80 {
        font-weight: 400
    }

    .link {
        color: var(--ftrbg);
        text-transform: uppercase;
        margin-left: 0;
        padding: 4px 8px;
        font-size: 1.5rem
    }

    .div-block-225 {
        display: none
    }
}

@media screen and (max-width: 479px) {
    h1 {
        font-size:3.3rem
    }

    .hero_cont {
        padding-left: 18px;
        padding-right: 18px
    }

    .hero_cont.service-holder-af.af-3d {
        padding-top: 0;
        padding-bottom: 0
    }

    .hero_cont.sub-sec-af {
        padding-left: 0;
        padding-right: 0
    }

    .hero_cont.sub-sec-af.left-al {
        padding-top: 20px
    }

    .black_a {
        min-height: auto;
        padding-bottom: 40px
    }

    .service-carousel.af-r {
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        margin-top: 0;
        padding: 0 0 30px;
        font-size: 16px
    }

    .af-c {
        text-align: left;
        flex-flow: column;
        justify-content: center;
        align-items: flex-start;
        margin-bottom: 30px;
        padding: 60px 28px;
        transform: rotate(0)
    }

    .div-block-17 {
        text-align: left;
        flex-flow: column;
        align-items: center
    }

    .heading-5 {
        align-self: center;
        min-width: 100%;
        min-height: auto;
        font-size: 1.9rem;
        line-height: 1.1
    }

    .code-embed-5 {
        height: 30px
    }

    .code-embed-5.sh-1 {
        height: 20px;
        margin-left: -3px;
        margin-right: -3px;
        bottom: -1px
    }

    .grid-2 {
        grid-column-gap: 50px;
        grid-row-gap: 50px;
        margin-top: 0;
        margin-bottom: 0
    }

    .heading-6 {
        color: #0a2946;
        text-align: center;
        padding-top: 40px;
        font-size: 42px;
        line-height: 1
    }

    .div-block-26 {
        flex-flow: wrap;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        display: flex
    }

    .text-block-2 {
        margin-bottom: 10px;
        font-size: 34px;
        font-weight: 400;
        line-height: 1
    }

    .div-block-27 {
        flex: 1
    }

    .div-block-28 {
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        width: 50%;
        padding: 35px 20px
    }

    .div-block-28:hover {
        outline-offset: -5px;
        border-radius: 8px
    }

    .paragraph-3 {
        text-align: center;
        align-self: center;
        margin-bottom: 20px;
        font-size: 18px;
        line-height: 1.2
    }

    .div-block-29 {
        justify-content: center;
        align-items: center;
        margin-bottom: 0;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px
    }

    .code-embed-7 {
        z-index: -1;
        aspect-ratio: auto;
        opacity: .3;
        color: #fff;
        width: auto;
        height: auto;
        max-height: none;
        position: absolute;
        inset: 8%
    }

    .text-block-3 {
        margin-bottom: 10px;
        font-size: 18px;
        line-height: 1.1
    }

    .fixd-line-af {
        min-width: 100vh
    }

    .button {
        align-self: center;
        max-width: 350px;
        margin-top: 10px
    }

    .div-block-31 {
        justify-content: center;
        align-items: flex-start;
        padding-bottom: 0
    }

    .div-block-33 {
        justify-content: space-around;
        align-items: stretch;
        max-width: 100%;
        font-size: 12px;
        line-height: 1.3
    }

    .navbar-brand-2 {
        border-radius: 50%;
        width: 60px;
        height: 60px;
        margin-top: 12px;
        padding: 3px;
        display: flex;
        overflow: clip
    }

    .paragraph-5 {
        font-size: 14px;
        line-height: 1.2
    }

    .div-block-6 {
        z-index: 4;
        background-color: transparent;
        background-image: linear-gradient(var(--subhero-surface) 82%,transparent);
        justify-content: center;
        align-self: center;
        align-items: center;
        width: auto;
        max-width: none;
        display: flex
    }

    .sub_her_hld_af {
        text-align: center;
        padding-left: 30px;
        padding-right: 30px;
        position: relative
    }

    .block-quote {
        text-align: center;
        align-self: stretch;
        font-size: 1.3rem;
        line-height: 1.3
    }

    .hero_cont-2.adfff {
        aspect-ratio: auto;
        min-height: 0;
        padding-top: 40px
    }

    .italic-text {
        font-size: 1.6rem
    }

    .quote_img {
        width: 90px;
        margin-left: auto;
        top: 2%;
        left: auto
    }

    .div-block-7 {
        flex-flow: column;
        justify-content: space-between;
        align-items: flex-start
    }

    .div-block-39 {
        margin: 12px
    }

    .grid-3 {
        grid-template-columns: 1fr 1fr;
        padding: 0;
        gap: 10px
    }

    .div-block-40 {
        padding: 0 0 40px 0
    }

    .rich-text-block {
        text-align: left;
        padding-top: 0
    }

    .paragraph-6 {
        text-align: center;
        width: 100%;
        font-size: 16px;
        line-height: 1.2
    }

    .heading-7 {
        text-align: left;
        margin-bottom: 10px
    }

    .div-block-41 {
        text-align: left
    }

    .info-tag-af {
        width: 25px;
        height: 25px
    }

    .text-block-5 {
        font-size: 1.2rem;
        line-height: 1
    }

    .div-block-164 {
        justify-content: center;
        align-items: flex-start
    }

    .image-14 {
        max-width: none
    }

    .text-legal-footer {
        font-size: 20px;
        line-height: 125%
    }

    .div-block-165 {
        grid-column-gap: 12px;
        grid-row-gap: 10px;
        justify-content: flex-start;
        align-items: center
    }

    .div-block-54 {
        top: 9%
    }

    .image-10 {
        max-width: 100%
    }

    .footer-brand {
        max-width: none;
        margin-top: 0;
        margin-bottom: 20px;
        padding-left: 3px
    }

    .link-block-5 {
        border: 1px solid #005f9d9e
    }

    .link-block-5.non_links {
        border-style: none;
        padding-left: 0
    }

    .div-block-57 {
        grid-column-gap: 60px;
        grid-row-gap: 0px
    }

    .rich-text-block-4 {
        margin-bottom: 20px
    }

    .legal-footer {
        flex-flow: column;
        justify-content: flex-start;
        align-items: center;
        margin-top: 40px;
        margin-bottom: 60px;
        padding-left: 0;
        padding-right: 0
    }

    .div-block-169 {
        box-shadow: inset 0 2px 4px 4px #ffffff24
    }

    .div-block-49 {
        flex-flow: column;
        grid-template-columns: 1fr;
        display: flex
    }

    .container {
        margin-bottom: 0;
        padding-bottom: 40px
    }

    .container.footer_cont {
        padding-top: 4rem;
        padding-left: .8rem;
        padding-right: .8rem
    }

    .div-block-51 {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 0
    }

    .div-block-156 {
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        flex-flow: column;
        margin-left: 0
    }

    .ssm_btn-2 {
        margin: 0 auto
    }

    .div-block-56 {
        background-color: #bee4e7;
        border-radius: 8px;
        padding: 30px 20px 10px
    }

    .image-11 {
        order: 1;
        max-width: 100%
    }

    .code-embed-4 {
        height: 200px;
        margin: -4px -4px -18px
    }

    .image-16 {
        max-width: none;
        position: relative;
        top: .03rem
    }

    .code-embed-45 {
        width: auto;
        height: 15px;
        margin-bottom: -2px;
        margin-left: 0;
        margin-right: 0
    }

    .special_btn {
        align-self: center;
        font-size: 22px
    }

    .special_btn.lal {
        flex: 1;
        align-self: center;
        max-width: 225px
    }

    .special_btn.slbtn {
        flex-flow: column;
        align-self: center;
        margin-left: 0;
        margin-right: 0;
        padding-top: 8px;
        padding-bottom: 8px
    }

    .btn_overlay.high_pros.dark.review-blurr {
        outline-offset: 0px;
        outline: 3px #0a29461f
    }

    .text-block-65 {
        text-align: center;
        text-transform: uppercase;
        flex: 1;
        justify-content: center;
        align-self: stretch;
        align-items: center;
        min-width: 10px;
        padding: 10px 16px;
        font-size: 20px;
        font-weight: 600;
        line-height: 120%;
        display: flex
    }

    .div-block-173 {
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        flex-flow: column;
        justify-content: center;
        align-self: center;
        align-items: center;
        display: flex
    }

    .div-block-173.ral-af {
        justify-content: center;
        align-items: flex-start
    }

    .text-span {
        text-align: center;
        font-size: 42px;
        line-height: 1
    }

    .div-block-183 {
        display: none
    }

    .heading-14 {
        text-align: center;
        letter-spacing: 0;
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 36px
    }

    .heading-14.h-3-af {
        color: #72808c;
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: 400;
        line-height: 1
    }

    .sec-crop-60 {
        padding-left: 0
    }

    .div-block-191 {
        justify-content: flex-start;
        align-self: stretch;
        align-items: flex-start;
        padding: 0 20px 20px
    }

    .heading-15 {
        color: #3e4f5fba;
        text-shadow: none;
        align-self: center;
        margin: 0;
        padding-top: 20px;
        padding-left: 0;
        font-size: 48px;
        line-height: 1
    }

    .heading-16 {
        text-align: center;
        margin-left: 0;
        font-size: 48px;
        font-weight: 300;
        line-height: 1
    }

    .heading-16.darkbg-af {
        text-align: left
    }

    .grid-4 {
        background-image: none;
        padding: 11px
    }

    .grid-4._2nd_light {
        margin-top: 60px
    }

    .div-block-193 {
        border-radius: 37px;
        margin-top: -130px;
        padding-bottom: 20px;
        padding-left: 16px;
        padding-right: 16px
    }

    .div-block-193._2nd-rtf-c {
        background-color: #5c6d81;
        padding: 20px 10px
    }

    .heading-17 {
        margin-top: 10px;
        font-size: 36px;
        font-weight: 400
    }

    .paragraph-11 {
        color: #383b3d;
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.2
    }

    .paragraph-11._2nd-light {
        opacity: .9;
        color: #ffffffc2;
        padding: 15px;
        font-size: 16px;
        font-weight: 400
    }

    .rich-text-block-9 {
        margin-bottom: 20px
    }

    .div-block-194 {
        grid-template-columns: 1fr
    }

    .div-block-195 {
        justify-content: center;
        align-items: center;
        min-width: auto;
        margin-left: 0;
        margin-right: 0;
        padding-left: 14px;
        padding-right: 14px
    }

    .div-block-196 {
        padding: 20px 15px 15px
    }

    .heading-18 {
        margin: 0 -2px -2px 0
    }

    .paragraph-12 {
        font-size: 16px;
        line-height: 1.3
    }

    .div-block-197 {
        grid-column-gap: 8px;
        grid-row-gap: 8px;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        margin-top: 0;
        margin-bottom: 40px;
        padding: 20px 0
    }

    .div-block-198 {
        outline-offset: 0px;
        border: 1px #000;
        outline: 3px #0a2946;
        flex-flow: row;
        align-self: flex-start;
        margin-top: 0;
        padding: 0 4px 4px
    }

    .stars {
        background-size: 26px 53%;
        width: 130px
    }

    .div-block-200 {
        border-radius: 10px
    }

    .div-block-200._2nd-itr {
        background-color: #70808a00
    }

    .div-block-202 {
        grid-column-gap: 0px;
        grid-row-gap: 0px
    }

    .text-block-70 {
        justify-content: center;
        align-items: center
    }

    .link-block-8 {
        border: 1px solid #f5f5f5;
        justify-content: center;
        align-self: center;
        align-items: center;
        padding: 15px 20px 5px;
        display: flex;
        min-width: 120px!important
    }

    .paragraph-13 {
        align-self: stretch;
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.3
    }

    .cor-img-holder {
        aspect-ratio: auto;
        width: 100vw;
        height: auto;
        min-height: 100vw;
        top: 0;
        transform: translate(-50%,-53%)
    }

    .div-block-210 {
        margin-bottom: 20px
    }

    .text-span-4 {
        font-size: 22px;
        font-weight: 400;
        line-height: 1.1
    }

    .review-thumb {
        order: -9999;
        margin-top: 0;
        margin-bottom: 30px
    }

    .text-block-71 {
        padding-top: 8px;
        padding-bottom: 8px
    }

    .rich-text-block-11 {
        text-align: center;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .div-block-211 {
        padding: 12px
    }

    .div-block-212 {
        aspect-ratio: 1;
        pointer-events: none;
        margin-top: -100px;
        margin-bottom: -63px
    }

    .image-27 {
        margin-top: 0;
        position: relative;
        top: auto
    }

    .div-block-213 {
        justify-content: center;
        align-self: stretch;
        align-items: center;
        margin-top: 20px;
        display: flex
    }

    .heading-20 {
        letter-spacing: 1px;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.1rem
    }

    .heading-21 {
        margin-bottom: 0;
        margin-left: 0;
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1.3
    }

    .div-block-214 {
        grid-column-gap: 24px;
        grid-row-gap: 24px
    }

    .paragraph-15 {
        font-size: 16px
    }

    .heading-22 {
        font-size: 32px;
        font-weight: 400
    }

    .div-block-215 {
        max-width: none;
        padding: 0 20px 20px 13px
    }

    .div-block-216 {
        aspect-ratio: 1;
        width: 100%;
        margin-top: -20px;
        margin-bottom: 0;
        margin-left: -4px
    }

    .star-hldr {
        aspect-ratio: 2/3;
        height: auto;
        margin-bottom: 0;
        top: auto
    }

    .bold-text-3 {
        font-size: 60px
    }

    .heading-24 {
        font-weight: 600
    }

    .paragraph-16 {
        color: #fafafa;
        font-size: 16px;
        font-weight: 400
    }

    .div-block-217 {
        flex: 1;
        justify-content: center;
        align-items: flex-start;
        min-width: 200px;
        padding-left: 0
    }

    .image-29 {
        background-image: none;
        flex: 0 auto;
        order: 9999;
        width: 1rem;
        margin: 0 -8px 0 0;
        padding-top: 0;
        padding-right: 0;
        display: none;
        transform: rotateX(0) rotateY(-180deg) rotateZ(0)
    }

    .div-block-219 {
        grid-column-gap: 4px;
        grid-row-gap: 4px;
        border-radius: 28px;
        padding: 20px;
        box-shadow: 0 3px 3px #23283626
    }

    .text-block-73 {
        font-weight: 600
    }

    .text-block-74 {
        font-size: 20px;
        font-weight: 400
    }

    .text-block-75 {
        font-size: 60px
    }

    .div-block-221 {
        filter: none;
        color: #658ca136;
        text-shadow: 1px -1px 1px #ffffff7a,-1px 1px #455c708a;
        justify-content: space-between;
        align-items: center;
        padding-right: 10px
    }

    .text-block-76 {
        margin-top: 4px;
        font-size: 24px;
        line-height: 1.1
    }

    .text-block-77 {
        font-size: 40px;
        line-height: 1
    }

    .div-block-222 {
        padding: 12px
    }

    .inner-links-cont {
        border: 1px dashed #fff;
        margin-left: -3px;
        margin-right: -3px;
        padding: 6px
    }

    .link-block-12 {
        min-width: 100px
    }
}

#w-node-_016b79f5-4fbb-d083-962f-73415fd31a34-2995fc17 {
    grid-area: span 1/span 1/span 1/span 1;
    align-self: center
}

#w-node-_925af8f2-588e-2276-c92e-501b0818f15a-2995fc17 {
    align-self: stretch
}

#w-node-_2f0517c4-398c-a395-ede3-5e159ee01aa0-2995fc17 {
    align-self: end
}

:where([data-site-page="index"]) .rich-text-block-11 {
    align-self: center
}

#w-node-_609d5659-9f65-0a1d-af8d-aae226e03e1e-2995fc17 {
    grid-area: span 1/span 2/span 1/span 2
}

#w-node-f6c2a105-881c-d69b-ace6-ae81300527dc-2995fc17,#w-node-f6c2a105-881c-d69b-ace6-ae8130052812-2995fc17,#w-node-f6c2a105-881c-d69b-ace6-ae8130052824-2995fc17 {
    grid-area: span 2/span 2/span 2/span 2
}

:where([data-site-page="index"]) .div-block-196 {
    grid-area: span 1/span 1/span 1/span 1
}

:where([data-site-page="index"]) .review-card--two-rows {
    grid-area: span 2/span 1/span 2/span 1
}

:where([data-site-page="index"]) .review-card--three-rows {
    grid-area: span 3/span 1/span 3/span 1
}

#w-node-_59db2acb-9306-f795-5ac1-33c8c0418854-2995fc17 {
    place-self: stretch stretch
}

#w-node-_59db2acb-9306-f795-5ac1-33c8c0418856-2995fc17 {
    align-self: center
}

#w-node-_59db2acb-9306-f795-5ac1-33c8c0418854-a441330c,#w-node-_59db2acb-9306-f795-5ac1-33c8c041885d-2995fc17 {
    place-self: stretch stretch
}

#w-node-_59db2acb-9306-f795-5ac1-33c8c0418856-a441330c {
    align-self: center
}

#w-node-_59db2acb-9306-f795-5ac1-33c8c041885d-a441330c {
    place-self: stretch stretch
}

#w-node-_17b4e368-d8c1-f13c-1e0d-5626690d2758-d5d55734,#w-node-_4716841d-da12-4927-b2c5-03d1749ab810-d5d55734,#w-node-_48bc88eb-d56d-fbaf-c0e2-47bd08e9a9c8-d5d55734,#w-node-de1afdd1-7514-9111-719c-aeaf50882bf7-d5d55734 {
    grid-area: span 2/span 2/span 2/span 2
}

#w-node-_59db2acb-9306-f795-5ac1-33c8c0418854-d5d55734 {
    place-self: stretch stretch
}

#w-node-_59db2acb-9306-f795-5ac1-33c8c0418856-d5d55734 {
    align-self: center
}

#w-node-_59db2acb-9306-f795-5ac1-33c8c041885d-d5d55734 {
    place-self: stretch stretch
}

#w-node-_293f7ab9-3806-e565-7b48-4b527f04e47d-c32f810f {
    align-self: center
}

#w-node-_59db2acb-9306-f795-5ac1-33c8c0418854-c32f810f {
    place-self: stretch stretch
}

#w-node-_59db2acb-9306-f795-5ac1-33c8c0418856-c32f810f {
    align-self: center
}

#w-node-_59db2acb-9306-f795-5ac1-33c8c041885d-c32f810f {
    place-self: stretch stretch
}

#w-node-_11389537-835a-3f62-a11d-ef8b44b66336-6a2312d2,#w-node-fc141904-4a59-2c15-a242-acc28c9e0eff-6a2312d2 {
    justify-self: end
}

@media screen and (max-width: 991px) {
    #w-node-f6c2a105-881c-d69b-ace6-ae8130052812-2995fc17 {
        grid-area:span 1/span 1/span 1/span 1
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c0418836-2995fc17 {
        grid-area: span 1/span 2/span 1/span 2
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c0418854-2995fc17 {
        place-self: center
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c0418856-2995fc17 {
        order: -9999;
        grid-area: span 1/span 2/span 1/span 2;
        align-self: stretch
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c041885d-2995fc17 {
        place-self: center
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c0418836-a441330c {
        grid-area: span 1/span 2/span 1/span 2
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c0418854-a441330c {
        place-self: center
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c0418856-a441330c {
        order: -9999;
        grid-area: span 1/span 2/span 1/span 2;
        align-self: stretch
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c041885d-a441330c {
        place-self: center
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c0418836-d5d55734 {
        grid-area: span 1/span 2/span 1/span 2
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c0418854-d5d55734 {
        place-self: center
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c0418856-d5d55734 {
        order: -9999;
        grid-area: span 1/span 2/span 1/span 2;
        align-self: stretch
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c041885d-d5d55734 {
        place-self: center
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c0418836-c32f810f {
        grid-area: span 1/span 2/span 1/span 2
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c0418854-c32f810f {
        place-self: center
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c0418856-c32f810f {
        order: -9999;
        grid-area: span 1/span 2/span 1/span 2;
        align-self: stretch
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c041885d-c32f810f {
        place-self: center
    }
}

@media screen and (max-width: 479px) {
    #w-node-e8aeffe2-e5c2-7432-8629-d57d8ee4f40c-2995fc17 {
        justify-self:stretch
    }

    #w-node-_382294f9-175f-2ae8-8ebb-03bd77fbbe18-2995fc17 {
        justify-self: auto
    }

    #w-node-f6c2a105-881c-d69b-ace6-ae8130052806-2995fc17,#w-node-f6c2a105-881c-d69b-ace6-ae8130052824-2995fc17 {
        grid-area: span 2/span 2/span 2/span 2
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c0418856-2995fc17,#w-node-_59db2acb-9306-f795-5ac1-33c8c0418856-a441330c {
        order: 9999
    }

    #w-node-_4716841d-da12-4927-b2c5-03d1749ab83a-d5d55734,#w-node-_48bc88eb-d56d-fbaf-c0e2-47bd08e9a9f2-d5d55734,#w-node-b4912cf8-9a97-9b19-e553-78cdb9731498-d5d55734,#w-node-de1afdd1-7514-9111-719c-aeaf50882c21-d5d55734 {
        grid-area: span 2/span 2/span 2/span 2
    }

    #w-node-_59db2acb-9306-f795-5ac1-33c8c0418856-c32f810f,#w-node-_59db2acb-9306-f795-5ac1-33c8c0418856-d5d55734 {
        order: 9999
    }
}


/* === site.css === */
html {
    overflow-x: clip;
    overscroll-behavior-y: auto;
}

body {
    min-height: 100%;
    overflow-x: clip;
    overscroll-behavior-y: auto;
}

@media screen and (min-width: 768px) {
    html {
        scroll-behavior: smooth;
    }
    html, body {
        overscroll-behavior: none;
    }
    .site-nav-drawer, dialog, .qc-main, .qc-layout, .ss-detail-toc {
        overscroll-behavior: none;
    }
    html.lenis {
        scroll-behavior: auto !important;
    }
}

@media screen and (min-width: 768px) and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

.nav-holder, .footer_section {
    width: 100%;
}

.nav-holder {
    z-index: 100;
}

#services, #contact {
    scroll-margin-top: 24px;
}

.menu {
    appearance: none;
    font: inherit;
    cursor: pointer;
    transition: color 0.25s, background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.menu:focus-visible {
    outline: 2px solid var(--brand-slate);
    outline-offset: 3px;
}

.menu:hover {
    color: #d6d6d6;
    background-color: var(--nav-surface);
}

.menu.is-open, .menu.is-open:hover, .menu.is-open:focus, .menu.is-open:focus-visible {
    color: var(--bg-base);
    background-color: var(--bg-base);
    border-color: transparent;
    outline: none;
    box-shadow: none;
}

@media screen and (min-width: 992px) {
    .sec-crop-60.top-serv-af {
        min-height: auto;
    }
}

.portfolio-ripple-page .stk-wv {
    opacity: 0.25 !important;
    display: block !important;
}

.portfolio-ripple-page .code-embed-46 {
    z-index: 0;
    background: transparent;
    display: block;
    pointer-events: none;
    inset: 0px 0px 4px;
    mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - 88px), transparent 100%);
}

.portfolio-ripple-page .section > .hero_cont {
    z-index: 1;
}

.portfolio-ripple-page .section > .code-embed-5.sh-1 {
    filter: none;
}

.portfolio-ripple-page .section > .hero_cont > h1 {
    text-shadow: none;
}


/* The desktop SVG must finish its curve before the page background begins. */
@media screen and (min-width: 992px) {
    .section > .portfolio-hero-divider {
        background-image: none;
    }
}


.cms-content-section {
    min-height: 55vh;
}

.cms-content-status {
    color: var(--collection-muted);
    font-size: 1rem;
    line-height: var(--content-reading-leading);
}

.cms-content-status[hidden] {
    display: none;
}

.cms-article {
    color: rgb(43, 58, 71);
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.7;
}

.cms-article > :first-child {
    margin-top: 0px;
}

.cms-article h2, .cms-article h3 {
    color: var(--brand-slate);
    text-transform: uppercase;
    font-weight: 300;
    line-height: 1.1;
}

.cms-article h2 {
    margin: 0px 0px 28px;
    font-size: clamp(2.4rem, 5vw, 5.5rem);
}

.cms-article h3 {
    margin: 56px 0px 18px;
    font-size: clamp(1.7rem, 3vw, 3rem);
}

.cms-article p, .cms-article ul, .cms-article ol, .cms-article blockquote {
    max-width: 820px;
}

.cms-article img, .cms-article video, .cms-article iframe {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 36px 0px;
    border: 0px;
    border-radius: 22px;
    display: block;
}

.cms-article blockquote {
    margin: 42px 0px;
    padding: 18px var(--space-6);
    border-left-color: var(--brand-slate);
}

.cms-gallery {
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    margin: var(--space-10) 0px;
    display: grid;
}

.cms-gallery img {
    height: 100%;
    min-height: 280px;
    margin: 0px;
    object-fit: cover;
}

@media screen and (max-width: 767px) {
    .cms-gallery {
        grid-template-columns: 1fr;
    }
}

.portfolio-api-section, .gallery-api-section, .staff-api-section {
    position: relative;
    z-index: 1;
    /* background: var(--bg-base); */
}

.gallery-api-section {
    padding: clamp(76px, 8vw, 132px) 0px;
}

.gallery-api-section {
    min-height: 65vh;
}

.staff-api-shell {
    width: min(100% - 48px, 1320px);
    margin: 0px auto;
}

.staff-section-heading {
    margin-bottom: 42px;
}


.staff-section-heading h2, .gallery-api-group h3, .staff-profile h2 {
    margin: 0px;
    color: var(--brand-slate);
    font-family: Kanit, sans-serif;
    font-weight: 300;
    line-height: 1.05;
    text-transform: uppercase;
}

.staff-section-heading h2 {
    font-size: clamp(3rem, 6vw, 6.5rem);
}

.portfolio-api-status, .staff-api-status {
    margin: 0px;
    color: var(--collection-muted);
    font-size: 1rem;
}


.staff-card:focus-visible, .gallery-cascade__item:focus-visible {
    outline: var(--brand-slate) solid 2px;
    outline-offset: 4px;
}


.portfolio-card__tag, .cms-project-tags span {
    padding: 5px 9px;
    color: var(--collection-meta);
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(106, 143, 177, 0.24);
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1;
}


.gallery-api-groups {
    gap: var(--space-20);
    display: grid;
}

.gallery-api-group + .gallery-api-group {
    padding-top: 72px;
    border-top: 1px solid rgba(106, 143, 177, 0.28);
}

.gallery-api-group__heading {
    gap: var(--space-5);
    margin-bottom: 28px;
    justify-content: space-between;
    align-items: end;
    display: flex;
}

.gallery-api-group h3 {
    max-width: 900px;
    font-size: clamp(2rem, 4vw, 4rem);
}

.gallery-api-group__heading p {
    margin: 0px;
    color: var(--collection-muted);
    white-space: nowrap;
}

.gallery-cascade {
    column-count: 4;
    column-gap: 18px;
}

.gallery-cascade__item {
    width: 100%;
    margin: 0px 0px 18px;
    border-radius: 16px;
    display: inline-block;
    overflow: hidden;
    break-inside: avoid;
    box-shadow: rgba(51, 76, 98, 0.1) 0px 12px 30px;
}

.gallery-cascade__item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s;
}

.gallery-cascade__item:hover img {
    filter: saturate(1.06);
    transform: scale(1.025);
}

.staff-api-grid {
    gap: 22px;
    grid-template-columns: repeat(4, minmax(0px, 1fr));
    display: grid;
}

.staff-card {
    min-width: 0px;
    color: var(--collection-ink);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.staff-card:hover, .staff-card.is-active {
    box-shadow: rgba(51, 76, 98, 0.13) 0px 20px 40px;
}

.staff-card img {
    width: 100%;
    aspect-ratio: 4 / 4.7;
    background: rgb(199, 212, 217);
    object-fit: cover;
    object-position: center top;
    display: block;
}

.staff-card__content {
    min-height: 118px;
    display: block;
}

.staff-card__name, .staff-card__role {
    display: block;
}

.staff-card__name {
    color: var(--brand-slate);
    font-family: Kanit, sans-serif;
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
}

.staff-card__role {
    margin-top: 9px;
    color: var(--collection-muted);
    font-size: 0.9rem;
    line-height: 1.35;
}

.staff-profile {
    scroll-margin-top: 32px;
    margin-top: var(--space-16);
    background: rgba(222, 231, 233, 0.82);
    border: 1px solid rgba(106, 143, 177, 0.28);
    border-radius: var(--radius-lg);
    grid-template-columns: minmax(260px, 0.72fr) minmax(0px, 1.28fr);
    display: grid;
    overflow: hidden;
    box-shadow: rgba(51, 76, 98, 0.12) 0px 24px 60px;
}

.staff-profile[hidden] {
    display: none;
}

.staff-profile__media img {
    width: 100%;
    height: 100%;
    min-height: 540px;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.staff-profile__content {
    padding: clamp(32px, 5vw, 72px);
}

.staff-profile h2 {
    font-size: clamp(2.8rem, 5vw, 5.5rem);
}

.staff-profile__role {
    margin: 14px 0px 30px;
    color: var(--brand-slate);
    font-family: Kanit, sans-serif;
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    line-height: 1.2;
}

.staff-profile__bio {
    color: var(--collection-ink);
    font-size: 1.05rem;
    line-height: 1.72;
}

.staff-profile__bio > :first-child {
    margin-top: 0px;
}

.staff-profile__email, .cms-project-back {
    width: fit-content;
    color: var(--link-blue-collection);
    font-family: Kanit, sans-serif;
    text-decoration: none;
}

.staff-profile__email {
    margin-top: var(--space-6);
    display: inline-block;
}

.cms-project-back {
    margin-bottom: 28px;
    display: inline-block;
}

.cms-project-image {
    margin-top: 0px !important;
}

.cms-project-tags {
    gap: var(--space-2);
    margin: 30px 0px var(--space-5);
    display: flex;
    flex-wrap: wrap;
}

.cms-project-description {
    max-width: 860px;
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
}

.cms-project-link {
    margin-top: var(--space-6);
}

@media screen and (max-width: 1199px) {

    .gallery-cascade {
        column-count: 3;
    }
}

@media screen and (max-width: 991px) {
    .staff-api-grid {
        grid-template-columns: repeat(2, minmax(0px, 1fr));
    }
    .gallery-cascade {
        column-count: 2;
    }
    .staff-profile {
        grid-template-columns: 1fr 1.25fr;
    }
}

@media screen and (max-width: 767px) {
    .staff-api-shell {
        width: min(100% - 32px, 1320px);
    }
    .gallery-api-group__heading {
        align-items: start;
        flex-direction: column;
    }
    .staff-api-grid {
        grid-template-columns: 1fr;
    }
    .gallery-cascade {
        column-count: 1;
    }
    .staff-profile {
        grid-template-columns: 1fr;
    }
    .staff-profile__media img {
        min-height: 0px;
        aspect-ratio: 4 / 4.5;
    }
}

.we-do-carousel__dot {
    display: none;
}

@media screen and (min-width: 992px) {
    [data-we-do-carousel] {
        isolation: isolate;
    }
    .we-do-carousel__backdrop {
        z-index: -1;
        opacity: 1;
        background: none;
        display: block;
        overflow: hidden;
    }
    .we-do-carousel__backdrop::after {
        content: "";
        position: absolute;
        z-index: 2;
        inset: 0px;
        box-shadow: inset -2px 0 60px 90px var(--bg-base);
        pointer-events: none;
    }
    .we-do-carousel__tile-layer {
        --tile-height: 420px;
        position: absolute;
        inset: -40px;
        opacity: 0;
        background-repeat: repeat;
        background-position: -240px var(--tile-height);
        background-size: 240px auto;
        transition: opacity 0.65s ease-in-out;
        animation: 36s linear 0s infinite normal none running we-do-tile-drift;
        will-change: background-position, opacity;
    }
    .we-do-carousel__tile-layer--design {
        --tile-height: 420px;
        background-image: url("../images/source-select-1-7dad7e69.avif");
    }
    .we-do-carousel__tile-layer--build {
        --tile-height: 430px;
        background-image: url("../images/source-select-2-5693e6d4.avif");
    }
    .we-do-carousel__tile-layer--produce {
        --tile-height: 424px;
        background-image: url("../images/source-select-3-40314c30.avif");
    }
    .we-do-carousel__tile-layer.is-active {
        opacity: 0.075;
    }
    [data-we-do-card] {
        position: relative;
        cursor: default;
    }
    [data-we-do-card]:focus-visible {
        outline: var(--brand-slate) solid 2px;
        outline-offset: 3px;
    }
    .we-do-carousel__dot {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 9px;
        height: 9px;
        opacity: 0;
        background: #fff;
        border-radius: 50%;
        display: block;
        transform: scale(0.45);
        transition: opacity 0.35s, transform 0.35s;
        box-shadow: rgb(255 255 255 / 12%) 0 0 0 4px, rgb(255 255 255 / 45%) 0 0 12px;
    }
    [data-we-do-card].is-active .we-do-carousel__dot {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes we-do-tile-drift {
    0% {
        background-position: -240px var(--tile-height);
    }
    100% {
        background-position: 0px 0px;
    }
}

@media screen and (min-width: 992px) and (prefers-reduced-motion: reduce) {
    .we-do-carousel__tile-layer {
        animation: auto ease 0s 1 normal none running none;
        transition: none;
    }
}

.menu .bar01 {
    transform-origin: center center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s;
}

.menu.is-open .bar01:first-child {
    transform: translateY(6px) rotate(45deg);
}

.menu.is-open .bar01:last-child {
    transform: translateY(-6px) rotate(-45deg);
}

/* Keep native page scrolling available while navigation is open. */
.site-nav-drawer {
    z-index: 80;
    pointer-events: none;
    position: fixed;
    inset: 0px;
    overflow: hidden auto;
    visibility: hidden;
    transition: visibility linear 0.7s;
}

.site-nav-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
}

.site-nav-drawer__backdrop {
    position: fixed;
    inset: 0px;
    background: rgb(10 41 70 / 18%);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.5s;
}

.site-nav-drawer.is-open .site-nav-drawer__backdrop {
    opacity: 1;
}

.site-nav-drawer__panel {
    position: relative;
    transform: translate3d(0px, calc(-100% - 30px), 0px);
    opacity: 0.5;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s;
    will-change: transform;
}

.site-nav-drawer.is-open .site-nav-drawer__panel {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
}

.site-nav-drawer.is-open .site-nav-drawer__container {
    outline: none;
    box-shadow: none;
}

.site-nav-drawer__links > .link-block-10, .site-nav-drawer__links > .site-nav-dropdown, .site-nav-clock > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav-drawer .ssm-menu-content-ready .site-nav-drawer__links > .link-block-10, .site-nav-drawer .ssm-menu-content-ready .site-nav-drawer__links > .site-nav-dropdown, .site-nav-drawer .ssm-menu-content-ready .site-nav-clock > * {
    opacity: 1;
    transform: translateY(0px);
}

@media (prefers-reduced-motion: reduce) {
    .site-nav-drawer, .site-nav-drawer__backdrop, .site-nav-drawer__panel, .site-nav-drawer__links > *, .site-nav-clock > *, .site-nav-dropdown .inner-links-cont, .menu .bar01 {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}

.portfolio-ripple-page {
    isolation: isolate;
}

.portfolio-ripple-page .stk-wv {
    z-index: -1;
}

.portfolio-ripple-page .section {
    isolation: isolate;
}

.portfolio-ripple-page .code-embed-46 {
    z-index: -1;
}

.portfolio-api-section {
    padding: 0px;
    background: transparent;
}

.portfolio-api-section .grid-3 > .link-block-2:first-child {
    grid-area: span 2 / span 2 / span 2 / span 2;
}

@media screen and (max-width: 479px) {
    .portfolio-api-section .grid-3 > .link-block-2:nth-child(6) {
        grid-area: span 2 / span 2 / span 2 / span 2;
    }
}

/* One portfolio component for Home, Portfolio, services and the Utilities specimen.
   Page layouts retain their own featured spans and responsive column counts. */
.portfolio-grid {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 0;
    align-self: stretch;
    align-items: start;
    align-content: start;
    width: 100%;
}

.portfolio-grid[hidden] {
    display: none;
}

.portfolio-grid > * {
    min-width: 0;
}

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

.link-block-2, .portfolio-tile {
    --portfolio-inner-radius: 15px 23px 15px 15px;
    display: inline-block;
    width: 100%;
    aspect-ratio: 1;
    color: #2b3a47;
    background-color: #00000014;
    border: 1px solid;
    border-top-color: var(--ss-prism-border-top, #f5fcffe6);
    border-bottom-color: var(--ss-prism-border-bottom, #e9e9b9cc);
    border-left-color: var(--ss-prism-border-left, #acfffbb3);
    border-right-color: var(--ss-prism-border-right, #a7d9efd9);
    border-radius: 16px 24px 16px 16px;
    padding: 0;
    text-decoration: none;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    outline: 0;
    box-shadow: 0 3px 9px #17384f1a;
    transition: border .2s, box-shadow .35s;
}

.portfolio-tile:hover {
    box-shadow: var(--shadow-glass-hover);
}

.portfolio-tile:focus-visible {
    outline: 2px solid var(--link-blue);
    outline-offset: 4px;
}

.portfolio-tile > .image-4 {
    display: block;
    border-radius: var(--portfolio-inner-radius);
    transition: filter .5s ease, transform .65s cubic-bezier(.22,.68,.2,1);
}

.portfolio-tile__overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    color: #fff;
    text-align: center;
    background: rgb(10 41 70 / 54%);
    border-radius: var(--portfolio-inner-radius);
    opacity: 0;
    transition: opacity 450ms cubic-bezier(.22,.68,.2,1);
    pointer-events: none;
}

.portfolio-tile__icon {
    width: 56px;
    height: 56px;
    filter: invert(1);
    transform: translateY(10px) scale(.8);
    transition: transform .55s cubic-bezier(.22,.68,.2,1);
}

.portfolio-tile__title {
    max-width: 30ch;
    font-size: clamp(16px,1.6vw,22px);
    font-weight: 600;
    line-height: 1.3;
    transform: translateY(12px);
    transition: transform .5s ease .04s;
}

.portfolio-tile__tokens {
    color: #ffffffc9;
    font-size: 12px;
    line-height: 1.5;
    transform: translateY(14px);
    transition: transform .5s ease .09s;
}

.portfolio-tile:is(:hover, :focus-visible) > .image-4 {
    filter: blur(5px);
    transform: scale(1.04);
}

.portfolio-tile:is(:hover, :focus-visible) .portfolio-tile__overlay {
    opacity: 1;
}

.portfolio-tile:is(:hover, :focus-visible) :is(.portfolio-tile__icon, .portfolio-tile__title, .portfolio-tile__tokens) {
    transform: none;
}

@media (hover: none), (pointer: coarse) {
    .portfolio-tile__overlay { inset: auto 0 0; padding: 14px; gap: 6px; opacity: 1; }
    .portfolio-tile__icon { display: none; }
    .portfolio-tile :is(.portfolio-tile__title, .portfolio-tile__tokens) { transform: none; }
    .portfolio-tile:is(:hover, :focus-visible) > .image-4 { filter: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-tile :is(.image-4, .portfolio-tile__overlay, .portfolio-tile__icon, .portfolio-tile__title, .portfolio-tile__tokens) { transition: none; transform: none; }
}

html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .div-block-196 {
    border: 1px solid;
    border-top-color: var(--ss-prism-border-top, #f5fcffe6);
    border-bottom-color: var(--ss-prism-border-bottom, #e9e9b9cc);
    border-left-color: var(--ss-prism-border-left, #acfffbb3);
    border-right-color: var(--ss-prism-border-right, #a7d9efd9);
    outline: 0;
    box-shadow: 0 3px 10px #17384f14;
    /* The new border occupies one pixel of the existing padding on each side. */
    padding: 17px;
    transition: box-shadow 350ms ease;
}

html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .div-block-196:hover {
    box-shadow: 0 4px 12px #17384f20;
}

@media screen and (max-width: 991px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .div-block-196 {
        padding: 29px 19px 19px;
    }
}

@media screen and (max-width: 767px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .div-block-196 {
        padding: 11px;
    }
}

@media screen and (max-width: 479px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .div-block-196 {
        padding: 19px 14px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .div-block-196 {
        transition: none;
    }
}

.div-block-39 {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.site-bot-animation {
    width: 75px;
    height: 75px;
    flex: 0 0 auto;
    pointer-events: none;
}

@media screen and (min-width: 992px) {
    .div-block-39 {
        overflow: visible;
    }
    .site-bot-animation {
        width: 135px;
        height: 135px;
    }
}

.site-bot-animation {
    transform-origin: center center;
    transition: transform 1.1s cubic-bezier(0.22, 0.75, 0.2, 1);
}

.div-block-39.bobby-in-services {
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    .site-bot-animation {
        transition: none;
    }
}

.cor-img-holder .site-bot-animation.bobby-inside-halo {
    position: absolute;
    inset: 0px;
    margin: auto;
    z-index: 3;
}

.bobby-ai-button {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    border: 0px;
    border-radius: inherit;
    background: transparent;
    color: var(--brand-slate);
    font: 500 20px Kanit, sans-serif;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.bobby-ai-button[hidden] {
    display: none;
}

.bobby-ai-button:focus-visible {
    outline: 2px solid var(--base-clr);
    outline-offset: 4px;
}

.staff-card {
    text-decoration: none;
}

.team-detail {
    padding-top: 130px;
}

.team-detail [hidden] {
    display: none;
}

.team-detail__photo {
    object-fit: cover;
    border-radius: 20px;
}

.team-detail h1 {
    font: 400 clamp(2.6rem, 6vw, 4.5rem) / 1.08 Kanit, sans-serif;
    color: var(--brand-slate);
    margin: 0px 0px var(--space-3);
}

.team-detail__designation {
    font: 400 1.4rem / 1.4 Kanit, sans-serif;
    margin-bottom: var(--space-8);
}

.team-detail__bio {
    line-height: 1.35;
}

.team-detail__bio p {
    margin-bottom: var(--space-5);
}

.team-detail__contact {
    margin-top: 36px;
    line-height: 1.8;
}

.team-detail__contact h2 {
    font: 400 1.8rem Kanit, sans-serif;
}

.team-detail address {
    font-style: normal;
}

.staff-card:focus-visible {
    outline-color: var(--brand-slate);
}

.team-detail > a {
    display: inline-block;
    margin-bottom: var(--space-8);
    padding: var(--space-3) 22px;
    border-radius: 30px;
    background: var(--bg-base);
    color: var(--brand-slate);
    text-decoration: none;
    box-shadow: rgba(255, 255, 255, 0.5) -4px -4px 10px, rgba(31, 64, 124, 0.15) 4px 4px 10px;
}

.team-detail__header {
    display: grid;
    grid-template-columns: 250px minmax(0px, 1fr);
    gap: var(--space-10);
    align-items: center;
    padding: var(--space-8);
    border-radius: var(--radius-panel);
    background: rgba(255, 255, 255, 0.17);
}

.team-detail__photo {
    width: 100%;
    height: 300px;
    margin: 0px;
    border: 3px solid var(--bg-base);
    box-shadow: rgba(255, 255, 255, 0.5) -4px -4px 10px, rgba(31, 64, 124, 0.2) 4px 4px 10px;
}

.team-detail__designation {
    margin-bottom: 0px;
    color: var(--collection-meta);
}

.team-detail__bio {
    padding: var(--space-10) var(--space-8) 0px;
    color: var(--collection-ink);
}

.team-detail__contact {
    padding: 26px var(--space-8);
    border: 1px solid rgba(255, 255, 255, 0.396);
    border-radius: var(--radius-lg);
    background: var(--bg-base);
    box-shadow: rgba(31, 64, 124, 0.094) 3px 3px 8px inset, rgba(255, 255, 255, 0.5) -3px -3px 8px inset;
}

.team-detail__contact h2 {
    color: var(--brand-slate);
    margin-top: 0px;
}

.team-detail__contact a {
    color: var(--link-blue);
    overflow-wrap: anywhere;
}

.team-detail a:focus-visible {
    outline: 2px solid var(--link-blue);
    outline-offset: 4px;
}

.team-detail > a:hover {
    box-shadow: rgba(31, 64, 124, 0.15) 3px 3px 8px inset, rgba(255, 255, 255, 0.5) -3px -3px 8px inset;
}

@media screen and (max-width: 767px) {
    .team-detail {
        padding-top: 110px;
    }
    .team-detail__header {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding: var(--space-6);
    }
    .team-detail__photo {
        max-width: 260px;
        height: 300px;
    }
    .team-detail__bio {
        padding: var(--space-8) var(--space-2) 0px;
    }
    .team-detail__contact {
        padding: var(--space-6);
    }
}

.team-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    vertical-align: middle;
}

.team-detail__header {
    position: relative;
    padding-top: 88px;
}

.team-detail__email {
    position: absolute;
    top: 24px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 48px);
    padding: 10px var(--space-4);
    border-radius: var(--radius-lg);
    color: var(--brand-slate);
    background: var(--bg-base);
    text-decoration: none;
    font-size: 15px;
    box-shadow: rgba(255, 255, 255, 0.5) -3px -3px 8px, rgba(31, 64, 124, 0.15) 3px 3px 8px;
}

.team-detail__email span {
    overflow-wrap: anywhere;
    min-width: 0px;
}

.team-detail__bio {
    font-size: 18px;
}

.team-detail__designation {
    font-size: 1.55rem;
}

.team-detail__cta h2 {
    color: var(--brand-slate);
    font: 400 clamp(2rem, 4vw, 3rem) / 1.15 Kanit, sans-serif;
}

.team-detail__cta p {
    font-size: 18px;
}

.team-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px var(--space-6);
    margin-top: var(--space-4);
    border-radius: 30px;
    background: var(--bg-base);
    color: var(--brand-slate);
    text-decoration: none;
    box-shadow: rgba(255, 255, 255, 0.5) -4px -4px 10px, rgba(31, 64, 124, 0.15) 4px 4px 10px;
}

.team-cta-link:hover, .team-detail__email:hover {
    box-shadow: rgba(31, 64, 124, 0.15) 3px 3px 8px inset, rgba(255, 255, 255, 0.5) -3px -3px 8px inset;
}

.team-profile-page .footer_section .team-icon {
    width: 30px;
    height: 30px;
}

@media screen and (max-width: 767px) {
    .team-detail__header {
        padding-top: 88px;
    }
    .team-detail__email {
        top: 20px;
        right: 20px;
        font-size: 14px;
    }
}

.team-portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-width: 0px;
    border-radius: 50%;
    padding: 10px;
    background: var(--bg-base);
    box-shadow: rgba(255, 255, 255, 0.565) -7px -7px 16px, rgba(31, 64, 124, 0.17) 7px 7px 16px, rgba(31, 64, 124, 0.15) 5px 5px 12px inset, rgba(255, 255, 255, 0.65) -5px -5px 12px inset;
}

.team-portrait > img, .staff-card .team-portrait > img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0px;
    border: 0px;
    border-radius: 20px 20px 400px 400px;
    object-fit: contain;
    object-position: center bottom;
    background: transparent;
    box-shadow: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.staff-card {
    padding: var(--space-15) var(--space-5) var(--space-2);
    background: #d1dcdfa3;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-panel);
    box-shadow: rgba(255, 255, 255, 0.52) -6px -6px 16px, rgba(31, 64, 124, 0.15) 6px 6px 16px;
}

.staff-card__content {
    padding: var(--space-6) 4px var(--space-4);
    text-align: center;
}

.staff-card:hover, .staff-card:focus-visible {
    border-color: #8cbcff;
    box-shadow: inset rgba(255, 255, 255, 0.565) 6px -3px 20px, inset rgba(31, 64, 124, 0.2) 0px 3px 20px;
    background-color: #b7ebff3b;
}

@media screen and (max-width: 767px) {
    .team-detail__header > .team-portrait {
        max-width: 260px;
        margin-inline: auto;
    }
}

@media screen and (max-width: 767px) {
    .team-profile-page {
        text-align: center;
    }
    .team-detail__bio {
        text-align: left;
    }
    .team-detail__header {
        padding-top: var(--space-6);
    }
    .team-detail__email {
        position: relative;
        inset: auto;
        order: 3;
        justify-self: center;
        justify-content: center;
        max-width: 100%;
        text-align: center;
    }
    .team-profile-page .footer_section, .team-profile-page .footer_section p, .team-profile-page .footer_section address {
        text-align: center;
    }
}

@media screen and (max-width: 767px) {
    .staff-card {
        padding-top: 85px;
    }
}

.team-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 28px;
    font-size: 14px;
    color: var(--collection-meta);
}

.team-breadcrumb a {
    color: var(--brand-slate);
    text-decoration: none;
}

.team-breadcrumb a:hover {
    text-decoration: underline;
}

.team-breadcrumb [aria-current] {
    overflow-wrap: anywhere;
}

.team-detail__cta h2 a {
    color: inherit;
    text-decoration: none;
}

.team-detail__cta h2 a:hover {
    text-decoration: underline;
    text-underline-offset: 6px;
}

@media screen and (max-width: 767px) {
    .team-detail {
        padding-top: 145px;
    }
    .team-breadcrumb {
        justify-content: center;
    }
}

.team-breadcrumb a {
    display: inline-flex;
    align-items: center;
    padding: 6px var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    background: var(--bg-base);
    color: var(--brand-slate);
    font-size: 12px;
    line-height: 1.4;
    box-shadow: rgba(255, 255, 255, 0.5) -2px -2px 5px, rgba(31, 64, 124, 0.125) 2px 2px 5px;
    transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.team-breadcrumb a:hover {
    text-decoration: none;
    border-color: var(--border-col);
    box-shadow: rgba(31, 64, 124, 0.11) 2px 2px 4px inset, rgba(255, 255, 255, 0.5) -2px -2px 4px inset;
}

.team-detail__email {
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: rgba(255, 255, 255, 0.5) -2px -2px 6px, rgba(31, 64, 124, 0.125) 2px 2px 6px;
    transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.team-detail__email:hover {
    border-color: var(--border-col);
    box-shadow: rgba(31, 64, 124, 0.11) 2px 2px 5px inset, rgba(255, 255, 255, 0.5) -2px -2px 5px inset;
}

/* Reserve room for the portrait's natural overhang above its circular frame. */
@media screen and (max-width: 767px) {
    .team-detail__header {
        padding-top: calc(24px + var(--portrait-overhang, 80px));
    }
}

/* Closing profile invitation typography. */
.team-detail__cta h2 {
    margin: 0 0 14px;
    font-size: 1.8rem;
    line-height: 1.15;
    text-align: left;
}

.team-detail__cta,
.team-detail__cta :is(h2, p, a) {
    text-align: left;
}

/* Full-width closing invitation with a compact raised action. */
.team-detail__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    width: 100%;
    margin: var(--space-10) 0 0;
    padding: 26px var(--space-8);
    border-top: 1px solid var(--border-col);
    text-align: left;
}

.team-detail__cta p {
    margin: 0;
    max-width: 520px;
    color: var(--collection-meta);
    font-size: 17px;
    line-height: var(--content-reading-leading);
    text-align: left;
}

.team-detail__cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-shrink: 0;
    padding: 14px var(--space-5);
    border: 1px solid #ffffff80;
    border-radius: 16px;
    background: var(--bg-base);
    color: var(--brand-slate);
    font: 400 17px/1.4 Kanit, sans-serif;
    text-decoration: none;
    box-shadow: -3px -3px 9px #ffffff80, 3px 3px 9px #1f407c20;
}

.team-detail__cta-link:hover {
    box-shadow: inset 2px 2px 6px #1f407c20, inset -2px -2px 6px #ffffff80;
}

@media screen and (max-width: 767px) {
    .team-detail__cta {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-6) var(--space-2);
        gap: var(--space-5);
    }
    .team-detail__cta-link {
        flex-shrink: 1;
        max-width: 100%;
        text-align: left;
    }
}

/* Four scroll states; the overview remains visible while each step passes. */
.process-flow {
    --process-accent: #788db0;
    position: relative;
    display: grid;
    max-width: 1440px;
    margin: var(--space-15) auto 0;
    padding: var(--space-15) var(--space-10) 100px;
    color: var(--collection-ink);
}

.process-flow__intro {
    position: sticky;
    top: 110px;
    align-self: start;
}

.process-flow__nav a {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: color .3s ease, box-shadow .3s ease;
}

.process-flow__nav a span {
    font: 400 18px Kanit, sans-serif;
    color: var(--brand-slate);
}

.process-flow__nav a[aria-current] {
    color: var(--brand-slate);
    border-color: #ffffff80;
    background: var(--bg-base);
    box-shadow: -4px -4px 12px #ffffff80, 4px 4px 12px #1f407c26;
}

.process-flow__nav a.is-complete {
    color: var(--brand-slate);
}

.process-start {
    display: inline-flex;
    gap: var(--space-6);
    margin-top: 28px;
    color: var(--brand-slate);
    font-weight: 600;
    text-decoration: none;
}

.process-step {
    display: flex;
    align-items: center;
}

.process-step__card {
    width: 100%;
    border-radius: var(--radius-panel);
    background: #d1dcdf05;
    box-shadow: 4px 5px 12px rgb(34 51 62 / 0.12000000), -4px -4px 12px #ffffff70;
}

.process-step.is-active .process-step__card {
    opacity: 1;
    transform: scale(1);
    border-color: var(--brand-slate);
}

.process-step__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    color: var(--collection-muted);
    font-size: 13px;
    letter-spacing: .08em;
}

.process-step__icon {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: var(--process-accent);
    box-shadow: inset 4px 4px 10px #1f407c20, inset -4px -4px 10px #ffffff90;
}

.process-step__icon svg {
    width: 34px;
    height: 34px;
    stroke-width: 1.5;
}

.process-step p {
    font-size: 18px;
    line-height: 1.65;
    margin: 0;
}

.process-flow a:focus-visible {
    outline: 2px solid var(--brand-slate);
    outline-offset: 4px;
}

@media screen and (max-width: 767px) {
    .process-flow {
        grid-template-columns: 1fr;
        padding: var(--space-10) var(--space-6) var(--space-15);
        gap: var(--space-4);
    }
    .process-flow__intro {
        position: relative;
        top: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .process-step__card {
        transition: none;
        transform: none;
        opacity: 1;
    }
    .process-flow__nav a {
        transition: none;
    }
}

/* Compact process stack, with emphasis reserved for the active card. */
.process-flow {
    gap: clamp(24px, 4vw, 64px);
    padding-bottom: var(--space-15);
}

.process-flow__art {
    display: block;
    width: min(100%, 260px);
    height: 220px;
    object-fit: contain;
    margin: var(--space-3) 0 var(--space-6);
}

.process-flow__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.process-flow__nav a {
    gap: 5px;
    padding: 3px 0;
    border: 0;
    border-radius: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #222;
}

.process-flow__nav a span {
    font-size: 12px;
    color: inherit;
}

.process-flow__nav a[aria-current], .process-flow__nav a.is-complete {
    color: #111;
    box-shadow: none;
    background: transparent;
}

.process-flow__nav a[aria-current] {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.process-flow__nav a + a::before {
    content: "/";
    color: var(--collection-muted);
    margin-right: 5px;
}

.process-flow .process-start {
    display: flex;
    margin-top: var(--space-6);
    gap: 0;
}

.process-flow__steps {
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.process-step {
    min-height: 0;
    padding: 0;
    scroll-margin-top: 150px;
}

.process-step__card {
    padding: 22px 26px;
    opacity: .4;
    transform: none;
    scale: .94;
    transform-origin: center;
    transition: opacity .35s ease-out, scale .35s ease-out, border-color .35s ease-out;
}

.process-step.is-active .process-step__card {
    opacity: 1;
    transform: none;
    scale: 1;
}

.process-step__icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
}

.process-step__icon svg {
    width: 25px;
    height: 25px;
}

.process-step p {
    font-size: 16px;
    line-height: 1.5;
}

@media screen and (max-width: 767px) {
    .process-flow__art {
        width: 180px;
        height: 160px;
    }
    .process-step {
        min-height: 0;
        padding: 0;
    }
    .process-flow__steps {
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .process-step__card {
        transition: none;
    }
}

/* Connected process thread with a sticky illustration alongside it. */
.process-flow {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
}

.process-flow__left {
    min-width: 0;
}

.process-flow__left > h2 {
    margin: 0 0 36px;
}

.process-flow__steps {
    position: relative;
    padding-left: var(--space-8);
    gap: 18px;
}

.process-flow__steps::before {
    content: "";
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    width: 1px;
    background: var(--border-col);
}

.process-step {
    position: relative;
}

.process-step::before {
    content: "";
    position: absolute;
    left: -32px;
    top: 40px;
    width: 32px;
    height: 1px;
    background: var(--border-col);
}

.process-step::after {
    content: "";
    position: absolute;
    left: -36px;
    top: 36px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--brand-slate);
    border-radius: 50%;
    background: var(--bg-base);
}

.process-step.is-active::after {
    background: var(--brand-slate);
}

.process-step__card {
    transform-origin: left center;
}

.process-flow__visual {
    position: sticky;
    top: 100px;
    height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -27vh max(-5vw,-50px) -27vh;
    z-index: 3;
}

.process-flow__visual .process-flow__art {
    width: 100%;
    height: auto;
    max-height: 75vh;
    margin: 0;
    object-fit: contain;
}

.process-flow__action {
    margin: var(--space-3) 0 0 var(--space-8);
}

@media screen and (max-width: 991px) {
    .process-flow {
        grid-template-columns: 1fr;
        padding: 70px var(--space-20);
    }
    .process-flow__visual {
        display: none;
    }
    .process-step__card, .process-step.is-active .process-step__card {
        opacity: 1;
        scale: 1;
        transform: none;
        transition: none;
        border-color: #ffffff80;
    }
}

/* Icons form the nodes of the connecting thread. */
.process-flow__steps {
    padding-left: var(--space-16);
}

.process-flow__steps::before {
    left: 24px;
    top: 48px;
    bottom: 48px;
}

.process-step::before {
    left: -40px;
    top: 48px;
    width: 40px;
}

.process-step::after {
    content: none;
}

.process-step > .process-step__icon {
    position: absolute;
    z-index: 1;
    left: -64px;
    top: 24px;
    width: 48px;
    height: 48px;
    background: var(--bg-base);
    border-radius: 50%;
    transition: all .3s;
}

.process-step__card,
.process-step.is-active .process-step__card {
    border: 1px solid var(--border-col);
    border-top-color: var(--ss-prism-border-top);
}

.process-flow__action {
    margin-left: var(--space-16);
}

@media screen and (max-width: 991px) {
    .process-step__card, .process-step.is-active .process-step__card {
        border: 1px solid var(--border-col);
        border-top-color: var(--ss-prism-border-top);
    }
}

/* Revealed steps retain their size and opacity as the next step activates. */
.process-step.is-revealed .process-step__card {
    opacity: 1;
    scale: 1;
    transform: none;
}

@media screen and (min-width: 992px) {
    .process-step.is-active > .process-step__icon {
        color: var(--process-accent);
        box-shadow: inset 3px 3px 8px #1f407c26, inset -3px -3px 8px #ffffff90, 0 0 0 2px var(--base-clr);
    }
}

@media screen and (min-width: 992px) {
    .process-flow__steps::before {
        bottom: auto;
        height: var(--thread-length, calc(100% - 96px));
    }
    .process-flow__steps::after {
        content: "";
        position: absolute;
        left: 24px;
        top: 48px;
        width: 2px;
        height: var(--thread-progress, 0px);
        background: var(--process-accent);
        pointer-events: none;
    }
    .process-step.is-revealed::before {
        background: var(--process-accent);
    }
    .process-step.is-revealed > .process-step__icon {
        color: white;
        background: var(--process-accent);
        box-shadow: inset 2px 2px 5px #0a294633, inset -2px -2px 5px #ffffff30;
    }
}

@media screen and (min-width: 992px) {
    .div-block-173.process-flow__action {
        justify-content: flex-start;
        text-align: left;
    }
}

@media screen and (max-width: 991px) {
    .process-flow__steps {
        margin-left: 0;
    }
}

/* Open layout for the reasons-to-choose section; preserve its globe and CTA. */
.why-choose {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
}

.why-choose .heading-17,
.why-choose .heading-23 {
    color: var(--brand-slate);
    text-shadow: none;
}

.why-choose .paragraph-11 {
    color: #334d66;
    text-shadow: none;
}

/* Preserve the final full-width CTA after stylesheet recovery. */
.team-detail__cta {
    border: 0;
    border-top: 1px solid var(--border-col);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.team-detail__cta-link {
    gap: var(--space-2);
}

.team-detail__cta-link .team-icon {
    margin-right: -8px;
}

/* Navigation layout from Webflow utils, published September 10, 2026. */
.site-nav-drawer .link-block-10:hover {
    background-image: initial;
}

.site-nav-drawer .link-block-10.actv-link-dd {
    padding-right: initial;
}

.site-nav-drawer .link-block-10.actv-link-dd:hover {
    background-image: initial;
}

.site-nav-drawer .div-block-220 {
    pointer-events: initial;
}

.site-nav-drawer .inner-links-cont {
    inset: initial;
    position: initial;
}

@media screen and (max-width: 991px) {
    .site-nav-drawer .btn_overlay.high_pros {
        opacity: initial;
    }
    .site-nav-drawer .btn_overlay.high_pros.dark.review-blurr {
        box-shadow: initial;
        filter: initial;
        outline: initial;
        outline-offset: initial;
        transition: initial;
    }
    .site-nav-drawer .container-2 {
        border-style: initial;
        padding-top: initial;
    }
    .site-nav-drawer .hholder-cnt-nav {
        flex-flow: initial;
        grid-column-gap: initial;
        grid-row-gap: initial;
    }
    .site-nav-drawer .div-block-217 {
        flex: initial;
    }
    .site-nav-drawer .div-block-219 {
        align-items: initial;
        background-color: initial;
        border-radius: initial;
        flex-flow: initial;
        grid-column-gap: initial;
        grid-row-gap: initial;
        justify-content: initial;
        max-width: initial;
        min-width: initial;
        order: initial;
        padding: initial;
        text-align: initial;
    }
    .site-nav-drawer .div-block-220 {
        flex: initial;
        margin-left: initial;
        min-width: initial;
    }
    .site-nav-drawer .text-block-73 {
        flex: initial;
        width: initial;
    }
    .site-nav-drawer .text-block-74 {
        align-self: initial;
        flex: initial;
        margin-bottom: initial;
        width: initial;
    }
    .site-nav-drawer .div-block-221 {
        align-self: initial;
        flex: initial;
        grid-column-gap: initial;
        grid-row-gap: initial;
        padding-left: initial;
        padding-right: initial;
    }
    .site-nav-drawer .text-block-76 {
        font-size: initial;
    }
    .site-nav-drawer .div-block-222 {
        align-items: initial;
        align-self: initial;
        flex: initial;
        justify-content: initial;
        margin-top: initial;
        padding-bottom: initial;
        padding-top: initial;
    }
    .site-nav-drawer .text-block-78 {
        font-size: initial;
        line-height: initial;
        max-width: initial;
    }
    .site-nav-drawer .inner-links-cont {
        align-items: initial;
        flex: initial;
        flex-flow: initial;
        height: initial;
        justify-content: initial;
        left: initial;
        right: initial;
    }
    .site-nav-drawer .link-block-12 {
        font-size: initial;
        padding: initial;
    }
    .site-nav-drawer .link.sm {
        font-size: initial;
    }
    .site-nav-drawer .div-block-224 {
        padding: initial;
    }
}

@media screen and (max-width: 767px) {
    .site-nav-drawer .div-block-217 {
        width: initial;
    }
    .site-nav-drawer .link-block-10.inner-no-pad {
        display: initial;
    }
    .site-nav-drawer .link-block-10.actv-link-dd {
        background-color: initial;
        flex-flow: initial;
        margin-left: initial;
        padding: initial;
    }
    .site-nav-drawer .div-block-218 {
        display: initial;
    }
    .site-nav-drawer .div-block-220 {
        align-items: initial;
        background-color: initial;
        border-radius: initial;
        box-shadow: initial;
        display: initial;
        flex-flow: initial;
        justify-content: initial;
        min-height: initial;
        min-width: initial;
        padding: initial;
        position: initial;
        top: initial;
        z-index: initial;
    }
    .site-nav-drawer .div-block-221 {
        padding-bottom: initial;
        padding-top: initial;
    }
    .site-nav-drawer .text-block-78 {
        font-size: initial;
        line-height: initial;
        text-align: initial;
    }
    .site-nav-drawer .inner-links-cont {
        align-self: initial;
        background-color: initial;
        border: initial;
        grid-row-gap: initial;
        height: initial;
        margin-left: initial;
        margin-right: initial;
        padding: initial;
        position: initial;
        right: initial;
        top: initial;
    }
    .site-nav-drawer .link-block-12 {
        padding-bottom: initial;
        padding-top: initial;
    }
    .site-nav-drawer .text-block-80 {
        font-weight: initial;
    }
    .site-nav-drawer .link {
        color: initial;
        font-size: initial;
        margin-left: initial;
        padding: initial;
        text-transform: initial;
    }
}

@media screen and (max-width: 479px) {
    .site-nav-drawer .btn_overlay.high_pros.dark.review-blurr {
        outline: initial;
        outline-offset: initial;
    }
    .site-nav-drawer .div-block-217 {
        align-items: initial;
        flex: initial;
        justify-content: initial;
        min-width: initial;
        padding-left: initial;
    }
    .site-nav-drawer .div-block-219 {
        border-radius: initial;
        box-shadow: initial;
        grid-column-gap: initial;
        grid-row-gap: initial;
        padding: initial;
    }
    .site-nav-drawer .text-block-73 {
        font-weight: initial;
    }
    .site-nav-drawer .text-block-74 {
        font-size: initial;
        font-weight: initial;
    }
    .site-nav-drawer .text-block-75 {
        font-size: initial;
    }
    .site-nav-drawer .div-block-221 {
        align-items: initial;
        color: initial;
        filter: initial;
        justify-content: initial;
        padding-right: initial;
        text-shadow: initial;
    }
    .site-nav-drawer .text-block-76 {
        font-size: initial;
        line-height: initial;
        margin-top: initial;
    }
    .site-nav-drawer .text-block-77 {
        font-size: initial;
        line-height: initial;
    }
    .site-nav-drawer .div-block-222 {
        padding: initial;
    }
    .site-nav-drawer .inner-links-cont {
        border: initial;
        margin-left: initial;
        margin-right: initial;
        padding: initial;
    }
    .site-nav-drawer .link-block-12 {
        min-width: initial;
    }
}

.site-nav-drawer .btn_overlay {
    opacity: .15;
    border: 4px solid #fffc;
    border-color: #fffc #fffc #000 #000;
    border-radius: 80px;
    position: absolute;
    inset: 0%;
}

.site-nav-drawer .btn_overlay.high_pros {
    z-index: 0;
    opacity: .43;
    filter: blur(2px);
    pointer-events: none;
    border-style: solid;
    border-color: #fff0;
    border-radius: 31px;
    transition: opacity .15s ease-in-out;
    box-shadow: -7px 12px 18px #304f6345, 8px -6px 15px #fff;
}

.site-nav-drawer .btn_overlay.high_pros.dark {
    z-index: -1;
    border-radius: 48px;
    box-shadow: -7px 12px 18px #00000075, 8px -6px 15px #ffffff30;
}

.site-nav-drawer .btn_overlay.high_pros.dark.review-blurr {
    box-shadow: -7px 12px 18px #00000075, 8px -6px 15px #ffffffa3;
}

.site-nav-drawer .btn_overlay.high_pros.dark.cor-bvl {
    opacity: .63;
    background-color: var(--carousel-surface);
}

.site-nav-drawer .btn_overlay.high_pros.dark.in-clr-af {
    box-shadow: -7px 12px 18px #20445a96, 8px -6px 15px #ffffffdb;
}

.site-nav-drawer .section-3 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

.site-nav-drawer .container-2 {
    background-color: var(--bg-base);
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    max-width: 1600px;
    padding: var(--space-16) 34px 34px;
    box-shadow: 0 3px 5px #4788b629;
}

.site-nav-drawer .hholder-cnt-nav {
    grid-column-gap: var(--space-5);
    grid-row-gap: var(--space-5);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1.5fr 1fr;
    grid-auto-columns: 1fr;
    display: flex;
    position: relative;
}

.site-nav-drawer .div-block-217 {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    padding: 18px 0 18px 10px;
    display: flex;
}

.site-nav-drawer .link-block-10 {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    color: var(--ftrbg);
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: var(--radius-md);
    padding: 4px var(--space-3);
    font-size: 1.5rem;
    font-weight: 300;
    text-decoration: none;
    transition: all .2s;
    display: flex;
    box-shadow: 0 0 #0000;
}

.site-nav-drawer .link-block-10:hover {
    color: var(--brand-slate);
    background-color: #dae9ee;
    box-shadow: -4px 3px 4px #51667c2e;
}

.site-nav-drawer .link-block-10.w--current {
    background-color: #fff3;
}

.site-nav-drawer .link-block-10.inner-no-pad {
    justify-content: flex-start;
    align-items: center;
    padding: 0;
}

.site-nav-drawer .link-block-10.inner-no-pad:hover {
    box-shadow: none;
    background-image: linear-gradient(135deg, #eff7fa, #dae9ee00 71%);
    padding-left: var(--space-2);
}

.site-nav-drawer .link-block-10.actv-link-dd {
    background-color: #dae9ee00;
    margin-left: -14px;
    box-shadow: -1px 2px 2px #0000;
}

.site-nav-drawer .link-block-10.actv-link-dd:hover {
    background-color: #dae9ee;
    box-shadow: -4px 2px 3px #00000017;
    padding-right: 10px;
}

.site-nav-drawer .link-block-10.lk-right {
    outline-offset: -2px;
    background-color: #ffffff2b;
    outline: 3px solid #d1dcdf91;
    align-self: flex-end;
    padding: var(--space-2) var(--space-4);
    box-shadow: 3px -3px 9px #ffffff54, -3px 3px 3px #0000002b;
}

.site-nav-drawer .link-block-10.lk-right:hover {
    background-color: #ffffff78;
}

.site-nav-drawer .div-block-218 {
    z-index: -1;
    filter: blur(2px);
    pointer-events: none;
    border-radius: 20px;
    flex: 1;
    justify-content: center;
    align-items: stretch;
    position: absolute;
    inset: -1%;
    box-shadow: inset -2px 2px 5px #10447533, inset 2px -1px 9px #ffffffad;
}

.site-nav-drawer .div-block-219 {
    grid-column-gap: var(--space-2);
    grid-row-gap: var(--space-2);
    flex-flow: column;
    flex: 1;
    justify-content: center;
    align-self: stretch;
    align-items: flex-start;
    min-width: 300px;
    max-width: 400px;
    padding: 0;
    display: flex;
}

.site-nav-drawer .div-block-220 {
    z-index: 1;
    flex: 1;
    margin-left: var(--space-5);
    padding: 18px;
    position: relative;
}

.site-nav-drawer .text-block-73 {
    letter-spacing: 4px;
    flex: 1;
    justify-content: center;
    align-items: flex-end;
    font-size: 12px;
    line-height: 1.2;
    display: flex;
}

.site-nav-drawer .text-block-74 {
    color: #7487a0;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.2;
}

.site-nav-drawer .text-block-75 {
    font-size: min(90px, 7vw);
    font-weight: 500;
    line-height: 1;
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease;
}

.site-nav-drawer .div-block-221 {
    filter: blur(2px);
    color: var(--bg-hero);
    -webkit-text-stroke-width: 0px;
    text-shadow: 2px -2px 1px #ffffff7a, -2px 2px #455c708a;
    flex: 1;
    justify-content: space-between;
    align-self: stretch;
    align-items: center;
    font-family: Oswald, sans-serif;
    font-weight: 700;
    display: flex;
}

.site-nav-drawer .text-block-76 {
    text-align: center;
    letter-spacing: 4px;
    text-transform: uppercase;
    align-self: center;
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
    position: relative;
    top: -8%;
}

.site-nav-drawer .text-block-77 {
    font-size: min(6vw, 70px);
    font-weight: 400;
    line-height: 1;
}

.site-nav-drawer .div-block-222 {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    outline-offset: 0px;
    border-radius: 13px;
    outline: 1px dashed #fff6;
    flex: 1;
    justify-content: flex-start;
    align-self: stretch;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    padding: var(--space-3) var(--space-5);
    display: flex;
}

.site-nav-drawer .link-block-11 {
    z-index: 1;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    padding: var(--space-3);
    display: flex;
    position: relative;
}

.site-nav-drawer .link-block-11:hover {
    background-color: #79baff5e;
    border-radius: 40px;
}

.site-nav-drawer .image-30 {
    aspect-ratio: 1;
    opacity: .65;
    width: 100%;
    height: 100%;
}

.site-nav-drawer .text-block-78 {
    flex: 1;
    max-width: 298px;
    font-size: min(16px, 1.2vw);
    line-height: 1.2;
}

.site-nav-drawer .inner-links-cont {
    z-index: 1;
    grid-column-gap: 14px;
    grid-row-gap: 10px;
    background-color: var(--bg-base);
    border-radius: 20px;
    flex-flow: column;
    justify-content: flex-start;
    align-self: stretch;
    align-items: flex-start;
    height: 100%;
    padding: 0;
    display: flex;
}

.site-nav-drawer .link-block-12 {
    color: #224155e0;
    text-transform: none;
    background-color: #0000;
    border: 1px solid #0000001a;
    border-radius: 10px;
    flex: 1;
    justify-content: flex-start;
    align-self: stretch;
    align-items: center;
    min-width: 40%;
    margin: 3px;
    padding: var(--space-2) var(--space-3);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .3s, color .3s;
    display: flex;
    box-shadow: -2px 4px 5px #426e9214;
}

.site-nav-drawer .link-block-12:hover {
    color: var(--brand-slate);
    background-color: #ffffff61;
}

.site-nav-drawer .div-block-223 {
    flex-flow: wrap;
    flex: 0 auto;
    width: 100%;
    display: flex;
}

.site-nav-drawer .link {
    text-transform: none;
    border-radius: 10px;
    margin-left: auto;
    text-decoration: none;
}

.site-nav-drawer .link:hover {
    background-color: #ffffff2e;
}

.site-nav-drawer .link.sm {
    color: #385465c4;
    text-align: left;
    text-shadow: 0 0 #fff0;
    border-radius: 10px;
    flex: 0 auto;
    align-self: flex-start;
    width: 100%;
    padding: 10px;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.3;
    transition: all .2s;
}

.site-nav-drawer .link.sm:hover {
    color: var(--brand-slate);
    text-shadow: 2px -1px 3px #ffffffe6;
    background-color: #fff0;
}

.site-nav-drawer .div-block-224 {
    background-color: #dee7e900;
    border-radius: var(--radius-md);
    flex-flow: column;
    flex: 1;
    justify-content: space-around;
    min-width: 200px;
    padding: 0 var(--space-3) var(--space-3);
    transition: all .5s;
    display: flex;
}

.site-nav-drawer .div-block-224:hover {
    background-color: #dee7e98c;
}

.site-nav-drawer .div-block-226 {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
    background-color: #0000;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 12px;
    margin-left: -3px;
    margin-right: 3px;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    display: flex;
    position: relative;
}

.site-nav-drawer .div-block-227 {
    aspect-ratio: 1;
    background-color: #5898ff;
    border-radius: 1px;
    width: 4px;
}

.site-nav-drawer .popup-abus {
    z-index: 1;
    background-color: #daeaee;
    border-radius: 20px 2px 20px 20px;
    width: auto;
    padding: 6px var(--space-3) var(--space-3);
    position: absolute;
    inset: -4px 0% auto auto;
    box-shadow: -3px 3px 3px #1a76b812;
}

.site-nav-drawer .div-block-228 {
    grid-column-gap: var(--space-2);
    grid-row-gap: var(--space-2);
    flex-flow: wrap;
    margin-top: 6px;
    display: flex;
}

.site-nav-drawer .link-block-13 {
    outline-offset: 0px;
    color: var(--ftrbg);
    text-transform: none;
    border-radius: var(--radius-sm);
    outline: 1px solid #186bdf66;
    padding: 4px var(--space-3);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
}

.site-nav-drawer .link-block-13:hover {
    background-color: #ffffff8a;
}

.site-nav-drawer .text-block-81 {
    color: var(--brand-slate);
    padding: 6px 5px;
    font-size: 1rem;
    font-weight: 600;
}

@media screen and (max-width: 991px) {
    .site-nav-drawer .btn_overlay.high_pros {
        opacity: 1;
    }
    .site-nav-drawer .btn_overlay.high_pros.dark.review-blurr {
        box-shadow: none;
        filter: none;
        outline-offset: 0px;
        outline: 3px solid #0a29461f;
        transition: none;
    }
    .site-nav-drawer .container-2 {
        border-style: none;
        padding-top: 100px;
    }
    .site-nav-drawer .hholder-cnt-nav {
        grid-column-gap: 30px;
        grid-row-gap: 30px;
        flex-flow: wrap;
    }
    .site-nav-drawer .div-block-217 {
        flex: 0 auto;
        padding-left: 0;
    }
    .site-nav-drawer .div-block-219 {
        grid-column-gap: var(--space-3);
        grid-row-gap: var(--space-3);
        text-align: center;
        background-color: #c7d2d5;
        border-radius: 14px;
        flex-flow: wrap;
        order: 9999;
        justify-content: center;
        align-items: center;
        min-width: 50%;
        max-width: 100%;
        padding: var(--space-10);
    }
    .site-nav-drawer .div-block-220 {
        flex: 1;
        min-width: 60%;
        margin-left: 0;
    }
    .site-nav-drawer .text-block-73 {
        flex: 0 auto;
        width: 100%;
    }
    .site-nav-drawer .text-block-74 {
        flex: 0 auto;
        align-self: center;
        width: 100%;
        margin-bottom: 10px;
    }
    .site-nav-drawer .div-block-221 {
        grid-column-gap: var(--space-2);
        grid-row-gap: var(--space-2);
        flex: 0 auto;
        align-self: stretch;
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
    .site-nav-drawer .text-block-76 {
        font-size: 30px;
    }
    .site-nav-drawer .div-block-222 {
        flex: 1;
        justify-content: center;
        align-self: center;
        align-items: center;
        margin-top: 0;
        padding-top: var(--space-5);
        padding-bottom: var(--space-5);
    }
    .site-nav-drawer .text-block-78 {
        max-width: none;
        font-size: 14px;
        line-height: 1.3;
    }
    .site-nav-drawer .inner-links-cont {
        flex-flow: column;
        flex: 1;
        justify-content: flex-start;
        align-items: flex-start;
        left: auto;
    }
    .site-nav-drawer .link-block-12 {
        padding: 4px var(--space-3);
        font-size: .8rem;
    }
    .site-nav-drawer .link.sm {
        font-size: 1rem;
    }
    .site-nav-drawer .div-block-224 {
        padding: 4px;
    }
}

@media screen and (max-width: 767px) {
    .site-nav-drawer .hholder-cnt-nav {
        grid-column-gap: var(--space-10);
        grid-row-gap: var(--space-10);
    }
    .site-nav-drawer .div-block-217 {
        order: -9999;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .site-nav-drawer .link-block-10.inner-no-pad {
        display: none;
    }
    .site-nav-drawer .link-block-10.actv-link-dd {
        box-shadow: none;
        background-color: #bcd2d800;
        flex-flow: column;
        margin-left: 0;
        padding: 0 var(--space-3);
        transition: none;
    }
    .site-nav-drawer .link-block-10.lk-right {
        align-self: flex-start;
    }
    .site-nav-drawer .div-block-218 {
        display: none;
        box-shadow: inset -2px 2px 5px #10447533, inset 2px -1px 9px #ffffffad;
    }
    .site-nav-drawer .div-block-219 {
        order: 9999;
    }
    .site-nav-drawer .div-block-220 {
        z-index: 3;
        box-shadow: none;
        background-color: var(--bg-base);
        border-radius: 10px;
        flex-flow: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: -40px;
        padding: 0;
        position: relative;
    }
    .site-nav-drawer .div-block-221 {
        padding-top: var(--space-2);
        padding-bottom: var(--space-3);
    }
    .site-nav-drawer .text-block-78 {
        text-align: left;
        font-size: 14px;
        line-height: 1.2;
    }
    .site-nav-drawer .inner-links-cont {
        grid-row-gap: 4px;
        background-color: #fff0;
        border: 1px dashed #ffffff78;
        align-self: stretch;
        height: auto;
        margin-left: 0;
        margin-right: 0;
        padding: var(--space-4) var(--space-4) var(--space-6);
        position: relative;
        top: auto;
        right: auto;
    }
    .site-nav-drawer .link-block-12 {
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }
    .site-nav-drawer .text-block-80 {
        font-weight: 400;
    }
    .site-nav-drawer .link {
        color: var(--ftrbg);
        text-transform: uppercase;
        margin-left: 0;
        padding: 4px var(--space-2);
        font-size: 1.5rem;
    }
    .site-nav-drawer .div-block-224 {
        min-width: auto;
    }
    .site-nav-drawer .div-block-226 {
        order: 9999;
        width: auto;
        margin-left: auto;
    }
    .site-nav-drawer .div-block-227 {
        display: none;
    }
    .site-nav-drawer .popup-abus {
        box-shadow: none;
        background-color: #daeaee7a;
        border-radius: 9px;
        flex-flow: wrap;
        display: flex;
        position: relative;
        inset: auto;
    }
    .site-nav-drawer .text-block-82 {
        align-self: flex-start;
    }
}

@media screen and (max-width: 479px) {
    .site-nav-drawer .btn_overlay.high_pros.dark.review-blurr {
        outline-offset: 0px;
        outline: 3px #0a29461f;
    }
    .site-nav-drawer .div-block-217 {
        flex: 1;
        justify-content: center;
        align-items: flex-start;
        min-width: 200px;
        margin-left: -15px;
        padding-left: 0;
    }
    .site-nav-drawer .link-block-10.actv-link-dd:hover {
        box-shadow: none;
        background-color: #dae9ee00;
    }
    .site-nav-drawer .link-block-10.lk-right {
        box-shadow: none;
        background-color: #fff0;
        outline-color: #d1dcdf00;
        align-self: flex-start;
        padding: 4px var(--space-3);
    }
    .site-nav-drawer .div-block-219 {
        grid-column-gap: 4px;
        grid-row-gap: 4px;
        border-radius: var(--radius-panel);
        max-width: none;
        margin-bottom: -20px;
        margin-left: -20px;
        margin-right: -20px;
        padding: var(--space-5);
        box-shadow: 0 3px 3px #23283626;
    }
    .site-nav-drawer .text-block-73 {
        font-weight: 600;
    }
    .site-nav-drawer .text-block-74 {
        font-size: 20px;
        font-weight: 400;
    }
    .site-nav-drawer .text-block-75 {
        font-size: 60px;
    }
    .site-nav-drawer .div-block-221 {
        filter: none;
        color: #658ca136;
        text-shadow: 1px -1px 1px #ffffff7a, -1px 1px #455c708a;
        justify-content: space-between;
        align-items: center;
        padding-right: 10px;
    }
    .site-nav-drawer .text-block-76 {
        margin-top: 4px;
        font-size: 24px;
        line-height: 1.1;
    }
    .site-nav-drawer .text-block-77 {
        font-size: 40px;
        line-height: 1;
    }
    .site-nav-drawer .div-block-222 {
        padding: var(--space-3);
    }
    .site-nav-drawer .inner-links-cont {
        z-index: 2;
        border: 1px dashed #fff;
        border-top-style: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-top: -16px;
        margin-left: -23px;
        margin-right: -23px;
        padding: 0 10px 10px;
    }
    .site-nav-drawer .link-block-12 {
        min-width: 100px;
    }
    .site-nav-drawer .popup-abus {
        padding: var(--space-2);
    }
    .process-flow__action {
        margin-left: 0;
    }
    .process-flow__action {
        margin: var(--space-3) 0 var(--space-8) 0;
    }
    .process-step__card {
        padding: var(--space-5) 18px;
    }
}

.site-nav-about {
    position: relative;
}

.site-nav-about > .site-nav-dropdown__trigger {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
    text-transform: inherit;
}

.site-nav-about .popup-abus {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(.96);
    transform-origin: top right;
    transition: opacity .2s ease, transform .28s ease, visibility 0s linear .28s;
}

.site-nav-about:focus-within .popup-abus, .site-nav-about.is-expanded .popup-abus {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
}

@media (hover: hover) {
    .site-nav-about:hover .popup-abus {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition-delay: 0s;
    }
}

@media (max-width: 767px) {
    .site-nav-about:not(:focus-within):not(.is-expanded) .popup-abus {
        display: none;
    }
    .process-flow {
        grid-template-columns: 1fr;
        padding: 0 var(--space-5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav-about .popup-abus {
        transition: none;
    }
}

/* Tile ripple motion adapted from the reference navigation. */
.site-nav-drawer {
    transition: visibility 0s linear .86s;
}

.site-nav-drawer__panel, .site-nav-drawer.is-open .site-nav-drawer__panel {
    transform: none;
    opacity: 1;
    transition: none;
}

.site-nav-drawer__container {
    position: relative;
}

.site-nav-drawer__container:not(.ssm-menu-content-ready) {
    background-color: transparent;
    box-shadow: none;
}

.site-nav-drawer__container > .hholder-cnt-nav {
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0,14px,0);
    transition: opacity .34s ease, transform .56s cubic-bezier(.16,1,.3,1), visibility 0s linear .34s;
}

.site-nav-drawer__container.ssm-menu-content-ready > .hholder-cnt-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

.ssm-menu-content-ready > .ssm-menu-ripple {
    visibility: hidden;
}

.ssm-menu-ripple {
    z-index: 0;
    pointer-events: none;
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    perspective: 1100px;
    perspective-origin: var(--ripple-origin-x, 92%) var(--ripple-origin-y, 28px);
    transform-style: preserve-3d;
    contain: layout paint;
}

.ssm-menu-ripple__tile {
    --ripple-delay: 0ms;
    --ripple-close-delay: 0ms;
    --ripple-pull-x: 0px;
    --ripple-pull-y: 0px;
    --ripple-tilt-x: -34deg;
    --ripple-tilt-y: -53deg;
    --ripple-flip-z: 0deg;
    --ripple-light: 98%;
    position: absolute;
    perspective: 620px;
    perspective-origin: center;
    transform-style: preserve-3d;
}

.ssm-menu-ripple__face {
    backface-visibility: hidden;
    position: absolute;
    inset: 0;
    opacity: 0;
    background: var(--bg-base);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 7px 15px rgba(24, 72, 100, .11);
    transform: translate3d(var(--ripple-pull-x), var(--ripple-pull-y), 54px)
    rotateX(var(--ripple-tilt-x))
    rotateY(var(--ripple-tilt-y))
    rotateZ(var(--ripple-flip-z))
    scale(.02);
    transform-origin: center;
    transform-style: preserve-3d;
}

.ssm-menu-ripple-active .ssm-menu-ripple__face {
    will-change: transform, opacity;
    animation: ssm-menu-tile-in 650ms cubic-bezier(.2, .74, .18, 1) var(--ripple-delay) both;
}

.ssm-menu-ripple-active .ssm-menu-ripple::after {
    opacity: 1;
    transition-delay: .78s;
}

.ssm-menu-closing .ssm-menu-ripple__face {
    opacity: 1;
    border-radius: 0;
    box-shadow: none;
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1.025);
}

.ssm-menu-closing-active .ssm-menu-ripple__face {
    will-change: transform, opacity;
    animation: ssm-menu-tile-out 560ms cubic-bezier(.58, 0, .8, .28) var(--ripple-close-delay) both;
}

.ssm-menu-closing .ssm-menu-ripple::after {
    opacity: 0;
    transition-delay: .08s;
}

@keyframes ssm-menu-tile-in {
    0% {
        background-color: #fff;
        opacity: 0;
        border-radius: 50%;
        box-shadow: 0 7px 15px rgba(24, 72, 100, .11);
        transform: translate3d(var(--ripple-pull-x), var(--ripple-pull-y), 54px)
        rotateX(var(--ripple-tilt-x))
        rotateY(var(--ripple-tilt-y))
        rotateZ(var(--ripple-flip-z))
        scale(.02);
    }
    100% {
        background-color: var(--bg-base);
        opacity: 1;
        border-radius: 0;
        box-shadow: none;
        transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1.025);
    }
}

@keyframes ssm-menu-tile-out {
    0% {
        background-color: var(--bg-base);
        opacity: 1;
        border-radius: 0;
        box-shadow: none;
        transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1.025);
    }
    100% {
        background-color: #fff;
        opacity: 0;
        border-radius: 50%;
        box-shadow: 0 7px 15px rgba(24, 72, 100, .11);
        transform: translate3d(var(--ripple-pull-x), var(--ripple-pull-y), 54px)
        rotateX(var(--ripple-tilt-x))
        rotateY(var(--ripple-tilt-y))
        rotateZ(var(--ripple-flip-z))
        scale(.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav-drawer__container > .hholder-cnt-nav {
        transition: none;
        transform: none;
    }
    .ssm-menu-ripple__face {
        animation: none !important;
        opacity: 1;
        border-radius: 0;
        transform: none;
    }
}

/* Keep the About popup above the adjacent Services surface. */
.site-nav-drawer__links {
    position: relative;
    z-index: 4;
}

/* Consolidated HTML embed styles. Zero-specificity page scopes preserve the cascade. */

/* Originally embedded in: about, blogs, cms, development, gallery, portfolio, services */

/* Originally embedded in: about, blogs, cms, development, gallery, index, portfolio, services */
:where(html[data-site-page="about"],html[data-site-page="blogs"],html[data-site-page="cms"],html[data-site-page="development"],html[data-site-page="gallery"],html:is([data-site-page="index"], [data-site-page="utils"]),html[data-site-page="portfolio"],html[data-site-page="services"],html[data-site-page="faq"]) .tiled_bg_blur-af {
    mask-image: url(../images/source-select-blurr2-182c1ee7.avif);
    mask-size: 100% 100%;
    mask-repeat: none;
}

/* Originally embedded in: about, blogs, cms, development, gallery, index, portfolio, services */
:where(html[data-site-page="about"],html[data-site-page="blogs"],html[data-site-page="cms"],html[data-site-page="development"],html[data-site-page="gallery"],html:is([data-site-page="index"], [data-site-page="utils"]),html[data-site-page="portfolio"],html[data-site-page="services"],html[data-site-page="faq"],html[data-site-page="work-procedure"],html[data-site-page="team"],html[data-site-page="404"]) .af-grid-sys {
    --grid-line: rgba(151, 191, 230, 0.4);
    background-image: linear-gradient(var(--grid-line), var(--grid-line)),
    linear-gradient(var(--grid-line), var(--grid-line)),
    linear-gradient(var(--grid-line), var(--grid-line)),
    linear-gradient(var(--grid-line), var(--grid-line)),
    linear-gradient(var(--grid-line), var(--grid-line));
    background-size: 1px 100%,
    1px 100%,
    1px 100%,
    1px 100%,
    1px 100%;
    background-position: 10px 0,
    calc(10px + (100% - 20px) / 4) 0,
    calc(10px + (100% - 20px) * 2 / 4) 0,
    calc(10px + (100% - 20px) * 3 / 4) 0,
    calc(100% - 10px) 0;
    background-repeat: no-repeat;
}

/* Originally embedded in: about, blogs, cms, development, gallery, portfolio, services */
:where(html[data-site-page="about"],html[data-site-page="blogs"],html[data-site-page="cms"],html[data-site-page="development"],html[data-site-page="gallery"],html[data-site-page="portfolio"],html[data-site-page="services"]) .ssm-pixel-ripple-embed {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
}

:where(html[data-site-page="about"],html[data-site-page="blogs"],html[data-site-page="cms"],html[data-site-page="development"],html[data-site-page="gallery"],html[data-site-page="portfolio"],html[data-site-page="services"]) #ssmPixelRipple {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
    pointer-events: none;
}

/* Originally embedded in: about, blogs, cms, development, gallery, index, portfolio, services, team */
:where(html[data-site-page="about"],html[data-site-page="blogs"],html[data-site-page="cms"],html[data-site-page="development"],html[data-site-page="gallery"],html:is([data-site-page="index"], [data-site-page="utils"]),html[data-site-page="portfolio"],html[data-site-page="services"],html[data-site-page="team"]) .ssm_btn-2 .code-embed-43 .st0 path {
    transition: all .45s;
}

:where(html[data-site-page="about"],html[data-site-page="blogs"],html[data-site-page="cms"],html[data-site-page="development"],html[data-site-page="gallery"],html:is([data-site-page="index"], [data-site-page="utils"]),html[data-site-page="portfolio"],html[data-site-page="services"],html[data-site-page="team"]) .ssm_btn-2:hover .code-embed-43 {
    filter: drop-shadow(0 0 2px #3cc2ff);
}

:where(html[data-site-page="about"],html[data-site-page="blogs"],html[data-site-page="cms"],html[data-site-page="development"],html[data-site-page="gallery"],html:is([data-site-page="index"], [data-site-page="utils"]),html[data-site-page="portfolio"],html[data-site-page="services"],html[data-site-page="team"]) .st0 path {
    fill: #798a9c;
}

:where(html[data-site-page="about"],html[data-site-page="blogs"],html[data-site-page="cms"],html[data-site-page="development"],html[data-site-page="gallery"],html:is([data-site-page="index"], [data-site-page="utils"]),html[data-site-page="portfolio"],html[data-site-page="services"],html[data-site-page="team"]) .ssm_btn-2:hover .code-embed-43 .st0 path {
    fill: #3cc2ff;
}

:where(html[data-site-page="about"],html[data-site-page="blogs"],html[data-site-page="cms"],html[data-site-page="development"],html[data-site-page="gallery"],html:is([data-site-page="index"], [data-site-page="utils"]),html[data-site-page="portfolio"],html[data-site-page="services"],html[data-site-page="team"]) .ssm_btn-2:hover .code-embed-44 {
    opacity: .5;
}

/* Originally embedded in: index */
html:where(html:is([data-site-page="index"], [data-site-page="utils"])).w-mod-js:not(.w-mod-ix3) :is([data-wf-target*='["6a31696ec3d9fa272995fc17","45ec300e-de15-6545-5abb-8ddebe7db84e"]'], .black_hole_cont, .heading-2, .div-block-13, .div-block-11, .link-block, .div-block-24) {
    visibility: hidden !important;
}

/* Reveal the terrain's first frame independently of Webflow's full-page load.
Keep its original 300ms sine-out fade; ignore later inline IX opacity writes. */
html:is([data-site-page="index"], [data-site-page="utils"]) .black_a > .code-embed-6 {
    opacity: 0 !important;
    transition: opacity 300ms cubic-bezier(.39, .575, .565, 1);
}

html:is([data-site-page="index"], [data-site-page="utils"]) .black_a > .code-embed-6.is-terrain-ready {
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .black_a > .code-embed-6 {
        transition: none;
    }
}

/* Originally embedded in: index */
:where(html:is([data-site-page="index"], [data-site-page="utils"])) .ssm-terrain-embed {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 1px;
    overflow: hidden;
    background: transparent;
    isolation: isolate;
    pointer-events: none;
}

:where(html:is([data-site-page="index"], [data-site-page="utils"])) .ssm-terrain-embed canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Originally embedded in: index */
:where(html:is([data-site-page="index"], [data-site-page="utils"])) .div-block-20.top_one {
    z-index: 1;
    pointer-events: none;
    width: 33vw;
    height: 31vw;
    inset: 50% auto auto 49.5%;
    perspective: 900px;
}

:where(html:is([data-site-page="index"], [data-site-page="utils"])) .hero_img {
    z-index: 2;
    width: 31vw;
    min-width: 0;
    max-width: none;
    position: absolute;
    inset: 50% auto auto 50%;
    transform-origin: center;
    animation: hero-image-carousel 18s ease-in-out infinite;
    will-change: top, left, opacity, filter, transform;
}

:where(html:is([data-site-page="index"], [data-site-page="utils"])) .hero_img.next_img {
    z-index: 1;
    opacity: .12;
    filter: blur(10px) saturate(.8);
    top: 8%;
    left: 132%;
    transform: translate(-50%, -50%) scale(.42);
    animation-delay: -4.5s;
}

:where(html:is([data-site-page="index"], [data-site-page="utils"])) .hero_img.next_img.later_onn {
    z-index: 0;
    opacity: 0;
    top: 50%;
    left: 50%;
    animation-delay: -9s;
}

:where(html:is([data-site-page="index"], [data-site-page="utils"])) .hero_img.prev_img {
    z-index: 1;
    opacity: .12;
    filter: blur(10px) saturate(.8);
    top: 94%;
    left: -32%;
    transform: translate(-50%, -50%) scale(.42);
    animation-delay: -13.5s;
}

@keyframes hero-image-carousel {
    0% {
        z-index: 5;
        opacity: 1;
        filter: drop-shadow(-4px -2px 5px #3f628552) drop-shadow(3px 2px 4px #00eaff8a);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) translateZ(70px) scale(1) rotate(-1deg);
    }
    25% {
        z-index: 2;
        opacity: .12;
        filter: blur(10px) saturate(.8);
        top: 8%;
        left: 132%;
        transform: translate(-50%, -50%) translateZ(-90px) scale(.42) rotate(7deg);
    }
    50% {
        z-index: 0;
        opacity: 0;
        filter: blur(2px);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) translateZ(-160px) scale(.36) rotate(0);
    }
    75% {
        z-index: 2;
        opacity: .12;
        filter: blur(10px) saturate(.8);
        top: 94%;
        left: -32%;
        transform: translate(-50%, -50%) translateZ(-110px) scale(.42) rotate(-8deg);
    }
    100% {
        z-index: 5;
        opacity: 1;
        filter: drop-shadow(-4px -2px 5px #3f628552) drop-shadow(3px 2px 4px #00eaff8a);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) translateZ(70px) scale(1) rotate(-1deg);
    }
}

@media screen and (max-width: 767px) {
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) .div-block-20.top_one {
        width: min(96vw, 500px);
        height: min(74vw, 360px);
        inset: 40% auto auto 50%;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) .hero_img {
        width: clamp(260px, 78vw, 430px);
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) .hero_img {
        animation: none;
    }
}

/* Originally embedded in: index */
:where(html:is([data-site-page="index"], [data-site-page="utils"])) #webgl-shooting-stars {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

:where(html:is([data-site-page="index"], [data-site-page="utils"])) #webgl-shooting-stars canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Originally embedded in: index */
:where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service .cor-img-holder.ssm-artwork-swap {
    isolation: isolate;
    background-image: none;
}

/* Blend the prism into its own background plane beside the waves, never the 3D cards. */
html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service .ss-service-light {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--bg-base);
    background-image: url("../images/source-select-service-prism-light-7d77af67.avif");
    background-position: center;
    background-size: 110% auto;
    background-repeat: no-repeat;
    background-blend-mode: exclusion;
    mask-image: radial-gradient(ellipse at center, #000 45%, transparent 75%);
    opacity: .85;
}

html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service .image-26 {
    z-index: 0;
}

@media (max-width: 991px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service .ss-service-light {
        display: none;
    }
}

:where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service
.cor-img-holder.ssm-artwork-swap
.ssm-artwork-layer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    pointer-events: none;
    opacity: 0;
    filter: blur(14px) brightness(1.25);
    transform: translateY(14px) scale(0.96);
    transition: opacity 650ms ease,
    filter 800ms cubic-bezier(.2, .75, .2, 1),
    transform 800ms cubic-bezier(.2, .75, .2, 1);
}

:where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service
.cor-img-holder.ssm-artwork-swap
.ssm-artwork-layer.is-visible {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service
    .cor-img-holder.ssm-artwork-swap
    .ssm-artwork-layer {
        transition: none;
    }
}

/* Originally embedded in: index */
@media screen and (min-width: 992px) {
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d {
        --carousel-card-width: min(56vw, 720px);
        --carousel-card-height: min(34vw, 440px);
        --carousel-depth: min(42vw, 750px);
        --carousel-perspective: min(105vw, 1900px);
        --carousel-duration: 900ms;
        --carousel-ease: cubic-bezier(.22, .72, .18, 1);
        --content-depth: 18px;
        width: 100%;
        max-width: none;
        padding: 110px var(--space-8) 130px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        overflow: hidden;
        color: #f7fbff;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d .service-carousel {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 100%;
        min-height: var(--carousel-card-height);
        display: flex;
        justify-content: center;
        align-items: center;
        perspective: var(--carousel-perspective);
        perspective-origin: center;
        transform-style: preserve-3d;
        overflow: visible;
        outline: none;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d .service-carousel-track {
        --carousel-rotation: 0deg;
        --mobile-offset: 0%;
        position: relative;
        width: var(--carousel-card-width);
        height: var(--carousel-card-height);
        transform: translateZ(calc(var(--carousel-depth) * -1))
        rotateY(var(--carousel-rotation));
        transform-style: preserve-3d;
        transition: transform var(--carousel-duration) var(--carousel-ease);
        will-change: transform;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d .af-c {
        --slot-angle: 0deg;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: clamp(28px, 3vw, 46px);
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        color: var(--text-on-dark);
        border: 1px solid rgba(255, 255, 255, .27);
        transform: rotateY(var(--slot-angle))
        translateZ(var(--carousel-depth));
        transform-style: preserve-3d;
        backface-visibility: visible;
        transition: transform var(--carousel-duration) var(--carousel-ease),
        opacity 450ms ease,
        box-shadow 450ms ease;
        box-shadow: 0 28px 64px rgba(10, 41, 70, .18),
        inset 0 1px rgba(255, 255, 255, .16);
        overflow: visible;
        will-change: transform;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d .af-c:not(.current-af) {
        cursor: pointer;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d .af-c::before {
        content: none;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d .af-c::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d
    .af-c.back-af
    .div-block-17 {
        backface-visibility: hidden;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d .div-block-17 {
        position: relative;
        z-index: 1;
        display: flex;
        align-self: stretch;
        align-items: center;
        overflow: visible;
        transform: translateZ(var(--content-depth));
        transform-style: preserve-3d;
        will-change: transform;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d
    .div-block-17 > .w-richtext {
        position: relative;
        z-index: 3;
        transform-style: preserve-3d;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d .heading-5 {
        max-width: 12em;
        margin: 0 auto var(--space-3) 4px;
        font-size: clamp(2rem, 3vw, 2.8rem);
        font-weight: 300;
        line-height: .98;
        letter-spacing: -.025em;
        text-transform: uppercase;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d .paragraph-2 {
        max-width: 36em;
        margin-bottom: 0;
        color: var(--text-on-dark);
        font-size: 13px;
        line-height: 1.45;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d .image-3 {
        position: relative;
        z-index: 4;
        width: 122%;
        max-width: none;
        max-height: 410px;
        object-fit: contain;
        transform: translate3d(-7%, 2%, 0)
        scale(1.08);
        transform-origin: center;
        filter: drop-shadow(
        0 28px 32px
        rgba(7, 29, 48, .35)
        );
        transition: transform
        var(--carousel-duration)
        var(--carousel-ease);
        will-change: transform;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d .indicator-af {
        width: 0%;
        transform: none;
        transition: width 80ms linear;
        will-change: width;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d
    .service-carousel:focus-visible {
        outline: 2px solid var(--link-blue);
        outline-offset: 8px;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d .div-block-204 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 60%;
        aspect-ratio: 1;
        transform: translate3d(
        -50%,
        -50%,
        calc(var(--carousel-depth) * -1)
        );
        transform-style: preserve-3d;
        pointer-events: none;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d
    .service-carousel:not([data-carousel-ready="true"]) {
        position: relative;
        width: 100%;
        height: var(--carousel-card-height);
        min-height: var(--carousel-card-height);
        perspective: var(--carousel-perspective);
        perspective-origin: 50% 50%;
        transform-style: preserve-3d;
        visibility: visible;
        opacity: 1;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d
    .service-carousel:not([data-carousel-ready="true"])
    > .af-c {
        --slot-angle: 0deg;
        position: absolute;
        inset: auto;
        top: 50%;
        left: 50%;
        width: var(--carousel-card-width);
        height: var(--carousel-card-height);
        margin: 0;
        opacity: 1;
        transform: translate3d(
        -50%,
        -50%,
        calc(var(--carousel-depth) * -1)
        )
        rotateY(var(--slot-angle))
        translateZ(var(--carousel-depth));
        transform-style: preserve-3d;
        transition: none;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d
    .service-carousel:not([data-carousel-ready="true"])
    > .af-c:nth-child(1 of .af-c) {
        --slot-angle: 0deg;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d
    .service-carousel:not([data-carousel-ready="true"])
    > .af-c:nth-child(2 of .af-c) {
        --slot-angle: 60deg;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d
    .service-carousel:not([data-carousel-ready="true"])
    > .af-c:nth-child(3 of .af-c) {
        --slot-angle: 120deg;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d
    .service-carousel:not([data-carousel-ready="true"])
    > .af-c:nth-child(4 of .af-c) {
        --slot-angle: 180deg;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d
    .service-carousel:not([data-carousel-ready="true"])
    > .af-c:nth-child(5 of .af-c) {
        --slot-angle: 240deg;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d
    .service-carousel:not([data-carousel-ready="true"])
    > .af-c:nth-child(6 of .af-c) {
        --slot-angle: 300deg;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d
    .service-carousel:not([data-carousel-ready="true"])
    > .af-c:nth-child(3 of .af-c) .div-block-17,
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d
    .service-carousel:not([data-carousel-ready="true"])
    > .af-c:nth-child(4 of .af-c) .div-block-17,
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d
    .service-carousel:not([data-carousel-ready="true"])
    > .af-c:nth-child(5 of .af-c) .div-block-17 {
        backface-visibility: hidden;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d {
        overflow: clip;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d .service-carousel {
        perspective: var(--carousel-perspective);
        perspective-origin: 50% 50%;
        transform-style: preserve-3d;
        overflow: visible;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d .service-carousel-track {
        transform-style: preserve-3d;
        transform-origin: 50% 50% 0;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d .af-c {
        transform-style: preserve-3d;
        transform-origin: 50% 50% 0;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) #id-corosol-service.af-3d .div-block-17 {
        transform-style: preserve-3d;
    }
}

/* Originally embedded in: index */
:where(html:is([data-site-page="index"], [data-site-page="utils"])) .globe-scroll-wrap--v3 {
    width: 100%;
    line-height: 0;
}

:where(html:is([data-site-page="index"], [data-site-page="utils"])) .globe-scroll-wrap--v3 > svg {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 887 / 1104.75;
    overflow: visible;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) .globe-scroll-wrap--v3 > svg {
        max-height: 760px;
    }
}

:where(html:is([data-site-page="index"], [data-site-page="utils"])) .globe-scroll-wrap--v3 > svg > g > path {
    opacity: 0;
    transition: opacity .65s ease;
}

:where(html:is([data-site-page="index"], [data-site-page="utils"])) .globe-scroll-wrap--v3 > svg > path:last-child {
    opacity: 0;
}

:where(html:is([data-site-page="index"], [data-site-page="utils"])) .globe-scroll-wrap--v3 > svg > path.globe-original-line {
    opacity: 1;
}

:where(html:is([data-site-page="index"], [data-site-page="utils"])) .globe-scroll-wrap--v3 .globe-original-line {
    fill: none;
    transition: stroke-dashoffset 2s cubic-bezier(.65, 0, .35, 1);
}

:where(html:is([data-site-page="index"], [data-site-page="utils"])) .globe-scroll-wrap--v3.is-visible > svg > g > path {
    opacity: 1;
    transition-delay: 2s;
}

@media (prefers-reduced-motion: reduce) {
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) .globe-scroll-wrap--v3 .globe-original-line {
        stroke-dashoffset: 0 !important;
        transition: none;
    }
    :where(html:is([data-site-page="index"], [data-site-page="utils"])) .globe-scroll-wrap--v3 > svg > g > path {
        opacity: 1;
        transition: none;
    }
}

/* Shared static embed treatments, previously inline in the HTML. */
.embed-borderless {
    border: 0;
}

.blend-overlay {
    mix-blend-mode: overlay;
}

.svg-current-color {
    fill: currentColor;
}

.svg-outline-black {
    fill: none;
    stroke: #000;
    stroke-width: 4px;
}

/* Content type scale. Display headings and viewport-sized type retain their own rules. */
p {
    font-size: var(--content-body-size);
    line-height: var(--content-body-leading);
}

h2.heading-19 {
    font-weight: 300;
}

h3 {
    font-size: var(--content-subheading-size);
    line-height: var(--content-subheading-leading);
}

p:is(.paragraph-6, .paragraph-7, .paragraph-8, .paragraph-9,
.paragraph-11, .paragraph-12, .paragraph-13, .paragraph-14, .paragraph-15, .paragraph-16),
.process-step p, .team-detail__bio p, .team-detail__cta p, .staff-profile__bio p {
    font-size: var(--content-body-size);
    line-height: var(--content-body-leading);
}

h3:is(.heading-22, .heading-23) {
    font-size: var(--content-subheading-size);
    line-height: var(--content-subheading-leading);
}


@media screen and (max-width: 767px) {
    :root {
        --content-body-size: 16px;
        --content-subheading-size: 24px;
    }
}

/* Keep the scene visible while the responsive content entrance resolves. */
html:is([data-site-page="index"], [data-site-page="utils"]) .black_a.globe-hero > .code-embed-6,
.globe-hero > .code-embed-6 {
    opacity: 1 !important;
    transition: none;
}

/* Entrance motion is opt-in above mobile; settled styling remains the default. */
.globe-hero .hero-entrance .code-embed-7 svg {
    overflow: visible;
    filter: none;
    transform-origin: center;
}

.globe-hero .hero-entrance .hero-icon-stroke {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
}

@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .globe-hero .hero-entrance {
        --hero-frost-duration: 900ms;
        --hero-divider-duration: 600ms;
        --hero-reveal-delay: calc(var(--hero-frost-duration) + var(--hero-divider-duration));
    }

    /* The original glass is present throughout; frost and its outline build. */
    .globe-hero .hero-entrance .div-block-26 {
        position: relative;
        animation: hero-panel-frost var(--hero-frost-duration) ease-in-out backwards,
                   hero-panel-outline var(--hero-frost-duration) ease-in-out backwards;
    }

    .globe-hero .hero-entrance .div-block-26::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(110deg, transparent 15%, rgb(255 255 255 / .06) 30%, rgb(255 255 255 / .18) 50%, rgb(255 255 255 / .06) 70%, transparent 85%) 180% 0 / 220% 100% no-repeat;
        opacity: 0;
        animation: hero-panel-shimmer var(--hero-frost-duration) ease-in-out backwards;
    }

    .globe-hero .hero-entrance :is(.heading-6, .paragraph-3, .hero-quote) {
        animation: hero-content-focus 1500ms cubic-bezier(.16, 1, .3, 1) calc(var(--hero-reveal-delay) + 160ms) backwards;
    }

    .globe-hero .hero-entrance .paragraph-3 { animation-duration: 1340ms; animation-delay: calc(var(--hero-reveal-delay) + 320ms); }
    .globe-hero .hero-entrance .hero-quote { animation-duration: 1180ms; animation-delay: calc(var(--hero-reveal-delay) + 480ms); }

    .globe-hero .hero-entrance .div-block-28 {
        --card-reveal-delay: var(--hero-reveal-delay);
    }
    .globe-hero .hero-entrance .div-block-28:nth-child(2) { --card-reveal-delay: calc(var(--hero-reveal-delay) + 220ms); }
    .globe-hero .hero-entrance .div-block-28:nth-child(3) { --card-reveal-delay: calc(var(--hero-reveal-delay) + 440ms); }
    .globe-hero .hero-entrance .div-block-28:nth-child(4) { --card-reveal-delay: calc(var(--hero-reveal-delay) + 660ms); }

    .globe-hero .hero-entrance .div-block-28 {
        position: relative;
        animation: hero-grid-border-hold var(--hero-reveal-delay) linear backwards;
    }
    .globe-hero .hero-entrance .div-block-28:nth-child(odd)::before,
    .globe-hero .hero-entrance .div-block-28:nth-child(n+3)::after {
        content: "";
        position: absolute;
        pointer-events: none;
        background: rgba(83, 111, 128, .25);
        opacity: 0;
        animation-duration: var(--hero-divider-duration);
        animation-delay: var(--hero-frost-duration);
        animation-timing-function: cubic-bezier(.4, 0, .2, 1);
        animation-fill-mode: backwards;
    }
    .globe-hero .hero-entrance .div-block-28:nth-child(odd)::before {
        top: 0;
        right: -1px;
        width: 1px;
        height: 100%;
        transform-origin: bottom;
        animation-name: hero-divider-vertical;
    }
    .globe-hero .hero-entrance .div-block-28:nth-child(3)::before { transform-origin: top; }
    .globe-hero .hero-entrance .div-block-28:nth-child(n+3)::after {
        top: -1px;
        left: 0;
        width: 100%;
        height: 1px;
        transform-origin: right;
        animation-name: hero-divider-horizontal;
    }
    .globe-hero .hero-entrance .div-block-28:nth-child(4)::after { transform-origin: left; }

    /* Each icon and its copy share a start time; all four reveals overlap. */
    .globe-hero .hero-entrance .div-block-28 > .div-block-27,
    .globe-hero .hero-entrance .code-embed-7 svg {
        animation: hero-content-focus 1000ms cubic-bezier(.16, 1, .3, 1) var(--card-reveal-delay) backwards;
    }

    .globe-hero .hero-entrance .hero-icon-stroke {
        animation: hero-icon-trace 900ms ease-out var(--card-reveal-delay) backwards;
    }
}

@media (min-width: 768px) and (max-width: 991px) and (prefers-reduced-motion: no-preference) {
    /* Tablet retains the previously reviewed whole-composition reveal. */
    .globe-hero .hero-entrance .grid-2 {
        animation: hero-tablet-composition-focus 2200ms cubic-bezier(.22, .61, .36, 1) 80ms backwards;
    }

    .globe-hero .hero-entrance .div-block-26 {
        animation: hero-tablet-panel-focus 1900ms cubic-bezier(.22, .61, .36, 1) 220ms backwards;
    }

    .globe-hero .hero-entrance :is(.heading-6, .paragraph-3, .hero-quote) {
        animation: hero-copy-arrival 1000ms cubic-bezier(.16, 1, .3, 1) 180ms backwards;
    }
    .globe-hero .hero-entrance .paragraph-3 { animation-delay: 340ms; }
    .globe-hero .hero-entrance .hero-quote { animation-delay: 520ms; }

    .globe-hero .hero-entrance .code-embed-7 svg {
        animation: hero-tablet-icon-focus 1200ms cubic-bezier(.16, 1, .3, 1) 700ms backwards;
    }
    .globe-hero .hero-entrance .div-block-28:nth-child(2) .code-embed-7 svg { animation-delay: 800ms; }
    .globe-hero .hero-entrance .div-block-28:nth-child(3) .code-embed-7 svg { animation-delay: 900ms; }
    .globe-hero .hero-entrance .div-block-28:nth-child(4) .code-embed-7 svg { animation-delay: 1000ms; }
}

.globe-hero .hero-entrance .grid-2:focus-within,
.globe-hero .hero-entrance .div-block-29 > .hero-quote:focus-visible {
    animation: none;
}

@keyframes hero-panel-frost {
    from { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
    to { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}

@keyframes hero-panel-outline {
    from { border-color: transparent; }
    to {
        border-color: var(--ss-prism-border-top) var(--ss-prism-border-right) var(--ss-prism-border-bottom) var(--ss-prism-border-left);
    }
}

@keyframes hero-panel-shimmer {
    0% { opacity: 0; background-position: 180% 0; }
    35% { opacity: .55; }
    100% { opacity: 0; background-position: -80% 0; }
}

@keyframes hero-grid-border-hold {
    from { border-color: transparent; }
    to { border-color: transparent; }
}

@keyframes hero-divider-vertical {
    from { opacity: 1; transform: scaleY(0); }
    to { opacity: 1; transform: scaleY(1); }
}

@keyframes hero-divider-horizontal {
    from { opacity: 1; transform: scaleX(0); }
    to { opacity: 1; transform: scaleX(1); }
}

@keyframes hero-content-focus {
    from { opacity: 0; filter: blur(8px); translate: 0 10px; }
    to { opacity: 1; filter: blur(0); translate: 0 0; }
}

@keyframes hero-copy-arrival {
    from { opacity: 0; translate: 0 12px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes hero-icon-trace {
    from { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
    to { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
}

@keyframes hero-tablet-composition-focus {
    0% { opacity: .15; filter: blur(24px) brightness(1.12); }
    28% { opacity: .85; filter: blur(12px) brightness(1.06); }
    100% { opacity: 1; filter: blur(0) brightness(1); }
}

@keyframes hero-tablet-panel-focus {
    from { opacity: .2; filter: blur(18px); translate: 24px 12px; scale: .975; }
    to { opacity: 1; filter: blur(0); translate: 0 0; scale: 1; }
}

@keyframes hero-tablet-icon-focus {
    from { opacity: 0; filter: blur(10px); scale: .94; }
    to { opacity: 1; filter: blur(0); scale: 1; }
}

/* Ambient aurora uses the hero shader in a section-clipped sticky viewport. */
.ambient-section,
.ss-aurora-section {
    isolation: isolate;
}

.ss-aurora-positioned {
    position: relative;
}

.ambient-waves {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: clip;
    pointer-events: none;
    user-select: none;
    border-radius: inherit;
    mask-image: linear-gradient(transparent, #000 100px, #000 calc(100% - 100px), transparent);
}

.ambient-waves * {
    pointer-events: none;
}

.ss-aurora-section > .ss-aurora-track {
    display: block;
}

.ss-aurora-stage {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    max-height: 100%;
    overflow: clip;
}

.ss-aurora-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

:is(.ss-aurora-section, .ss-aurora-content) .home-showcase :is(.rich-text-block, .paragraph-6) {
    background: transparent;
}

.ss-aurora-home-flow {
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    pointer-events: none;
}

/* A single background stays behind the complete individual profile page. */
.team-profile-page {
    position: relative;
    isolation: isolate;
}

.ss-aurora-team-flow {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    user-select: none;
}

.ss-aurora-team-flow > .ss-aurora-track {
    mask-image: none;
}

.ambient-vision .rich-text-block-9 {
    position: relative;
    isolation: isolate;
    background: transparent;
}

.ambient-vision .rich-text-block-9::before {
    content: "";
    position: absolute;
    inset: -32px;
    z-index: -1;
    pointer-events: none;
    background: var(--bg-base);
    mask-image: radial-gradient(ellipse, #000 45%, transparent 72%);
}

@media screen and (max-width: 767px) {
    .ambient-vision .rich-text-block-9::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .globe-hero .hero-entrance .div-block-26,
    .globe-hero .hero-entrance .div-block-28,
    .globe-hero .hero-entrance .heading-6,
    .globe-hero .hero-entrance .paragraph-3,
    .globe-hero .hero-entrance .div-block-28 > .div-block-27,
    .globe-hero .hero-entrance .code-embed-7 svg,
    .globe-hero .hero-entrance .hero-icon-stroke,
    .globe-hero .hero-entrance .hero-icon-detail,
    .globe-hero .hero-entrance .div-block-29 > .hero-quote {
        animation: none;
    }
}

/* Preserve the approved hero copy and assurance panel over the original canvas. */
.black_a {
    --hero-surface: var(--bg-hero);
    --hero-light-color: #ffffff;
    --hero-text-color: #17384f;
    --hero-accent-color: var(--brand-slate);
    --hero-edge-color: rgb(255 255 255 / 0.70000000);
    --hero-edge-blur: 46px;
    --hero-fade-angle: 246deg;
    --hero-fade-start: 38%;
    --hero-fade-end: 60%;
    background-color: var(--hero-surface);
}

.black_a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* A matching diagonal veil improves copy contrast without a separate asset. */
    background: linear-gradient(var(--hero-fade-angle),
    transparent var(--hero-fade-start),
    rgb(199 210 212 / 0.75000000) var(--hero-fade-end));
    pointer-events: none;
}

.hero-edge-track {
    /* The extra viewport lets the light stay pinned until the hero clips it away. */
    position: absolute;
    inset: 0 0 auto;
    height: calc(100% + 100vh);
    z-index: 2;
    pointer-events: none;
}

.hero-edge-light {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    /* Soft pools of the same light at each corner, fading before the central copy. */
    background-image: radial-gradient(ellipse at top left, rgb(255 255 255 / 0.45000000), transparent 45%),
    radial-gradient(ellipse at top right, rgb(255 255 255 / 0.45000000), transparent 45%),
    radial-gradient(ellipse at bottom left, rgb(255 255 255 / 0.45000000), transparent 45%),
    radial-gradient(ellipse at bottom right, rgb(255 255 255 / 0.45000000), transparent 45%);
    /* Box-shadow's blur radius is twice drop-shadow's standard deviation. */
    box-shadow: inset 0 0 calc(var(--hero-edge-blur) * 2) 3px var(--hero-edge-color);
}

.black_a > .code-embed-5.sh-1 {
    filter: drop-shadow(0 -3px var(--hero-edge-blur) var(--hero-edge-color));
    padding-bottom: 30px;
}

/* Keep hero content above the section's canvas, veil, and edge lighting. */
.hero_cont.hero-se {
    position: relative;
    z-index: 4;
}

.hero-entrance .grid-2 {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(28px, 3.8vw, 55px);
    align-items: center;
    text-shadow: none;
}

.hero-entrance .div-block-29 {
    min-width: 0;
    width: 100%;
    max-width: none;
}

.hero-entrance .heading-6 {
    color: var(--hero-text-color);
    font-size: clamp(38px, 3.5vw, 62px);
    line-height: 1.05;
}

.hero-entrance .heading-6 .text-span {
    display: inline;
    color: var(--hero-accent-color);
    font-size: inherit;
    line-height: inherit;
}

.hero-entrance .hero-title-location {
    display: block;
    margin-top: .8em;
    color: var(--hero-text-color);
    letter-spacing: .075em;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

.hero-entrance .paragraph-3,
.hero-entrance .paragraph-5 {
    color: var(--hero-text-color);
    opacity: 1;
}

.hero-entrance .paragraph-3 {
    font-size: clamp(17px, 1.2vw, 20px);
    line-height: 1.2;
}

.hero-entrance .text-block-3 {
    margin: 0 0 10px;
    font-family: inherit;
    font-size: clamp(17px, 1.45vw, 22px);
    line-height: 1.2;
    text-align: left;
}

.hero-entrance .text-block-3,
.hero-entrance .bold-text {
    color: var(--hero-accent-color);
}

.hero-entrance .bold-text {
    opacity: 1;
}

.hero-entrance .div-block-26 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    min-width: 0;
    align-self: stretch;
    transition: border-color .2s ease;
    background: rgba(209, 220, 223, .18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(83, 111, 128, .32);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.hero-entrance .div-block-28 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(14px, 1.4vw, 22px);
    align-items: center;
    width: auto;
    min-width: 0;
    padding: clamp(24px, 2.4vw, 40px);
    transition: none;
}

.hero-entrance .div-block-28,
.hero-entrance .div-block-28:hover {
    background: transparent;
    border-radius: 0;
    outline: none;
}

.hero-entrance .centre-cont {
    display: none;
}

.hero-entrance .div-block-28:nth-child(odd) {
    border-right: 1px solid rgba(83, 111, 128, .25);
}

.hero-entrance .div-block-28:nth-child(n+3) {
    border-top: 1px solid rgba(83, 111, 128, .25);
}

.hero-entrance .div-block-27,
.hero-entrance .div-block-33 {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    align-items: stretch;
    justify-content: center;
    text-align: left;
}

.hero-entrance .paragraph-5 {
    margin: 0;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.2;
    text-align: left;
}

.hero-entrance .code-embed-7 {
    position: static;
    z-index: auto;
    order: initial;
    width: clamp(72px, 6.5vw, 120px);
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    color: var(--hero-accent-color);
    opacity: 1;
}

.hero-entrance .hero-quote {
    text-shadow: none;
    display: inline-flex;
    isolation: isolate;
    max-width: 100%;
    margin: 0 0 0 auto;
    border-radius: 999px;
}

.globe-hero .hero-entrance .hero-quote > .text-block-65 {
    --hero-quote-glass: rgb(215 223 224);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--space-4) var(--space-10);
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 500;
    line-height: 1.15;
    border-radius: 999px;
    background: linear-gradient(35deg, #fcffd81a, #ecf9ff05 44%, #ecf9ff05 55%, #acfffb1f), rgb(215 223 224 / 0.22000000);
    color: var(--brand-gray-blue);
    border: 1px solid #f5fcffe6;
    border-right-color: #a7d9efd9;
    border-bottom-color: #e9e9b9cc;
    text-shadow: none;
    -webkit-backdrop-filter: blur(12px) saturate(1.04);
    backdrop-filter: blur(12px) saturate(1.04);
    box-shadow: 0 2px 6px #17384f1a, inset 0 1px 0 #ffffffc4, inset 0 -1px 0 #fff8d566;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* The hero's glass catches the aurora at its edges without a blurred halo. */
.globe-hero .hero-entrance .hero-quote > .text-block-65::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 18%;
    right: 13%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, #ffffff00, #ffffffed 48%, #d5faff 76%, #ffffff00);
}

.globe-hero .hero-entrance .hero-quote > .text-block-65::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -70%;
    bottom: -70%;
    left: -110%;
    width: 100%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(105deg, transparent 0%, #fcffd814 25%, #ffffff3d 50%, #acfffb1f 75%, transparent 100%);
    transform: translateX(0) skewX(-20deg);
}

.globe-hero .hero-entrance .hero-quote:is(:hover, :focus-visible) > .text-block-65::after {
    animation: hero-prism-pass 1100ms cubic-bezier(.2, .65, .3, 1) backwards;
}

@keyframes hero-prism-pass {
    0% {
        opacity: 0;
        transform: translateX(0) skewX(-20deg);
    }
    12%, 78% {
        opacity: .8;
    }
    100% {
        opacity: 0;
        transform: translateX(230%) skewX(-20deg);
    }
}

.globe-hero .hero-entrance .hero-quote:is(:hover, :focus-visible) > .text-block-65 {
    background-color: rgb(215 223 224 / 0.30000000);
    box-shadow: 0 3px 7px #17384f1f, inset 0 1px 0 #ffffff, inset 0 -1px 0 #fff8d58c;
    transform: translateY(-1px);
}

.globe-hero .hero-entrance .hero-quote:active > .text-block-65 {
    box-shadow: 0 1px 3px #17384f24, inset 0 2px 4px #17384f1a;
    transform: translateY(1px);
}

.globe-hero .hero-entrance .hero-quote > .btn_overlay {
    display: none;
}

.hero-entrance .hero-quote:focus-visible {
    outline: 2px solid #17384f;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .globe-hero .hero-entrance .hero-quote > .text-block-65,
    .globe-hero .hero-entrance .hero-quote:is(:hover, :focus-visible, :active) > .text-block-65 {
        transition: none;
        transform: none;
    }
    .globe-hero .hero-entrance .hero-quote:is(:hover, :focus-visible) > .text-block-65::after {
        animation: none;
    }
}

@media screen and (max-width: 991px) {
    .black_a::before {
        display: none;
    }
    .black_a > .code-embed-5.sh-1 {
        filter: drop-shadow(0 4px 20px rgb(255 255 255 / 0.51800000));
        padding-bottom: 30px;
        background-image: linear-gradient(0deg, var(--bg-base) 30px, transparent 31%);
        height: 62px;
        margin-bottom: -30px;
    }
    .hero-entrance .grid-2 {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-12);
    }
    .hero-entrance .div-block-29 {
        max-width: 620px;
        padding-inline: 0;
    }
    .hero-entrance .heading-6 {
        font-size: clamp(40px, 6vw, 56px);
    }
    .hero-entrance .hero-title-location {
        font-size: clamp(18px, 2.7vw, 24px);
    }
    .hero-entrance .hero-quote {
        margin-left: 0;
    }
    .hero-entrance .div-block-28 {
        padding: 30px;
    }
    .hero-entrance .text-block-3 {
        font-size: 18px;
    }
    .hero-entrance .code-embed-7 {
        width: 84px;
    }
}

@media screen and (max-width: 767px) {
    .hero-entrance .div-block-26 {
        grid-template-columns: minmax(0, 1fr);
    }
    .hero-entrance .div-block-28 {
        padding: 28px var(--space-6);
        gap: 22px;
    }
    .hero-entrance .div-block-28:nth-child(odd) {
        border-right: 0;
    }
    .hero-entrance .div-block-28:nth-child(n+2) {
        border-top: 1px solid rgba(83, 111, 128, .25);
    }
    .hero-entrance .heading-6 {
        font-size: clamp(31px, 9vw, 42px);
    }
    .hero-entrance .hero-title-location {
        font-size: clamp(13px, 3.8vw, 18px);
    }
    .hero-entrance .paragraph-3 {
        font-size: 17px;
    }
    .hero-entrance .text-block-3 {
        font-size: 17px;
    }
    .hero-entrance .paragraph-5 {
        font-size: 15px;
    }
    .hero-entrance .code-embed-7 {
        width: 72px;
    }
}

/* Drift along the shooting stars’ 16-degree diagonal. */
.subhero-explorer {
    object-fit: contain;
    transform-origin: 50% 55%;
    animation: subhero-star-drift 4.8s ease-in-out infinite;
}

@keyframes subhero-star-drift {
    0%, 100% {
        transform: translate(24px, -6.88px);
    }
    50% {
        transform: translate(-24px, 6.88px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .subhero-explorer {
        animation: none;
        transform: none;
    }
}

.hero_cont-2 .div-block-216:has(.subhero-explorer) {
    transform: none;
}

/* Let the explorer extend naturally beyond the subhero frame. */
.hero_cont-2.adfff:has(.subhero-explorer) {
    overflow: visible;
}

.hero_cont-2 .div-block-7:has(.subhero-explorer) {
    overflow: visible;
}

.hero_cont-2 .div-block-216:has(.subhero-explorer) {
    z-index: 1;
    transform-origin: 50% 100%;
}

@media (max-width: 767px) {
    .hero_cont-2 .div-block-216:has(.subhero-explorer) {
        transform: translate(12px, -8px) scale(1.06);
    }
}

.bobby-ai-button svg {
    display: block;
    margin: auto;
    pointer-events: none;
}

/* Blog-specific reading layout; containers and panels reuse the shared site styles. */
.blog-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 28px;
    margin-top: var(--space-6);
}

.blog-skeleton-card {
    position: relative;
    overflow: hidden;
    padding: var(--space-8);
    border: 1px solid var(--border-col);
    border-radius: var(--radius-md);
    background: var(--bg-base);
}

.blog-skeleton-card i {
    display: block;
    height: 16px;
    margin-bottom: var(--space-4);
    border-radius: 6px;
    background: var(--bg-hero);
}

.blog-skeleton-card i:first-child {
    width: 30%;
    height: 12px;
}

.blog-skeleton-card i:nth-child(2) {
    height: 32px;
    width: 85%;
    margin-block: 28px;
}

.blog-skeleton-card i:last-child {
    width: 40%;
    margin: var(--space-10) 0 0 auto;
}

.blog-skeleton-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff24;
    animation: blog-skeleton-shimmer 1.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes blog-skeleton-shimmer {
    0%,100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

@media(max-width:767px) {
    .blog-skeleton-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    .blog-skeleton-card {
        padding: var(--space-6);
    }
}

@media(prefers-reduced-motion:reduce) {
    .blog-skeleton-card::after {
        animation: none;
        opacity: 0;
    }
}

.blog-page {
    --blog-ink: #294557;
}

.blog-page [data-cms-title] {
    color: #e8eff1;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

.blog-page .cms-article {
    color: var(--blog-ink);
}

.blog-page .cms-article :is(h2,h3,h4,a) {
    color: inherit;
    text-decoration: none;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

.blog-page .cms-article h2 {
    color: var(--brand-slate);
    font-size: clamp(26px, 2.5vw, 36px);
    line-height: 1.2;
    text-transform: none;
    font-weight: 300;
    margin: var(--space-8) 0 var(--space-4);
}

.blog-page .cms-article h3 {
    font-size: 24px;
    line-height: 1.3;
    text-transform: none;
    font-weight: 500;
    margin: 28px 0 14px;
}

.blog-page .cms-article blockquote {
    border: 0;
    padding-left: 0;
}

.blog-grid::before,.blog-grid::after {
    content: none;
}

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

.blog-page .blog-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.blog-page .blog-card {
    padding: var(--space-8);
}

.blog-page .blog-card h2 {
    font-size: clamp(24px, 2.1vw, 30px);
    margin: var(--space-4) 0;
    line-height: 1.25;
}

.blog-page .blog-card p {
    margin: 0 0 28px;
}

.blog-card-category {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
}

.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: auto;
    min-height: 48px;
    font-size: 13px;
}

.blog-page .blog-card .blog-card-author {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% -23%;
    background-color: #afcbd6;
    margin: 0 0 0 auto;
}

.blog-card a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
    border-radius: 2px;
}

@media (max-width: 767px) {
    .blog-page .blog-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    .blog-page .blog-card {
        padding: var(--space-6);
    }
}

.blog-page .blog-grid > a.blog-card {
    color: var(--blog-ink);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s ease;
}

.blog-page .blog-card :is(h2, p, span, small, time) {
    padding: 0;
    border: 0;
    text-decoration: none;
}

.blog-page .blog-card:hover {
    border-color: var(--brand-slate);
}

.blog-page .blog-card:focus-visible {
    outline: 2px solid var(--blog-ink);
    outline-offset: 5px;
}

.blog-card-byline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
    text-align: right;
}

.blog-card-byline span {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #7e929b;
}

.blog-card-byline small {
    display: block;
    max-width: 180px;
    font-size: 12px;
    line-height: 1.4;
    color: #0093ff;
}

/* A calm article column, with navigation kept outside the reading flow. */
.blog-detail .code-embed-46 {
    display: none;
}

.blog-detail [data-cms-title] {
    max-width: 1000px;
    margin-inline: auto;
    font-size: clamp(32px, 4vw, 58px);
    line-height: 1.12;
    text-transform: none;
}

.blog-breadcrumb {
    display: flex;
    align-items: baseline;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
    font-size: 14px;
    line-height: 1.5;
    color: #294557;
}

.blog-breadcrumb a {
    flex-shrink: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
    border: 0;
}

.blog-breadcrumb span {
    opacity: .7;
}

.blog-reading-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.blog-detail .cms-article {
    min-width: 0;
    font-size: 18px;
    line-height: 1.8;
}

.blog-detail .cms-article p {
    margin: 0 0 var(--space-6);
}

.blog-detail .cms-article a {
    font: inherit;
    color: var(--link-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0;
}

.blog-detail .cms-article h2 strong {
    font-weight: inherit;
}

.blog-related {
    position: sticky;
    top: 110px;
    color: #294557;
}

.blog-related h2 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 18px;
}

.blog-related a {
    display: block;
    padding: var(--space-5);
    margin-bottom: 14px;
    color: inherit;
    text-decoration: none;
}

.blog-related span {
    display: block;
    font-size: 18px;
    line-height: 1.4;
}

.blog-related small {
    display: block;
    margin-top: var(--space-3);
    font-size: 12px;
}

.blog-related a:hover {
    border-color: var(--brand-slate);
}

.div-block-39 {
    outline: none;
    border: 0;
    background: transparent;
    overflow: visible;
}

@media (max-width: 767px) {
    .blog-reading-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .blog-related {
        position: static;
    }
    .blog-breadcrumb {
        margin-bottom: 28px;
    }
    .blog-breadcrumb span {
        display: none;
    }
    .blog-detail .cms-article {
        font-size: 17px;
        line-height: 1.75;
    }
    .div-block-39 {
        width: 72px;
        height: 72px;
        margin: var(--space-4);
    }
    .div-block-39 .site-bot-animation {
        width: 91.2px;
        height: 91.2px;
    }
}

.blog-breadcrumb a {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}

.blog-detail .stk-wv {
    display: none !important;
}

.blog-article-author {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0 0 var(--space-8);
}

.blog-detail .cms-article .blog-article-author img {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    object-fit: cover;
    object-position: 50% -23%;
    background-color: #afcbd6;
    border-radius: 50%;
    margin: 0;
}

.blog-article-author span {
    display: block;
    font-size: 17px;
    font-weight: 500;
    color: #838e97;
}

.blog-article-author small {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: #2a69bc;
}

.blog-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
}

.blog-card-top time {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
}

.blog-card-top .blog-card-category {
    line-height: 1.5;
}

.blog-detail .cms-article a.blog-article-author {
    margin: 44px 0 var(--space-6);
    display: flex;
    text-decoration: none;
    width: fit-content;
}

.blog-next-links {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: var(--space-4);
    padding: var(--space-3) 0;
}

.blog-detail .cms-article .blog-next-links a {
    color: #252525;
    display: block;
    min-width: 0;
    padding: var(--space-4) 18px;
    border: 0;
    border-radius: 14px;
    background: var(--bg-base);
    box-shadow: 5px 5px 12px #aebbc080, -5px -5px 12px #f4fbfcaa;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-detail .cms-article .blog-next-links a:hover {
    box-shadow: inset 3px 3px 7px #aebbc070, inset -3px -3px 7px #f4fbfc99;
}

@media (max-width: 767px) {
    .blog-next-links {
        grid-template-columns: 1fr;
    }
}

.blog-detail .cms-article .blog-author-more-heading {
    font-size: 17px;
    font-weight: 500;
    margin: 28px 0 10px;
}

/* Individual profiles: a steady portrait beside a spacious biography. */
.team-detail [data-team-content] {
    display: grid;
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: start;
}

.team-detail [data-team-content][hidden] {
    display: none;
}

.team-detail .team-detail__header {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    text-align: left;
}

.team-detail .team-portrait {
    aspect-ratio: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.team-detail .team-portrait > img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: contain;
    border-radius: 20px;
}

.team-detail h1 {
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.15;
    margin-bottom: 10px;
    color: var(--brand-slate);
}

.team-detail .team-detail__designation {
    font-size: 19px;
    line-height: 1.5;
}

.team-detail__reading {
    min-width: 0;
}

.team-detail .team-detail__email {
    position: relative;
    inset: auto;
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 var(--space-8) auto;
    border: 0;
    font-size: 15px;
}

.team-detail .team-detail__bio {
    padding: 0;
    font-size: 20px;
    line-height: 1.85;
    text-align: left;
}

.team-detail .team-detail__bio p {
    margin: 0 0 28px;
}

@media (max-width: 767px) {
    .team-detail [data-team-content] {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .team-detail .team-detail__header {
        position: static;
        text-align: center;
    }
    .team-detail .team-detail__bio {
        font-size: 18px;
        line-height: 1.8;
    }
    .team-detail .team-detail__email {
        margin-left: auto;
        margin-right: 0;
    }
}

/* Restore the dimensional portrait and hold the whole profile at mid-screen. */
.team-detail .team-portrait {
    aspect-ratio: 1;
    padding: 10px;
    border-radius: 50%;
    background: var(--bg-base);
    box-shadow: -7px -7px 16px #ffffff90, 7px 7px 16px #1f407c2b, inset 5px 5px 12px #1f407c26, inset -5px -5px 12px #ffffffa6;
}

.team-profile-page .team-detail .team-portrait {
    background-color: rgb(209 220 223 / 0.05000000);
}

.team-detail .team-portrait > img {
    position: absolute;
    inset: auto 0 0;
    height: auto;
    max-height: none;
    border-radius: 20px 20px 400px 400px;
    object-fit: contain;
}

.team-detail .team-detail__header {
    padding-top: var(--portrait-overhang, 70px);
    text-align: center;
    top: max(96px, calc((100dvh - var(--profile-height, 600px)) / 2));
}

.team-detail h1 {
    font-size: clamp(36px, 3.7vw, 52px);
}

.team-detail .team-detail__designation {
    font-size: clamp(22px, 2vw, 28px);
}

.team-detail .team-detail__bio {
    font-size: clamp(26px, 2.5vw, 34px);
    line-height: 1.75;
}

.team-detail .team-detail__bio p {
    margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
    .team-detail [data-team-content] {
        padding-top: 90px;
    }
    .team-detail .team-detail__header {
        margin-top: -70px;
        /* margin-bottom: -36px; */
    }
}

@media (max-width: 767px) {
    .team-detail .team-detail__header {
        top: auto;
        margin: 0;
    }
    .team-detail .team-detail__bio {
        font-size: 24px;
        line-height: 1.7;
    }
}

/* Equal profile columns with a viewport-bounded sticky identity. */
.team-detail [data-team-content] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 64px);
}

.team-detail .team-detail__header {
    gap: var(--space-5);
    top: max(16px, calc((100dvh - var(--profile-height, 650px)) / 2));
}

.team-detail .team-detail__header > div:last-child {
    min-width: 0;
    width: 100%;
}

.team-detail .team-portrait {
    width: min(100%, var(--portrait-limit, 420px));
    margin-inline: auto;
    flex-shrink: 0;
}

.team-detail h1 {
    white-space: nowrap;
    font-size: clamp(24px, 3.2vw, 46px);
}

.team-detail .team-detail__designation {
    font-size: clamp(18px, 1.8vw, 26px);
}

.team-detail .team-detail__email {
    margin: 18px auto 0;
    justify-content: center;
    font-size: clamp(12px, 1.2vw, 16px);
}

@media (max-width: 767px) {
    .team-detail [data-team-content] {
        grid-template-columns: 1fr;
    }
    .team-detail .team-detail__header {
        position: static;
        top: auto;
        text-align: center;
    }
    .team-detail .team-detail__bio {
        font-size: clamp(20px, 5.5vw, 28px);
        line-height: 1.5;
        text-align: center;
    }
    .team-detail h1 {
        font-size: clamp(24px, 7vw, 40px);
    }
}

/* Profile size refinement across desktop, tablet, and phone. */
.team-detail .team-portrait {
    width: min(100%, var(--portrait-limit, 450px));
    max-width: 450px;
    margin-inline: auto;
}

.team-detail .team-detail__bio {
    font-size: 28px;
    line-height: 1.5;
}

.team-detail__bio-title {
    margin: 0 0 var(--space-6);
    color: #294557;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .08em;
}

/* Set typography on paragraphs so shared body rules cannot override it. */
.team-detail .team-detail__bio {
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
    font-family: Kanit, sans-serif;
    font-style: normal;
}

.team-detail .team-detail__bio p {
    opacity: 1;
}

/* Refined profile surface: quiet depth with a clear reading hierarchy. */
.team-profile-page {
    background-color: var(--bg-base);
    background-image: radial-gradient(ellipse at 12% 24%, #edf4f6b3 0, transparent 48%), radial-gradient(ellipse at 88% 65%, #b6cbd766 0, transparent 52%);
    background-attachment: fixed;
}

.team-detail [data-team-content] {
    gap: clamp(36px, 5vw, 72px);
}

.team-detail .team-detail__reading {
    background: rgb(242 247 248 / 18%);
    padding: clamp(28px, 3.5vw, 52px);
    border-radius: var(--radius-panel);
    box-shadow: 0 18px 60px rgba(35, 66, 86, .045);
}

.team-detail .team-detail__bio-title {
    color: #627d8d;
    font-size: 12px;
    letter-spacing: .18em;
    margin-bottom: 28px;
}

.team-detail .team-detail__bio {
    color: #1b2429;
}

.team-detail .team-detail__bio p {
    font-size: 28px;
    line-height: 1.5;
    font-weight: 300;
    margin-bottom: 30px;
}

.team-detail .team-detail__bio p:last-child {
    margin-bottom: 0;
}

.team-detail .team-detail__header {
    gap: 30px;
}

.team-detail h1 {
    font-weight: 400;
    letter-spacing: -.025em;
    color: var(--brand-slate);
}

.team-detail .team-detail__designation {
    color: #627d8d;
    font-size: clamp(18px, 1.65vw, 23px);
}

.team-detail .team-detail__email {
    background: #e3edef;
    box-shadow: 0 4px 16px #2945570a;
    padding: var(--space-3) 18px;
    color: var(--link-blue);
}

.team-detail .team-detail__cta {
    margin-top: var(--space-16);
    border: 0;
    padding-top: var(--space-6);
}

@media (max-width: 767px) {
    .team-detail .team-detail__reading {
        padding: 28px 22px;
        border-radius: 22px;
    }
    .team-detail .team-detail__bio {
        text-align: left;
    }
    .team-detail .team-detail__bio-title {
        text-align: left;
    }
}

/* Compact identity group that wraps naturally when space is limited. */
.team-detail .team-detail__header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 28px;
    text-align: left;
}

.team-detail .team-detail__header > .team-portrait {
    flex: 0 1 240px;
    width: 240px;
    max-width: min(100%, var(--portrait-limit, 240px));
    margin: 0;
}

.team-detail .team-detail__header > div:last-child {
    flex: 1 1 220px;
    min-width: min(220px, 100%);
    width: auto;
}

.team-detail .team-detail__header h1 {
    font-size: clamp(26px, 2.4vw, 36px);
    white-space: normal;
}

.team-detail .team-detail__email {
    margin: 18px 0 0;
}

.team-detail .team-detail__reading {
    padding: clamp(24px, 3vw, 40px);
}

@media (max-width: 767px) {
    .team-detail .team-detail__bio,
    .team-detail .team-detail__bio p {
        font-size: 18px;
        line-height: 1.5;
        font-weight: 400;
    }
    .team-detail .team-detail__header {
        text-align: center;
    }
    .team-detail .team-detail__header > .team-portrait {
        flex-basis: 200px;
        width: 200px;
    }
    .team-detail .team-detail__email {
        margin-inline: auto;
    }
}

/* Use the same quotation artwork as the home-page subhero. */
.team-detail .team-detail__bio {
    padding-top: 76px;
}

.team-detail .team-detail__quote {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 56px;
    color: #4d5156;
    opacity: .45;
}

@media (max-width: 767px) {
    .team-detail .team-detail__bio {
        padding-top: var(--space-15);
    }
    .team-detail .team-detail__quote {
        font-size: 42px;
    }
}

.team-detail .team-detail__header > .team-portrait {
    flex-basis: 300px;
    width: 300px;
}

/* Desktop identity: portrait above details, with room below the fixed logo. */
@media (min-width: 992px) {
    .team-detail .team-detail__header {
        flex-direction: column;
        flex-wrap: nowrap;
        text-align: center;
        gap: var(--space-6);
        margin-top: 0;
        top: max(var(--profile-safe-top, 120px), calc((100dvh - var(--profile-height, 650px)) / 2));
    }
    .team-detail .team-detail__header > .team-portrait {
        flex: 0 0 auto;
        width: min(100%, var(--portrait-limit, 450px));
        max-width: 450px;
    }
    .team-detail .team-detail__header > div:last-child {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
    }
    .team-detail .team-detail__header h1 {
        font-size: clamp(30px, 3vw, 44px);
    }
    .team-detail .team-detail__email {
        margin-inline: auto;
    }
    .team-detail .team-detail__bio {
        color: #1b2429;
        opacity: .72;
    }
    .team-detail .team-detail__bio p {
        font-size: 28px;
        font-weight: 300;
        opacity: 1;
    }
}

/* Email and office phone share the existing profile contact treatment. */
.team-detail__contact-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.team-detail .team-detail__contact-links .team-detail__email {
    min-width: 0;
    margin: 0;
    padding-inline: var(--space-3);
    color: #4d5156;
    background: var(--bg-base);
    box-shadow: 4px 4px 9px #304f6326, -4px -4px 9px #ffffff80;
    transition: box-shadow .18s ease;
}

.team-detail .team-detail__contact-links .team-detail__email:hover,
.team-detail .team-detail__contact-links .team-detail__email:active {
    color: #4d5156;
    box-shadow: var(--shadow-control-inset);
}

.team-detail .team-detail__contact-links .team-detail__email:focus-visible {
    outline: 2px solid #4d5156;
    outline-offset: 4px;
}

.team-detail .team-detail__contact-links .team-detail__phone {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .team-detail .team-detail__contact-links .team-detail__email {
        padding: 10px var(--space-2);
        gap: 6px;
    }
    .team-detail__contact-links .team-icon {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 767px) {
    .team-detail__contact-links {
        flex-wrap: wrap;
    }
    .team-detail .team-detail__contact-links .team-detail__email {
        flex-shrink: 0;
    }
}

@media (max-width: 767px) {
    .process-flow__action {
        margin-left: 0;
    }
}

/* Shared portfolio preview: native modal keeps focus inside and supports Escape. */
.portfolio-preview {
    position: fixed;
    inset: 0;
    width: min(1520px, calc(100% - 40px));
    max-width: none;
    height: fit-content;
    max-height: calc(100dvh - 64px);
    margin: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: var(--radius-lg);
    background: rgba(224, 234, 237, .88);
    color: var(--brand-ink);
    overflow: auto;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: 0 24px 90px rgba(10, 41, 70, .25), inset 0 1px 0 rgba(255, 255, 255, .6);
    overscroll-behavior: contain;
}

.portfolio-preview::backdrop {
    background: rgba(10, 29, 44, .32);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.portfolio-preview[open] {
    animation: portfolio-preview-enter 240ms cubic-bezier(.2, .7, .3, 1) both;
}

.portfolio-preview[open]::backdrop {
    animation: portfolio-backdrop-enter 240ms ease-out both;
}

@keyframes portfolio-preview-enter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes portfolio-backdrop-enter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-preview[open], .portfolio-preview[open]::backdrop {
        animation: none;
    }
}

.portfolio-preview [hidden] {
    display: none !important;
}

.portfolio-preview__shell {
    width: 100%;
    margin: auto;
    padding: var(--space-6) 52px var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.portfolio-preview__bar, .portfolio-preview__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.portfolio-preview__bar {
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.portfolio-preview button {
    border: 0;
    background: transparent;
    color: inherit;
    padding: var(--space-3) 0;
    cursor: pointer;
    font: inherit;
}

.portfolio-preview button:disabled {
    opacity: .4;
    cursor: default;
}

.portfolio-preview button:focus-visible, .portfolio-preview a:focus-visible {
    outline: 2px solid var(--brand-slate);
    outline-offset: 6px;
}

.portfolio-preview__content {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(240px, 1fr);
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
}

.portfolio-preview__media {
    position: relative;
    isolation: isolate;
    min-width: 0;
    display: grid;
    place-items: center;
    background: var(--bg-hero);
    border-radius: 14px;
    overflow: hidden;
    min-height: 220px;
}

.portfolio-preview__media img {
    width: 100%;
    height: min(70vh, 760px);
    object-fit: contain;
    display: block;
}

.portfolio-preview__media .portfolio-preview__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    opacity: .4;
    z-index: -1;
    pointer-events: none;
}

.portfolio-preview__count {
    margin: 0 0 var(--space-6);
    font-size: 13px;
    color: #526879;
}

.portfolio-preview h2 {
    margin: 0;
    font-family: Kanit, sans-serif;
    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 300;
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--brand-slate);
    overflow-wrap: anywhere;
}

.portfolio-preview__description {
    margin: var(--space-6) 0 var(--space-8);
    font-size: 16px;
    line-height: 1.65;
    white-space: pre-line;
}

.portfolio-preview__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) 28px;
    font-size: 14px;
}

.portfolio-preview__links a {
    font: inherit;
    color: inherit;
    text-decoration: none;
    padding-bottom: 5px;
}

.portfolio-preview__links a:not(.special_btn) {
    border-bottom: 1px solid currentColor;
}

.portfolio-preview__links a:hover, .portfolio-preview button:hover {
    color: var(--brand-slate);
}

.portfolio-preview__links > span {
    color: #526879;
}

.portfolio-preview__nav {
    border-top: 1px solid #a9bec9;
    padding-top: var(--space-3);
}

@media (max-width: 767px) {
    .portfolio-preview {
        width: calc(100% - 24px);
        max-height: calc(100dvh - 32px);
        border-radius: 18px;
    }
    .portfolio-preview__shell {
        gap: var(--space-6);
        padding: var(--space-5) var(--space-10);
    }
    .portfolio-preview__content {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }
    .portfolio-preview__media img {
        height: 34vh;
    }
    .portfolio-preview__count {
        margin-bottom: 14px;
    }
    .portfolio-preview__description {
        margin: var(--space-5) 0 var(--space-6);
    }
}

/* JSON-driven project estimator. */
.quote-calculator {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(1140px,calc(100% - 48px));
    max-width: none;
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 1px solid #ffffffb3;
    border-radius: var(--radius-lg);
    background: var(--control-surface);
    color: var(--control-ink);
    box-shadow: 0 28px 100px #102e4855;
    overflow: auto;
}

.quote-calculator::backdrop {
    background: #16334666;
    backdrop-filter: blur(12px);
}

.quote-calculator[open] {
    animation: portfolio-preview-enter .24s ease-out;
}

.quote-calculator * {
    box-sizing: border-box;
}

.quote-calculator [hidden] {
    display: none!important;
}

.qc-layout {
    display: grid;
    grid-template-columns: minmax(0,8fr) minmax(280px,4fr);
}

.qc-main {
    padding: 36px;
    max-height: calc(100dvh - 50px);
    overflow: auto;
}

.qc-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--control-muted);
    position: sticky;
    top: -40px;
    background-color: var(--control-surface);
    z-index: 9;
}

.quote-calculator h2 {
    font: 300 clamp(28px,3vw,40px)/1.1 Kanit,sans-serif;
    color: var(--brand-slate);
    margin: 26px 0 var(--space-2);
}

.qc-intro {
    font-size: 14px;
    margin-bottom: 28px;
    color: var(--control-muted);
}

.quote-calculator h3 {
    font: 500 14px/1.3 Kanit,sans-serif;
    margin: 0 0 14px;
}

.qc-group + .qc-group {
    margin-top: 26px;
}

.qc-tiles {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
}

.qc-tile {
    position: relative;
    margin: 0;
    cursor: pointer;
    min-width: 0;
}

.qc-tile input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.qc-tile__face {
    position: relative;
    display: flex;
    aspect-ratio: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3) 7px;
    border: 1px solid #ffffff66;
    border-radius: 14px;
    background: var(--control-surface);
    box-shadow: 5px 5px 12px var(--control-shadow),-5px -5px 12px #f8ffff;
    transition: box-shadow .18s,background .18s;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
}

.qc-tile__face:hover {
    outline: 1px solid #2196f354;
    outline-offset: -4px;
}

.qc-tile__face img {
    width: 50px;
    height: 50px;
    opacity: .45;
}

.qc-tile__check {
    position: absolute;
    right: 9px;
    top: 5px;
    opacity: 0;
    color: var(--control-surface);
}

.qc-tile input:checked + .qc-tile__face {
    background: #7999ac;
    border-color: #7da9d1;
    box-shadow: inset 4px 4px 9px #1959854d, inset -4px -4px 9px #eef9ff2b;
    color: #ffffff;
}

.qc-tile input:checked + .qc-tile__face .qc-tile__check {
    opacity: 1;
}

.qc-tile input:focus-visible + .qc-tile__face, .quote-calculator button:focus-visible, .qc-scope input:focus-visible {
    outline: 2px solid var(--brand-slate);
    outline-offset: 4px;
}

.qc-aside {
    background: #d2dde1;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.qc-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 26px;
}

.quote-calculator button {
    font: inherit;
    cursor: pointer;
}

.qc-close {
    padding: var(--space-2);
    background: none;
    border: 0;
    font-size: 13px!important;
    color: var(--control-ink);
}

.qc-machine {
    padding: 18px;
    background: var(--control-surface);
    border: 1px solid #eff5f7;
    border-radius: 22px;
    box-shadow: 9px 9px 20px #b7c3c9,-7px -7px 18px #eef7fa;
}

.qc-display {
    background: #c5d2c7;
    border: 1px solid #a7b9af;
    border-radius: 10px;
    padding: 18px 14px;
    box-shadow: inset 3px 3px 7px #84988a55,inset -2px -2px 5px #ffffff66;
    color: #304d42;
}

.qc-display-label {
    font: 9px/1.4 monospace;
    letter-spacing: .08em;
}

.qc-total {
    display: block;
    font: clamp(28px,3vw,38px)/1.5 monospace;
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.qc-lines {
    border-top: 1px solid #8fa79880;
    padding-top: 14px;
    max-height: 220px;
    overflow: auto;
}

.qc-line {
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    margin-bottom: 10px;
    font: 11px/1.4 monospace;
}

.qc-line span:last-child {
    white-space: nowrap;
}

.qc-empty {
    font: 12px/1.5 monospace;
    margin: 0;
}

.qc-note {
    font-size: 10px;
    line-height: var(--content-reading-leading);
    color: #526a77;
    margin: 18px 0;
}

.qc-keys {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.qc-key {
    border: 1px solid #ffffff88;
    border-radius: var(--radius-md);
    padding: var(--space-4) 10px;
    background: var(--control-surface);
    color: var(--control-ink);
    box-shadow: 4px 4px 9px var(--control-shadow),-4px -4px 9px #f8ffff;
    font-size: 12px!important;
}

.qc-key:active {
    box-shadow: inset 3px 3px 6px var(--control-shadow);
}

.qc-key--next {
    grid-column: 2;
    grid-row: 1 / span 2;
    background: var(--brand-slate);
    color: white;
    border-color: #ffffff55;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.qc-key[data-qc-back] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.qc-key[data-qc-back] small,.qc-key--next small {
    font-size: 11px;
}

.qc-key:disabled {
    opacity: .4;
    cursor: default;
}

.qc-feedback {
    font-size: 12px;
    color: var(--control-muted);
    margin: var(--space-5) 0 0;
}

.qc-scope {
    padding: var(--space-5) 0;
    border-bottom: 1px solid #b8c9d1;
}

.qc-scope__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 14px 0 0;
    font-size: 14px;
    font-weight: 400;
}

.qc-scope__row small {
    display: block;
    font-size: 11px;
    color: var(--control-muted);
    margin-top: 4px;
}

.qc-scope input {
    width: 80px;
    padding: 10px;
    border: 1px solid #b3c5cf;
    border-radius: 9px;
    background: #e7eff1;
    color: var(--control-ink);
    font: 16px monospace;
    box-shadow: inset 2px 2px 5px var(--control-shadow);
}

.site-nav-services .inner-links-cont {
    position: relative;
}

.site-nav-drawer .site-nav-quote {
    position: absolute;
    top: 18px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 18px;
    border: 0;
    border-radius: 9px;
    background: var(--brand-slate);
    color: #fff;
    font: 400 14px/1.3 Kanit,sans-serif;
    text-decoration: none;
}

.site-nav-drawer .site-nav-quote:hover {
    background: #125ac0;
    color: #fff;
}

@media(max-width:767px) {
    .quote-calculator {
        width: calc(100% - 24px);
        max-height: calc(100dvh - 24px);
    }
    .qc-layout {
        grid-template-columns: minmax(0,1fr);
    }
    .qc-main {
        max-height: none;
        padding: 26px var(--space-5);
    }
    .qc-header {
        padding-right: 50px;
    }
    .qc-aside {
        padding: var(--space-5);
    }
    .qc-tools {
        margin: 0;
    }
    .qc-close {
        position: absolute;
        top: 16px;
        right: 12px;
    }
    .qc-tiles {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: var(--space-3);
    }
    .qc-lines {
        max-height: 130px;
    }
    .site-nav-drawer .site-nav-quote {
        position: static;
        align-self: flex-start;
        margin: 0 0 var(--space-3);
    }
}

@media(prefers-reduced-motion:reduce) {
    .quote-calculator[open] {
        animation: none;
    }
    .qc-tile__face {
        transition: none;
    }
}

.qc-custom > label {
    display: block;
    margin-bottom: var(--space-3);
    font: 500 14px/1.3 Kanit,sans-serif;
}

.qc-custom textarea {
    display: block;
    width: 100%;
    resize: vertical;
    min-height: 110px;
    padding: 14px;
    border: 1px solid #b3c5cf;
    border-radius: var(--radius-md);
    background: #e7eff1;
    color: var(--control-ink);
    font: 14px/1.5 inherit;
    box-shadow: inset 2px 2px 5px var(--control-shadow);
}

.qc-custom textarea:focus-visible {
    outline: 2px solid var(--brand-slate);
    outline-offset: 3px;
}

.qc-custom > small {
    display: block;
    text-align: right;
    margin-top: var(--space-2);
    color: var(--control-muted);
    font-size: 11px;
}

.qc-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 18px;
    margin: 30px 0;
}

.qc-contact label {
    font-size: 13px;
    font-weight: 400;
}

.qc-contact input {
    display: block;
    margin-top: 10px;
    width: 100%;
    padding: 13px;
    border: 1px solid #b3c5cf;
    border-radius: 10px;
    background: #e7eff1;
    color: var(--control-ink);
    font: inherit;
    box-shadow: inset 2px 2px 5px var(--control-shadow);
}

.qc-contact input:focus-visible {
    outline: 2px solid var(--brand-slate);
    outline-offset: 3px;
}

.qc-summary-request {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.qc-summary-contact {
    margin: var(--space-2) 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}

@media(max-width:767px) {
    .qc-contact {
        grid-template-columns: 1fr;
    }
}

.quote-calculator .qc-key--clear {
    background: #b95b42;
    color: #fff;
    border-color: #cd806b;
}

.quote-calculator .qc-key--clear:hover {
    background: #a94d36;
}

.qc-clear-prompt {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(440px,calc(100% - 48px));
    padding: 30px;
    border: 1px solid #ffffff99;
    border-radius: 18px;
    background: var(--bg-base);
    color: var(--control-ink);
    box-shadow: 0 24px 90px 20px #17394d66,0 0 100px 28px #2b9edb40;
}

.qc-clear-icon {
    display: block;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    color: #b38a22;
}

.qc-clear-icon svg {
    display: block;
    fill: var(--brand-yellow-soft);
}

.qc-clear-prompt::backdrop {
    background: transparent;
    backdrop-filter: none;
}

.quote-calculator .qc-clear-prompt h3 {
    font-size: 24px;
    line-height: 1.25;
    margin: 0 0 14px;
    color: var(--control-ink);
}

.qc-clear-description {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 var(--space-6);
    color: #53616a;
}

.qc-clear-actions .qc-key {
    box-shadow: none;
    min-height: 46px;
}

.quote-calculator .qc-clear-prompt .qc-key--clear {
    background: #b95b42;
    border-color: #cd806b;
    color: #fff;
}

.quote-calculator .qc-clear-prompt .qc-key--clear:hover:not(:disabled) {
    background: #a94d36;
    border-color: #a94d36;
}

.qc-clear-actions {
    display: flex;
    gap: var(--space-3);
}

.qc-clear-actions button {
    flex: 1;
}

/* Visual stages and an external close control. */
.quote-calculator {
    overflow: visible;
    width: min(1140px,calc(100% - 80px));
    max-height: calc(100dvh - 96px);
}

.qc-layout {
    height: min(820px,calc(100dvh - 96px));
    max-height: calc(100dvh - 96px);
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.qc-main,.qc-aside {
    min-height: 0;
    overflow-anchor: none;
}

.qc-main {
    max-height: calc(100dvh - 96px);
}

.qc-aside {
    overflow: auto;
}

.qc-tools {
    display: none;
}

.qc-machine {
    margin-top: 18px;
}

.qc-header {
    padding: 4px 0;
}

.qc-progress {
    --qc-progress: 33.333%;
    width: 100%;
    height: 4px;
    background: #b9cbd5;
    border-radius: 4px;
    position: relative;
    margin: 6px 0;
}

.qc-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--qc-progress);
    background: var(--brand-slate);
    border-radius: inherit;
    transition: width .25s ease;
}

.qc-progress-dot {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border: 2px solid var(--control-surface);
    border-radius: 50%;
    background: #a6bdcb;
    transform: translate(-50%,-50%);
}

.qc-progress-dot:nth-child(2) {
    left: 33.333%;
}

.qc-progress-dot:nth-child(3) {
    left: 66.666%;
}

.qc-progress-dot:nth-child(4) {
    left: 100%;
}

.qc-progress-dot.is-complete {
    background: var(--brand-slate);
}

.quote-calculator > .qc-close {
    position: absolute;
    top: -24px;
    right: -24px;
    width: 52px;
    height: 52px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid #ffffffcc;
    background: #e2eaed;
    color: var(--control-ink);
    box-shadow: 0 5px 18px #17394d33;
    z-index: 2;
}

.quote-calculator > .qc-close:hover {
    background: var(--brand-slate);
    color: white;
}

@media(max-width:767px) {
    .quote-calculator {
        width: calc(100% - 40px);
    }
    /* Let both sections keep their content height inside the mobile scroller. */
    .qc-layout {
        display: block;
        overflow: auto;
        border-radius: var(--radius-lg);
    }
    .qc-main {
        max-height: none;
        overflow: visible;
    }
    .qc-aside {
        overflow: visible;
    }
    .quote-calculator > .qc-close {
        top: -23px;
        right: -10px;
        width: 46px;
        height: 46px;
    }
    .qc-header {
        padding-right: 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    .qc-progress-fill {
        transition: none;
    }
}

.qc-tile:has(input:disabled) {
    cursor: default;
}

.quote-af {
    background-color: var(--quote-primary) !important;
    color: #ffffffbd !important;
    outline: 3px solid var(--bg-base) !important;
}

.quote-af:hover {
    background-color: var(--quote-primary-hover) !important;
    color: #ffffffbd !important;
    outline: 3px solid var(--bg-base) !important;
}

/* Compact project scope cards with click-only quantity controls. */
.qc-scope-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    margin-top: var(--space-5);
    align-items: start;
}

.qc-scope-grid:empty {
    display: none;
}

.qc-scope-card {
    position: relative;
    min-width: 0;
    padding: 18px 14px;
    border: 1px solid #c2d1d9;
    border-radius: 14px;
    background: #ffffff1f;
}

.qc-scope-card h3 {
    margin-bottom: var(--space-4);
}

.qc-scope-card .qc-scope__row {
    gap: var(--space-2);
    font-size: 12px;
}

.qc-scope-card .qc-scope__row > span {
    min-width: 0;
}

.qc-stepper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
    border-radius: 9px;
    background: #d4e0e5;
    padding: 3px;
}

.quote-calculator .qc-stepper__button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 36px;
    padding: 0;
    border: 1px solid #ffffff88;
    border-radius: 7px;
    background: #e3ecef;
    color: var(--control-ink);
    font-size: 20px;
    box-shadow: 2px 2px 4px #adc0ca55;
}

.quote-calculator .qc-stepper__button:disabled {
    opacity: .35;
    cursor: default;
    box-shadow: none;
}

.qc-stepper__count {
    min-width: 32px;
    text-align: center;
    font: 13px/1 monospace;
    font-variant-numeric: tabular-nums;
}

@media(max-width:1050px) and (min-width:768px) {
    .qc-scope-card .qc-scope__row {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-2);
    }
}

@media(max-width:767px) {
    .qc-scope-grid {
        grid-template-columns: minmax(0,1fr);
    }
    .quote-calculator .qc-stepper__button {
        width: 40px;
        height: 40px;
    }
}

.qc-service-description {
    margin: 28px 4px 0;
    padding-top: var(--space-5);
    border-top: 1px solid #b6c9d2;
    flex: 0 0 200px;
    height: 200px;
    overflow: auto;
    opacity: 1;
    transition: opacity .28s ease;
}

.qc-service-description.is-changing {
    opacity: 0;
}

.qc-service-description.is-typing p::after {
    content: "";
    display: inline-block;
    height: 1em;
    margin-left: 2px;
    border-right: 1px solid currentColor;
    vertical-align: -.1em;
}

.qc-aside > .qc-note {
    margin: 20px 4px 0;
    flex-shrink: 0;
}

.qc-service-description p {
    min-height: 0;
}

@media(prefers-reduced-motion:reduce) {
    .qc-service-description {
        transition: none;
    }
}

.quote-calculator .qc-service-description h3 {
    color: var(--control-ink);
    font-size: 14px;
    margin: 0 0 10px;
}

.qc-service-description p {
    color: #526a77;
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

@media(max-width:767px), (hover:none), (pointer:coarse) {
    .qc-service-description {
        display: none!important;
    }
}

/* Minimal portfolio navigation and soft actions. */
.portfolio-preview__bar {
    min-height: 28px;
    padding-right: 34px;
}

.portfolio-preview [data-preview-close] {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
}

.portfolio-preview__nav {
    position: absolute;
    inset: 50% 4px auto;
    transform: translateY(-50%);
    border: 0;
    padding: 0;
    pointer-events: none;
}

.portfolio-preview__nav button {
    pointer-events: auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
}

.portfolio-preview__links {
    gap: var(--space-3);
}

.portfolio-preview__links .portfolio-preview__soft {
    color: #252525;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px var(--space-4);
    border: 1px solid #ffffff66;
    border-radius: var(--radius-md);
    background: #dbe4e755;
    box-shadow: 4px 4px 10px #a8b9c466,-4px -4px 10px #ffffff99;
    font: inherit;
    text-decoration: none;
}

.portfolio-preview__links a.portfolio-preview__soft:hover {
    color: #252525;
    box-shadow: inset 2px 2px 5px #a8b9c466,inset -2px -2px 5px #ffffff99;
}

.portfolio-preview__shell {
    overflow: hidden;
}

/* Calculator refinements preserve the selected colour palette. */
.qc-tile input:checked + .qc-tile__face img {
    filter: invert(100%);
    opacity: 1;
}

.qc-more {
    min-height: 100px;
    border: 0;
    border-radius: 16px;
    background: var(--bg-base);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

@media (min-width: 768px) and (max-width: 991px) {
    .qc-tiles {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
    .qc-scope-grid {
        grid-template-columns: minmax(0,1fr);
    }
}

@media (max-width: 767px) {
    .qc-tiles {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .qc-tile__face img {
        width: 36px;
        height: 36px;
    }
}

.qc-tile.is-dependent {
    cursor: default;
}

.qc-tile.is-dependent input:checked + .qc-tile__face {
    background: #c8d2d6;
    border-color: #bdcbd1;
    color: #4b6574;
    box-shadow: inset 2px 2px 6px #aebdc455, inset -2px -2px 6px #edf3f566;
}

.qc-tile.is-dependent input:checked + .qc-tile__face img {
    filter: none;
    opacity: .65;
}

.qc-tile.is-dependent .qc-tile__check {
    color: #567a90;
    top: 9px;
    right: 9px;
    display: flex;
}

.qc-layout:focus, .portfolio-preview__shell:focus {
    outline: none;
}

.div-block-185 {
    -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 60%,
    transparent 100%
    );
    mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 60%,
    transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Soft button depth: paired zero shadows allow a smooth outward-to-inset transition. */
.special_btn > .btn_overlay.high_pros {
    box-shadow: -7px 12px 18px #304f6345,8px -6px 15px #ffffff99,inset 0 0 0 #304f6300,inset 0 0 0 #ffffff00;
    transition: box-shadow .2s ease;
}

.special_btn > .btn_overlay.high_pros.dark {
    box-shadow: -7px 12px 18px #00000075,8px -6px 15px #ffffff30,inset 0 0 0 #00000000,inset 0 0 0 #ffffff00;
}

.special_btn:is(:hover,:focus-visible) > .btn_overlay.high_pros {
    box-shadow: 0 0 0 #304f6300,0 0 0 #ffffff00,inset -3px 3px 7px #304f6333,inset 3px -3px 7px #ffffff14;
}

.special_btn:is(:hover,:focus-visible) > .btn_overlay.high_pros.dark {
    box-shadow: 0 0 0 #00000000,0 0 0 #ffffff00,inset -3px 3px 7px #00000033,inset 3px -3px 7px #ffffff0d;
}

.special_btn > .text-block-65,.ss-page .button-3 {
    box-shadow: 4px 5px 10px #304f6326,-4px -4px 10px #ffffff80,inset 0 0 0 #304f6300,inset 0 0 0 #ffffff00;
    transition: box-shadow .2s ease;
}

.special_btn:is(:hover,:focus-visible) > .text-block-65,.ss-page .button-3:is(:hover,:focus-visible) {
    box-shadow: 0 0 0 #304f6300,0 0 0 #ffffff00,inset 3px 3px 7px #304f6333,inset -3px -3px 7px #ffffff14;
}

.visual-example header h3,.visual-example [data-expand] {
    font-family: "Open Sans",sans-serif;
}

/* Shared pre-footer invitation keeps the homepage component on every public page. */
.ss-project-cta .container {
    width: 100%;
}

.content-panel,.blog-related a {
    box-sizing: border-box;
    background: var(--bg-base);
    border: 1px solid rgba(151,191,230,.4);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 14px rgba(19,53,89,.055);
}

.ss-project-cta .content-panel {
    width: 100%;
}

.ss-project-cta .div-block-173 {
    flex-wrap: wrap;
}

.ss-project-cta .paragraph-6 {
    background: transparent;
}

@media(min-width:992px) {
    .ss-page h2.heading-19,.ss-project-cta .heading-16 {
        font-family: "Open Sans",sans-serif;
        font-size: clamp(44px,4.5vw,65px);
        font-weight: 300;
        line-height: 1.1;
        letter-spacing: 0;
    }
    .ss-page p,.ss-project-cta .paragraph-6 {
        font-size: 18px;
        line-height: 1.4;
    }
    .ss-page .text-block-65,.ss-project-cta .text-block-65 {
        font-size: 24px;
        line-height: 1.3;
    }
    .ss-page .ss-form {
        font-size: 16px;
        line-height: 1.5;
    }
    .ss-project-cta .div-block-41 {
        width: 100%;
        max-width: 1000px;
        padding-top: var(--space-20);
        padding-bottom: 100px;
    }
    .ss-project-cta .paragraph-6 {
        max-width: 760px;
        margin: var(--space-6) auto var(--space-8);
    }
}

/* Keep the homepage soft-button overlay visible above solid content panels. */
.ss-page .special_btn,.ss-project-cta .special_btn {
    isolation: isolate;
    max-width: 100%;
}

.ss-page .special_btn > .text-block-65 {
    display: block;
}

.ss-project-cta .heading-16 {
    color: var(--brand-slate);
}

.special_btn > .text-block-65 {
    color: var(--brand-gray-blue);
}

/* Process headings reuse the Why Choose typography; only card spacing differs. */
.process-step .heading-23 {
    color: var(--process-accent);
    text-shadow: none;
    margin: 0 0 var(--space-3);
}

/* Shared container supplies width and gutters; only the desktop split is specialized. */
@media screen and (min-width: 1280px) {
    .home-showcase {
        display: grid;
        grid-template-columns: minmax(350px, 25%) minmax(0, 1fr);
        gap: var(--space-10);
        align-items: start;
    }
    .home-showcase::before, .home-showcase::after {
        content: none;
    }
    .home-showcase > :is(.div-block-40, .div-block-197, .ss-copy) {
        position: sticky;
        top: 0;
        align-self: start;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100svh;
        margin: -25vh 0;
        padding: 90px 0;
        gap: var(--space-8);
        text-align: left;
    }
    /* Let clicks pass through empty sticky space while keeping its content interactive. */
    .home-showcase > :is(.div-block-40, .div-block-197, .ss-copy) {
        pointer-events: none;
    }
    .home-showcase > :is(.div-block-40, .div-block-197, .ss-copy) > * {
        pointer-events: auto;
    }
    .home-showcase .paragraph-6.std-al {
        text-align: left;
        font-size: clamp(26px, 2vw, 30px);
        line-height: 1.4;
        margin: 0;
    }
    .home-showcase > .hero_cont {
        min-width: 0;
        padding: 0;
    }
    .home-showcase .div-block-195 {
        flex: none;
        margin: 0;
        padding: 0;
    }
    .home-showcase .link-block-8 {
        width: 100%;
    }
    .home-showcase > .div-block-194 {
        min-width: 0;
    }
}

/* Navigation label follows the existing open/close state. */
.menu .m-txt {
    transition: opacity .2s ease,transform .2s ease;
}

.menu.is-open .m-txt {
    opacity: 0;
    transform: translateX(12px);
}

.site-nav-about > .site-nav-about-link {
    color: inherit;
    font: inherit;
    text-transform: inherit;
    padding: 0;
    text-decoration: none;
}

.about-story {
    position: relative;
}

@media(prefers-reduced-motion:reduce) {
    .menu .m-txt {
        transition: none;
    }
}

/* Compact navigation shows all submenu content without another tap. */
@media(max-width:991px) {
    .site-nav-drawer .site-nav-about .popup-abus {
        display: flex!important;
        position: relative;
        inset: auto;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition: none;
    }
    .site-nav-drawer .site-nav-about .div-block-226 {
        order: 9999;
        width: auto;
        margin-left: auto;
    }
    .site-nav-drawer .site-nav-about .div-block-227 {
        display: none;
    }
    .site-nav-drawer .site-nav-dropdown .inner-links-cont {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}

/* The About story's shared aurora continues behind the founder's letter. */
.about-message-band {
    position: relative;
    isolation: isolate;
    padding-block: 96px;
}

.about-message-band::before {
    content: none;
}

.about-message-band::after {
    display: none;
}

.about-message-band .content-panel {
    border-radius: var(--radius-md);
    box-shadow: 0 18px 60px #071e3433;
}

.about-principles {
    padding: clamp(28px,5vw,64px);
}

.about-principles .ss-split {
    gap: clamp(28px,4vw,56px);
}

.about-principles h2 {
    margin: 0 0 var(--space-6);
    font-size: clamp(26px,2.4vw,34px);
    line-height: 1.2;
}

.about-principles p {
    margin: 0;
    line-height: var(--content-reading-leading);
    color: inherit;
    background: transparent;
}

@media(max-width:767px) {
    .about-message-band {
        padding-block: 56px;
    }
}

/* Articles sit directly on the page surface, without a surrounding panel. */
.blog-detail .cms-article {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Subtle current-category marker within the approved navigation layout. */
.site-nav-services .div-block-224.is-current-division {
    background: #ffffff26;
    border-radius: 4px;
    box-shadow: none;
}

/* Mobile content flow: remove desktop depth/overlap and stacked section gutters. */
@media screen and (max-width: 991px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service.af-3d {
        padding-top: 0;
        padding-bottom: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service .service-carousel.af-r {
        transform: none;
    }
}

@media screen and (max-width: 767px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .sec-crop-60 > .div-block-191 {
        margin-top: var(--space-10);
        padding: 0 var(--space-5) var(--space-6);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .div-block-191 .heading-15 {
        padding-top: 0;
        position: static;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .home-showcase.container {
        padding-top: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .home-showcase > .div-block-197 {
        padding-top: 0;
        margin-bottom: 28px;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-vision .hero_cont {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }
    .why-choose.grid-4 {
        padding: 0;
        gap: 28px;
    }
    .why-choose .div-block-193 {
        margin-top: 0;
        padding: 0;
    }
    .why-choose .heading-17 {
        margin-top: 0;
        margin-left: 0;
        line-height: 1.15;
    }
    .why-choose .bold-text-3 {
        font-size: inherit;
    }
    .why-choose .div-block-201 {
        max-height: none;
    }
    .why-choose .embd-glb {
        width: min(100%, 360px);
        min-width: 0;
        height: auto;
        max-height: none;
        aspect-ratio: auto;
    }
    .about-mission .rich-text-block-8 {
        width: 100%;
        padding: var(--space-6) 0 var(--space-10);
        text-align: left;
    }
    .about-mission .heading-7 {
        margin-top: 0;
    }
    .about-mission .div-block-173 {
        justify-content: flex-start;
    }
    .about-principles .paragraph-6 {
        text-align: left;
    }
    .about-principles h2 {
        margin-bottom: var(--space-4);
    }
    .ss-project-cta .container.hero_cont {
        padding: var(--space-8) var(--space-5) var(--space-12);
    }
    .ss-project-cta .div-block-41 {
        width: 100%;
        padding: var(--space-10) var(--space-5) var(--space-12);
        text-align: center;
    }
    .ss-project-cta .heading-16 {
        margin-top: 0;
        text-align: center;
        font-size: clamp(32px, 8vw, 48px);
        line-height: 1.1;
    }
    .ss-project-cta .paragraph-6 {
        margin: var(--space-5) auto 28px;
        text-align: center;
        line-height: 1.4;
    }
    .ss-project-cta .div-block-173 {
        gap: var(--space-6);
        margin: 0;
    }
}

/* Tablet gutters and headings follow normal flow instead of desktop side rails. */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .sec-crop-60:has(> .div-block-191) {
        padding: var(--space-12) 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .sec-crop-60 > .div-block-191 {
        position: relative;
        inset: auto;
        order: -1;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0 var(--space-8) var(--space-8);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .div-block-191 .heading-15 {
        position: static;
        transform: none;
        width: auto;
        min-width: 0;
        height: auto;
        margin: 0;
        font-size: clamp(60px, 7vw, 76px);
        line-height: 1.1;
        color: #637681;
        text-shadow: none;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .sec-crop-60:has(> .div-block-191) > .hero_cont.sub-sec-af {
        padding: 0 var(--space-8);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .home-showcase.container {
        padding: 0 var(--space-8);
        margin-bottom: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .home-showcase > .div-block-197 {
        padding: 0;
        margin: 0 0 var(--space-8);
        align-items: flex-start;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .home-showcase .div-block-195 {
        margin: 0;
        padding: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .home-showcase .heading-14 {
        margin-top: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .process-flow {
        margin-top: var(--space-16);
        padding: 0 var(--space-8);
    }
    @media (max-width: 991px) {
        html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .process-flow {
            margin-top: 112px;
            padding-inline: 72px;
        }
    }
    .process-flow__action {
        margin-left: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .sec-crop-60:has(> .div-block-191) > [data-we-do-carousel].hero_cont.sub-sec-af {
        padding-top: var(--space-16);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] .div-block-215 {
        padding: 0;
        gap: var(--space-8);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] .div-block-210 {
        gap: var(--space-6);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] .heading-16,
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] .heading-21 {
        margin: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] .text-span-4 {
        padding: 0 0 var(--space-3);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] .div-block-214 {
        margin: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] .div-block-173 {
        margin: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .home-showcase > .div-block-40 {
        width: 100%;
        padding: 0;
        margin: 0 0 var(--space-8);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .home-showcase .paragraph-6.std-al {
        margin: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .home-showcase > .hero_cont {
        padding-left: 0;
        padding-right: 0;
    }
    .why-choose.grid-4 {
        display: grid;
        grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
        gap: var(--space-8);
        padding: 0;
        align-items: start;
    }
    .why-choose .div-block-193 {
        min-width: 0;
        margin: 0;
        padding: 0;
    }
    .why-choose .heading-17 {
        margin: 0 0 var(--space-8);
        font-size: 36px;
        line-height: 1.15;
    }
    .why-choose .bold-text-3 {
        font-size: inherit;
    }
    .why-choose .heading-23 {
        margin-top: var(--space-8);
        margin-bottom: var(--space-3);
        font-size: 26px;
        line-height: 1.2;
    }
    .why-choose .paragraph-11 {
        margin-bottom: 0;
    }
    .why-choose .div-block-193 > .special_btn {
        margin-top: var(--space-8);
    }
    .why-choose .div-block-201 {
        order: 0;
        min-width: 0;
        max-height: none;
        align-self: stretch;
    }
    .why-choose .embd-glb {
        width: 100%;
        min-width: 0;
        height: auto;
        max-height: none;
        aspect-ratio: auto;
        margin: 0;
        position: sticky;
        top: 110px;
    }
    .about-mission.hero_cont {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
    .about-message-band.hero_cont {
        padding: 56px var(--space-8);
    }
    .ss-project-cta .container.hero_cont {
        padding: var(--space-8) var(--space-8) var(--space-12);
        margin-bottom: 0;
    }
    .ss-project-cta .div-block-41 {
        width: 100%;
        padding: var(--space-12) var(--space-8);
    }
    .ss-project-cta .heading-16 {
        margin-top: 0;
        font-size: 42px;
        line-height: 1.15;
        text-align: center;
    }
    .ss-project-cta .paragraph-6 {
        margin: var(--space-6) auto var(--space-8);
        text-align: center;
    }
    .ss-project-cta .div-block-173 {
        gap: var(--space-6);
        margin: 0;
    }
}

/* Compact process spacing when the illustration gives way to a single column. */
@media screen and (max-width: 991px) {
    .process-flow__left > .heading-17 {
        margin-bottom: 28px;
        font-size: clamp(28px, 4vw, 36px);
        line-height: 1.15;
    }
    .bold-text-3 {
        color: var(--brand-blue-pale);
        font-size: inherit;
        -webkit-text-stroke-width: 1px;
        text-shadow: -2px 2px var(--brand-blue-pale);
    }
    .process-flow__steps {
        padding-left: 56px;
        gap: var(--space-8);
    }
    .process-step__card {
        padding: var(--space-4) var(--space-5);
    }
    .process-step .heading-23 {
        margin: 0 0 10px;
        font-size: 26px;
        line-height: 1.2;
    }
    .process-step > .process-step__icon {
        left: -56px;
        top: 0;
        width: 40px;
        height: 40px;
    }
    .process-flow__steps::before {
        content: none;
    }
    .process-step::before {
        left: -36px;
        top: 20px;
        width: 1px;
        height: calc(100% + 32px);
    }
    .process-step:last-child::before {
        content: none;
    }
}

/* Keep the floating bot ten pixels from the viewport edges at every size. */
.div-block-39 {
    margin: 10px;
}

/* Tablet navigation reaches both viewport edges; padding stays inside the panel. */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .site-nav-drawer .site-nav-drawer__panel {
        padding-left: 0;
        padding-right: 0;
    }
    .site-nav-drawer .site-nav-drawer__container {
        width: 100%;
        max-width: none;
        min-height: 100svh;
        margin: 0;
        border-radius: 0;
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .site-nav-drawer .site-nav-about.link-block-10 {
        flex-direction: column;
        align-items: flex-start;
        margin-left: 0;
        padding: 4px var(--space-3);
        background: transparent;
        box-shadow: none;
    }
    .site-nav-drawer .site-nav-about .div-block-226 {
        align-items: flex-start;
        margin: 0;
        padding: var(--space-2) 0 0;
    }
    .site-nav-drawer .site-nav-about .popup-abus {
        flex-direction: column;
        border-radius: 6px;
        padding: var(--space-3);
        box-shadow: none;
    }
    .site-nav-drawer .site-nav-about .popup-abus > .inner-no-pad {
        display: none;
    }
    .site-nav-drawer .site-nav-about .div-block-228 {
        flex-flow: column nowrap;
        align-items: stretch;
        margin-top: 0;
    }
    .site-nav-drawer .site-nav-about .link-block-13 {
        border-radius: 4px;
    }
    .div-block-6 {
        background-color: transparent;
        background-image: linear-gradient(90deg, var(--subhero-surface) 58%, transparent);
        width: auto;
        max-width: 70%;
        padding-right: 18%;
        margin-right: -14%;
    }
}

/* Bobby's future chat embed: the tiled reveal is behind the blank surface. */
.div-block-39[role="button"] {
    cursor: pointer;
}

.div-block-39[role="button"]:focus-visible {
    outline: 2px solid var(--link-blue);
    outline-offset: 4px;
}

.bobby-chat {
    --bg-base: #e1e9eb;
    --chat-bottom: 62px;
    position: fixed;
    inset: auto max(10px,env(safe-area-inset-right)) max(var(--chat-bottom),env(safe-area-inset-bottom)) auto;
    z-index: 110;
    width: min(350px,calc(100vw - 32px - env(safe-area-inset-right)));
    height: min(440px,calc(100dvh - var(--chat-bottom) - 16px - env(safe-area-inset-bottom)));
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    overflow: hidden;
    isolation: isolate;
}

.bobby-chat:not([open]) {
    display: none;
}

.bobby-chat .ssm-menu-ripple {
    --ripple-origin-x: 100%;
    --ripple-origin-y: 100%;
}

.bobby-chat__surface {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: var(--bg-base);
    animation: bobby-chat-surface .2s ease .85s both;
}

.bobby-chat__close {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ftrbg);
    font: 32px/1 sans-serif;
    cursor: pointer;
}

.bobby-chat__close:focus-visible {
    outline: 2px solid var(--link-blue);
    outline-offset: -4px;
}

.bobby-chat__embed {
    width: 100%;
    height: 100%;
    padding: 56px 0 var(--space-6);
}

.bobby-chat__notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: var(--space-6);
    text-align: center;
    color: var(--ftrbg);
    font-family: inherit;
    font-size: 18px;
    line-height: 1.5;
}

@keyframes bobby-chat-surface {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body:has(.bobby-chat[open]) .div-block-39 {
    z-index: 111;
}

@media(prefers-reduced-motion:reduce) {
    .bobby-chat__surface {
        animation: none;
    }
}

.bobby-chat--closing .bobby-chat__surface {
    animation: none;
    opacity: 0;
    pointer-events: none;
}

@media(min-width:768px) and (max-width:991px) {
    .bobby-chat {
        --chat-bottom: 50px;
    }
}

@media(max-width:767px) {
    .bobby-chat {
        --chat-bottom: 69px;
    }
}

/* Breadcrumbs use a compact solid surface across page layouts. */
nav:is(.blog-breadcrumb,.team-breadcrumb,.ss-breadcrumb) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px var(--space-2);
    width: fit-content;
    max-width: 100%;
    padding: var(--space-2) var(--space-3);
    border-radius: 31px;
    background: #ffffff73;
    box-shadow: none;
}

nav:is(.blog-breadcrumb,.team-breadcrumb,.ss-breadcrumb) a,
nav:is(.blog-breadcrumb,.team-breadcrumb,.ss-breadcrumb) a:hover {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--brand-ink);
    font-size: 14px;
    line-height: 1.4;
}

nav:is(.blog-breadcrumb,.team-breadcrumb,.ss-breadcrumb) a:hover {
    color: var(--brand-slate-dark);
}

nav:is(.blog-breadcrumb,.team-breadcrumb,.ss-breadcrumb) > span:not([aria-current]) {
    display: none;
}

nav:is(.blog-breadcrumb,.team-breadcrumb,.ss-breadcrumb) [aria-current] {
    display: inline;
    opacity: 1;
    color: var(--brand-gray-blue);
    font-weight: 600;
    overflow-wrap: anywhere;
}

nav:is(.blog-breadcrumb,.team-breadcrumb,.ss-breadcrumb) > :is(a,[aria-current]) ~ :is(a,[aria-current])::before {
    content: "/";
    color: #000;
    font-weight: 400;
    display: inline-block;
    margin-right: var(--space-2);
}

@media(max-width:767px) {
    nav:is(.blog-breadcrumb,.team-breadcrumb,.ss-breadcrumb) {
        padding: 6px 10px;
        gap: 6px;
    }
}

/* Live hero ripple controls. The resting trigger is exactly 16 × 16 CSS pixels. */
.ripple-settings-dot {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 20;
    width: 16px;
    height: 16px;
    min-width: 16px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #173853;
    cursor: pointer;
    transition: transform .18s ease;
    box-shadow: 0 0 0 1px #173853;
}

.ripple-settings-dot::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
}

.ripple-settings-dot:hover,.ripple-settings-dot:focus-visible {
    transform: scale(1.5);
    outline: 2px solid var(--brand-slate);
    outline-offset: 4px;
}

.ripple-settings {
    position: fixed;
    inset: auto 20px 20px auto;
    margin: 0;
    width: min(480px,calc(100vw - 32px));
    max-height: calc(100dvh - 40px);
    padding: var(--space-6);
    border: 1px solid var(--border-col);
    border-radius: 20px;
    background: var(--bg-hero);
    color: var(--font-base,var(--brand-ink));
    box-shadow: 0 12px 40px #17385333;
    overflow: auto;
    overscroll-behavior: contain;
}

.ripple-settings::backdrop {
    background: transparent;
}

.ripple-settings-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    justify-content: space-between;
}

.ripple-settings-head .heading-22 {
    margin: 0 0 var(--space-2);
    font-size: 24px;
}

.ripple-settings-head p {
    font-size: 14px;
    margin: 0 0 var(--space-4);
}

.ripple-settings-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border-col);
    border-radius: 50%;
    background: #fff;
    color: #173853;
    font-size: 24px;
    cursor: pointer;
}

.ripple-settings summary {
    cursor: pointer;
    padding: 14px 0;
    font-weight: 600;
}

.ripple-settings-fields>details {
    border-top: 1px solid var(--border-col);
}

.ripple-settings-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 82px;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-4);
}

.ripple-settings-row label {
    grid-column: 1 / -1;
    font-size: 14px;
    margin: 0;
}

.ripple-settings-row input {
    min-width: 0;
    width: 100%;
    accent-color: var(--brand-slate);
}

.ripple-settings-row input[type=number] {
    border: 1px solid var(--border-col);
    border-radius: 6px;
    padding: 6px;
    background: #fff;
    color: #173853;
}

.ripple-settings-row input[type=color] {
    height: 36px;
    width: 100%;
    grid-column: 1 / -1;
    padding: 3px;
    border: 1px solid var(--border-col);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.ripple-settings-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-col);
}

.ripple-settings .special_btn {
    padding: 10px var(--space-4);
    border: 0;
    border-radius: var(--radius-sm);
    background: #173853;
    color: #fff;
    cursor: pointer;
    box-shadow: none;
    min-width: 0;
}

.ripple-settings .text-block-65 {
    font-size: 14px;
    line-height: 1.4;
    color: inherit;
}

.ripple-settings-reset {
    border: 0;
    padding: 10px 0;
    background: transparent;
    color: #173853;
    text-decoration: underline;
    cursor: pointer;
}

.ripple-settings-json label {
    font-size: 13px;
}

.ripple-settings-json textarea {
    display: block;
    width: 100%;
    height: 180px;
    padding: var(--space-3);
    border: 1px solid var(--border-col);
    border-radius: var(--radius-sm);
    background: #fff;
    color: #173853;
    font: 12px/1.5 monospace;
    resize: vertical;
}

.ripple-settings-status {
    font-size: 13px;
    min-height: 20px;
    margin: var(--space-3) 0 0;
}

@media(max-width:479px) {
    .ripple-settings {
        inset: auto 16px 16px;
        padding: 18px;
        max-height: calc(100dvh - 32px);
    }
}

@media(prefers-reduced-motion:reduce) {
    .ripple-settings-dot {
        transition: none;
    }
}

.ripple-settings-actions .special_btn {
    order: 0;
    flex: 1 1 auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    background-image: none;
    text-shadow: none;
}

.ripple-settings-actions .special_btn .btn_overlay {
    display: none;
}

.ripple-settings-actions .special_btn .text-block-65 {
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
    text-shadow: none;
    transform: none;
}

/* Approved homepage title refinement; the surrounding layout stays unchanged. */
html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance .heading-6 {
    font-size: clamp(44px,4.6vw,72px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.035em;
    text-transform: none;
    text-align: left;
    text-shadow: none;
    width: 100%;
    max-width: none;
    margin: 0;
}

html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance .heading-6 .text-span {
    color: var(--hero-accent-color);
}

html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance .hero-title-location {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: none;
    margin-top: var(--space-6);
    white-space: normal;
}

@media(max-width:991px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance .heading-6 {
        font-size: clamp(44px,7vw,64px);
    }
}

@media(max-width:767px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance .heading-6 {
        font-size: clamp(40px,10vw,60px);
    }
}

/* Review refinements: crisp clock relief and room for Bobby's larger artwork. */
.site-nav-drawer .div-block-221 {
    filter: none;
    color: #748b9b;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #455c70;
}

.div-block-39 {
    width: 75px;
    height: 75px;
}

.bobby-chat {
    --chat-bottom: 95px;
}

@media(min-width:992px) {
    .div-block-39 {
        width: 135px;
        height: 135px;
    }
    .bobby-chat {
        --chat-bottom: 155px;
    }
}

@media(max-width:767px) {
    .div-block-39 {
        width: 91.2px;
        height: 91.2px;
        margin: 0;
        right: 0;
        bottom: 0;
    }
    .bobby-chat {
        --chat-bottom: 99.2px;
    }
}

/* Main menu hierarchy: secondary links are one golden-ratio step smaller. */
.site-nav-drawer__links {
    --nav-link-size: 1.375rem;
    --nav-size-ratio: 1.618;
}

.site-nav-drawer .site-nav-drawer__links > .link-block-10 {
    width: auto;
    font-size: var(--nav-link-size);
    font-weight: 400;
    font-stretch: normal;
}

.site-nav-drawer .site-nav-secondary > .link-block-10 {
    font-size: calc(var(--nav-link-size) / var(--nav-size-ratio));
    font-weight: 400;
    min-height: 32px;
    align-items: center;
}

.menu.is-open .bar01 {
    background-color: #c96666;
}

/* Keep the desktop clock label below the fixed brand mark. */
.site-nav-drawer .site-nav-clock-label {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--brand-slate);
    margin: 0;
}

.site-nav-drawer .site-nav-clock-zone {
    color: #a65353;
}

@media(min-width:992px) {
    .site-nav-drawer .site-nav-clock {
        padding-top: var(--space-16);
    }
    .site-nav-drawer .site-nav-clock-label {
        font-size: 11px;
        flex: 0 0 auto;
    }
    .site-nav-drawer .site-nav-clock .div-block-221 {
        flex: 0 0 auto;
    }
}

/* Image viewers and repeated navigation clicks never select their contents. */
:is(.portfolio-preview,.ss-gallery-modal),
:is(.portfolio-preview,.ss-gallery-modal) *,
:is([data-slide-prev],[data-slide-next],.w-slider-arrow-left,.w-slider-arrow-right) {
    -webkit-user-select: none;
    user-select: none;
}

:is(.portfolio-preview,.ss-gallery-modal) img {
    -webkit-user-drag: none;
}

:is([data-preview-prev],[data-preview-next],[data-slide-prev],[data-slide-next],.w-slider-arrow-left,.w-slider-arrow-right) svg {
    pointer-events: none;
}

.site-nav-secondary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

@media(max-width:767px) {
    .site-nav-drawer .site-nav-drawer__panel {
        padding: 0;
        width: 100%;
        min-height: 100dvh;
    }
    .site-nav-drawer .site-nav-drawer__container {
        width: 100%;
        max-width: none;
        min-height: 100dvh;
        margin: 0;
        border-radius: 0;
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }
}

/* Compact menu: horizontal service groups that wrap as space narrows. */
@media(max-width:991px) {
    .site-nav-drawer .site-nav-services .div-block-223 {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 28px var(--space-4);
        padding: var(--space-4) var(--space-3) var(--space-6);
    }
    .site-nav-drawer .site-nav-services .div-block-224 {
        flex: 1 1 180px;
        width: auto;
        min-width: 180px;
        max-width: 100%;
        gap: 6px;
    }
    .site-nav-drawer .site-nav-services .link-block-12 {
        padding: 10px 14px;
        margin-top: 3px;
        margin-bottom: 3px;
    }
}

@media(max-width:767px) {
    .site-nav-drawer .site-nav-services .div-block-224 {
        flex: 0 1 calc((100% - 16px)/2);
        min-width: 200px;
        align-items: flex-start;
    }
    .site-nav-drawer .site-nav-services .div-block-224 > a {
        flex: 0 0 auto;
        align-self: flex-start;
        width: fit-content;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }
}

@media(max-width:479px) {
    .site-nav-drawer .site-nav-services .div-block-224 {
        flex: 0 1 auto;
        width: auto;
        min-width: min(200px,100%);
    }
}

/* Give mobile navigation the same gutters and rhythm as the service actions. */
@media(max-width:767px) {
    .site-nav-drawer .site-nav-drawer__links {
        margin-left: 0;
        padding: var(--space-3) var(--space-2);
        gap: var(--space-2);
    }
    .site-nav-drawer .site-nav-services .inner-links-cont {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        border: 0;
        width: 100%;
    }
    .site-nav-drawer .site-nav-service-actions {
        padding: var(--space-3) var(--space-2);
        gap: var(--space-2);
    }
    .site-nav-drawer .site-nav-secondary {
        gap: 4px;
    }
}

@media(max-width:991px) {
    .site-nav-drawer .site-nav-service-actions {
        justify-content: flex-start;
    }
}

/* Room around the clock and scroll space beyond the compact menu's last item. */
.site-nav-drawer .site-nav-clock {
    padding-right: var(--space-5);
    padding-bottom: var(--space-6);
    padding-left: var(--space-5);
}

@media(max-width:991px) {
    .site-nav-drawer .site-nav-clock {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: var(--space-4) 0 0;
        padding: var(--space-6) var(--space-5);
    }
    .site-nav-drawer .site-nav-drawer__container {
        padding-bottom: calc(32px + env(safe-area-inset-bottom));
    }
    .site-nav-drawer {
        scroll-padding-bottom: 32px;
    }
}

/* Compact menu: only the close icon receives pointer input. */
@media(max-width:991px) {
    .menu.is-open,.menu.is-open:hover,.menu.is-open:focus,.menu.is-open:focus-visible {
        width: 44px;
        height: 44px;
        padding: 0;
        gap: 0;
        justify-content: center;
        background: transparent;
        border: 0;
        box-shadow: none;
        outline: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        pointer-events: none;
    }
    .menu.is-open .m-txt {
        display: none;
    }
    .menu.is-open .ic-bars {
        width: 44px;
        height: 44px;
        pointer-events: auto;
    }
    .menu.is-open .bar01 {
        width: 32px;
        pointer-events: none;
    }
    .menu.is-open:focus-visible .ic-bars {
        outline: 2px solid #c96666;
        outline-offset: 2px;
        border-radius: 4px;
    }
}

/* Scroll the compact panel above a half-screen of the fixed blurred backdrop. */
@media(max-width:991px) {
    .site-nav-drawer .hholder-cnt-nav {
        flex-flow: column nowrap;
        align-items: stretch;
    }
    .site-nav-drawer .site-nav-drawer__links {
        order: 0;
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
    }
    .site-nav-drawer .site-nav-services {
        order: 1;
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }
    .site-nav-drawer .site-nav-clock {
        order: 2;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
    }
    .site-nav-drawer::after {
        content: "";
        display: block;
        height: 50dvh;
        position: relative;
        pointer-events: none;
    }
}

@media(max-width:991px) {
    .site-nav-drawer .site-nav-drawer__container {
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
}

/* Homepage compact layouts: consistent gutters, alignment and section rhythm. */
@media(max-width:991px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance .div-block-29 {
        align-items: flex-start;
        text-align: left;
        gap: var(--space-6);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance .paragraph-3 {
        margin: 0;
        max-width: 550px;
        text-align: left;
        line-height: 1.4;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance .hero-quote {
        align-self: flex-start;
        margin: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance .text-block-3 {
        text-align: left;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service .af-c {
        padding: var(--space-6);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service .div-block-17 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--space-6);
        width: 100%;
        height: 100%;
        margin: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service .rich-text-block-11 {
        width: 100%;
        align-self: stretch;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service .heading-5 {
        margin: 0 0 var(--space-4);
        min-height: 2.4em;
        line-height: 1.2;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service .paragraph-13 {
        margin: 0;
        line-height: 1.4;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service .slbtn {
        margin: auto 0 0;
        align-self: flex-start;
        max-width: 100%;
    }
}

@media(min-width:768px) and (max-width:991px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service .div-block-17 {
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service .rich-text-block-11 {
        text-align: center;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service .slbtn {
        margin-inline: auto;
        align-self: center;
    }
}

@media(max-width:767px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero_cont.hero-entrance {
        padding: 0 var(--space-6) var(--space-10);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service .slbtn {
        margin-inline: auto;
        align-self: center;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance .grid-2 {
        margin: var(--space-5) 0 var(--space-6);
        gap: var(--space-10);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #services > .div-block-191 {
        padding: 0 var(--space-6) var(--space-6);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #services > [data-we-do-carousel].hero_cont.sub-sec-af {
        padding: 56px var(--space-6) var(--space-12);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] .div-block-215 {
        padding: 0;
        gap: var(--space-8);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] .div-block-210 {
        gap: var(--space-6);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] .heading-16,
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] .heading-21 {
        margin: 0;
        text-align: center;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] .text-span-4 {
        padding: 0 0 var(--space-3);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] .div-block-214,
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] .div-block-173 {
        margin: 0;
    }
}

@media(max-width:479px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service .heading-5 {
        min-height: 0;
    }
}

/* Reusable decorative quotation glyph: size with font-size, tint with color. */
.ss-quote-mark {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url('../images/quote.svg') center / contain no-repeat;
    mask: url('../images/quote.svg') center / contain no-repeat;
    vertical-align: middle;
}

/* Review CTA: highlight the entire clickable surface. */
@media (min-width: 992px) {
    .ambient-reviews .link-block-8:is(:hover, :focus-visible) {
        background-color: #9eabdb29;
        box-shadow: none;
    }
    .ambient-reviews .link-block-8 .div-block-198 {
        isolation: isolate;
    }
    .ambient-reviews .link-block-8 .review-blurr {
        transition: box-shadow .2s ease;
    }
    .ambient-reviews .link-block-8:is(:hover, :focus-visible) .review-blurr {
        box-shadow: inset 4px 4px 9px #304f6333, inset -4px -4px 9px #ffffff80;
    }
    .ambient-reviews .link-block-8:focus-visible {
        outline: none;
        background-color: #9eabdb40;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-reviews .link-block-8 .review-blurr {
        transition: none;
    }
}

/* Source Select soft components, promoted from the approved Utilities reference. */
.ss-soft-button {
    --soft-button-surface: var(--button-light-surface);
    --soft-button-ink: var(--button-light-text);
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    border-radius: 48px;
    vertical-align: middle;
}

.special_btn.ss-soft-button > .text-block-65,
.ss-soft-panel--slate .special_btn > .text-block-65 {
    background: var(--soft-button-surface);
    color: var(--soft-button-ink);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: none;
    padding: 14px var(--space-5);
    border-color: #ffffffa6;
    border-right-color: #a9e5ff80;
    border-bottom-color: #fcffd880;
    white-space: normal;
    text-align: center;
}

/* Contact actions retain the browser-selected gray-blue label and existing surfaces. */
.special_btn.ss-contact-button > .text-block-65 {
    color: var(--text-contact);
}

.ss-soft-button:active > .text-block-65 {
    transform: translateY(1px);
}

.ss-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-6) var(--space-10);
    margin-top: var(--space-10);
}

.ss-actions > .special_btn {
    order: 0;
    margin: 0;
    max-width: 100%;
}

.ss-actions .text-block-65 {
    white-space: normal;
    text-align: center;
}

.ss-actions > p {
    margin: 0;
}

.ss-soft-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-2) 0;
    color: var(--link-blue);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
    font-weight: 500;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: color .2s ease;
}

.ss-soft-link:hover {
    color: var(--link-blue-inline-hover);
    text-decoration-thickness: 2px;
}

.ss-soft-panel {
    padding: clamp(28px, 5vw, 64px);
    border: 1px solid #ffffff60;
    border-radius: var(--radius-panel);
    background: var(--bg-base);
    box-shadow: 10px 12px 28px #304f631a, -8px -8px 24px #ffffff70;
    color: var(--brand-ink);
}

@media (min-width: 992px) {
    .ss-soft-panel {
        background: rgba(206, 229, 235, .27);
    }
}

.ss-soft-panel :is(.heading-19, .heading-22) {
    margin-top: 0;
    color: inherit;
}

.ss-soft-panel .heading-19 {
    margin-bottom: var(--space-6);
}

.ss-soft-panel p {
    max-width: 58ch;
    margin: 0 0 var(--space-6);
}

.ss-soft-panel .ss-actions {
    margin-top: var(--space-8);
}

.ss-soft-panel.ss-soft-panel--idea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    text-align: left;
}

.ss-soft-panel--idea > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    max-width: calc((100% - 40px) / 2);
}

.ss-soft-panel--idea > div > p {
    margin-bottom: 0;
}

.ss-soft-panel--idea .ss-soft-mark {
    flex-shrink: 0;
    margin-left: auto;
}

.ss-soft-mark {
    margin: 0;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    max-width: 320px;
    width: 100%;
    justify-self: center;
    border-radius: 50%;
    background: var(--bg-hero);
    box-shadow: inset 8px 8px 20px #304f6326, inset -8px -8px 20px #ffffff80;
}

.ss-soft-mark img {
    width: 75%;
    height: auto;
}

.ss-soft-panel--slate {
    background: var(--brand-slate-dark);
    color: var(--text-on-dark-muted);
    border-color: var(--border-on-dark);
    border-top-color: var(--border-on-dark-top);
    border-bottom-color: var(--border-on-dark-bottom);
}

/* Match the Running-business surface, white copy, and yellow emphasis. */
.ss-brand-invitation--shout .ss-soft-panel--slate {
    background: var(--surface-shout);
    color: var(--text-on-dark);
}

.ss-brand-invitation--shout .ss-yellow-text {
    color: var(--brand-yellow-bright);
}

html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .heading-14 {
    color: rgb(117 133 148);
}

.ss-soft-quote {
    position: absolute;
    top: -44px;
    left: -28px;
    display: block;
    opacity: 1;
    font-size: clamp(96px, 8vw, 128px);
    color: var(--text-muted);
    margin: 0;
    pointer-events: none;
    z-index: -1;
}

.ss-yellow-text {
    color: var(--brand-yellow);
}

.ss-soft-panel--yellow {
    background: var(--brand-yellow-soft);
    border-color: #fff5d6;
}

.ss-soft-steps {
    margin-top: var(--space-12);
    padding-top: var(--space-8);
}

.ss-soft-steps > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-5) var(--space-4);
}

.ss-soft-steps > div > span {
    display: block;
    /* Surface-toned numerals with a restrained raised edge; no badge background. */
    color: #c2d8de;
    background: none;
    text-shadow: -1px -1px 1px #ffffffb3, 1px 2px 2px #52677966;
    font-family: "Kanit", sans-serif;
    font-size: clamp(64px, 6vw, 96px);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: .85;
    letter-spacing: -.065em;
    margin: 0;
}

@media (min-width: 992px) {
    .ss-soft-steps > div > span {
        color: rgba(0, 200, 255, .14);
        font-size: clamp(50px, 8vw, 135px);
    }
}

.ss-soft-steps > div > .heading-22 {
    margin: 0;
}

.ss-soft-steps > div > p {
    grid-column: 1 / -1;
}

.ss-soft-steps .heading-22 {
    margin-bottom: var(--space-4);
}

.ss-soft-steps p {
    margin-bottom: 0;
}

.ss-soft-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.ss-soft-strip > div {
    min-width: 0;
}

.ss-soft-strip .special_btn {
    flex-shrink: 0;
}

.ss-soft-strip p {
    margin: 0;
}

:is(.ss-soft-button, .ss-soft-link):focus-visible {
    outline: 3px solid var(--brand-ink);
    outline-offset: 5px;
}

.ss-soft-panel--slate .ss-soft-button:focus-visible {
    outline-color: var(--brand-yellow);
}

@media (max-width: 991px), (max-width: 1366px) and (hover: none) and (pointer: coarse) {
    .ss-soft-panel.ss-soft-panel--idea {
        flex-direction: column;
        row-gap: var(--space-10);
    }
    .ss-soft-panel--idea > div {
        width: 100%;
        max-width: none;
    }
    .ss-soft-panel--idea .ss-soft-mark {
        order: -1;
        margin-inline: auto;
        max-width: 240px;
    }
}

@media (max-width: 991px) {
    .ss-soft-mark {
        max-width: 240px;
    }
}

@media (max-width: 767px) {
    .ss-soft-panel {
        padding: 28px var(--space-5);
        border-radius: 20px;
    }
    .ss-soft-strip {
        flex-direction: column;
        align-items: flex-start;
    }
    .ss-soft-strip .special_btn {
        align-self: flex-start;
    }
    .ss-soft-panel .heading-19 {
        font-size: 36px;
        line-height: 1.15;
    }
    .special_btn.ss-soft-button > .text-block-65 {
        font-size: 20px;
        padding: var(--space-3) 18px;
    }
    .ss-actions {
        gap: var(--space-5) var(--space-8);
    }
    }

@media (prefers-reduced-motion: reduce) {
    .ss-soft-button *, .ss-soft-link {
        transition: none !important;
    }
    .ss-soft-button:is(:hover, :active) .text-block-65 {
        transform: none;
    }
}

@media (max-width: 767px) {
    .ss-soft-steps > div {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: var(--space-3);
    }
    .ss-soft-steps > div > span {
        font-size: 64px;
    }
    .ss-soft-steps > div > .heading-22 {
        font-size: clamp(20px, 6vw, 30px);
    }
}

/* Cropped identity stays decorative; the original mark keeps its proportions. */
.ss-soft-panel--slate {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

.ss-soft-panel--slate::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: url('../images/ssm-logo.svg') 175% center / 68% auto no-repeat;
    filter: grayscale(1) brightness(2);
    opacity: .16;
    pointer-events: none;
}

.ss-soft-panel--slate > p {
    max-width: 62%;
}

.ss-soft-button--on-dark,
.ss-soft-panel--slate .special_btn,
.ss-quote-button {
    --soft-button-surface: var(--button-dark-surface);
    --soft-button-ink: var(--button-dark-text);
}

.ss-soft-button--on-dark > .text-block-65,
.ss-soft-panel--slate .special_btn > .text-block-65 {
    border-color: #ffffff26;
    box-shadow: 4px 5px 10px #182a3a33, -3px -3px 9px #ffffff0d;
}

.ss-soft-button--on-dark > .btn_overlay.high_pros.dark,
.ss-soft-panel--slate .special_btn > .btn_overlay.high_pros.dark {
    opacity: .2;
}

.ss-soft-button--on-dark:is(:hover, :focus-visible) > .text-block-65,
.ss-soft-panel--slate .special_btn:is(:hover, :focus-visible) > .text-block-65 {
    box-shadow: inset 3px 3px 7px #182a3a40, inset -3px -3px 7px #ffffff14;
}

@media (max-width: 767px) {
    .ss-soft-panel--slate::before {
        background-size: 125% auto;
        background-position: -200% center;
        opacity: .09;
    }
    .ss-soft-quote {
        top: -44px;
        left: -18px;
        font-size: 72px;
    }
    .ss-soft-panel--slate > p {
        max-width: 100%;
    }
}

/* A simple upper-right corner, drawn consistently instead of font arrows. */
.ss-link-corner {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-radius: 0 2px 0 0;
}

.ss-soft-link .ss-link-corner {
    color: var(--base-clr);
}

.ss-soft-button .ss-link-corner {
    color: inherit;
}

/* Supplied rounded corner asset: open blue CTA treatment, no enclosure. */
.ss-soft-link {
    color: var(--link-blue-open);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.4;
    gap: var(--space-2);
    text-decoration: none;
}

/* The supplied artwork follows the link color; the closing invitation keeps its original SVG. */
.ss-soft-link:not(.ss-brand-invitation--project *):has(> img.ss-link-corner)::after {
    content: "";
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    align-self: flex-start;
    margin-top: -8px;
    background: currentColor;
    -webkit-mask: url('../images/link-corner.svg') center / contain no-repeat;
    mask: url('../images/link-corner.svg') center / contain no-repeat;
}

.ss-soft-link:not(.ss-brand-invitation--project *) > img.ss-link-corner {
    display: none;
}

.ss-soft-link > img.ss-link-corner {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    align-self: flex-start;
    margin-top: -8px;
    border: 0;
    border-radius: 0;
    object-fit: contain;
}

.ss-soft-link:hover {
    color: var(--link-blue-open-hover);
    text-decoration: underline;
    text-underline-offset: 6px;
}

@media (max-width: 767px) {
    .ss-soft-link {
        font-size: 18px;
    }
}


/* Preserve the approved direction invitation when shared heading/action roles change. */
.ss-brand-invitation--project {
    --brand-slate: var(--brand-gray-blue);
    --link-blue: #0068f0;
    --link-blue-open: #048eff;
    --link-blue-open-hover: #0068d7;
    --link-blue-inline-hover: #165bad;
    --quote-primary: #11a2da;
    --quote-primary-hover: #3a6576;
}

/* Direction-sign panel: artwork meets the divider and rises above the surface. */
.ss-project-direction {
    overflow: visible;
}

.ss-project-intro {
    display: flex;
    flex-direction: row;
    align-items: end;
}

.ss-project-sign {
    position: relative;
    min-width: 0;
    margin: 0;
    align-self: stretch;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ss-soft-panel.ss-project-direction .ss-project-sign img {
    position: absolute;
    bottom: 0;
    display: block;
    width: 125%;
    max-width: 520px;
    height: auto;
}

.ss-project-intro-copy {
    flex: 1 1 425px;
    padding-bottom: var(--space-10);
}

.ss-project-intro-copy p, .ss-project-intro-copy .heading-19 {
    max-width: none;
}

.ss-project-intro-copy .heading-19 {
    font-size: clamp(32px, 3vw, 44px);
    line-height: 1.1;
}

.ss-project-intro-copy .ss-actions {
    gap: var(--space-6);
}

.ss-project-direction .ss-soft-steps {
    margin-top: 0;
}

@media (max-width: 991px) {
    .ss-project-intro {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .ss-project-sign {
        width: min(100%, 480px);
        margin: -180px auto 0;
    }
    .ss-soft-panel.ss-project-direction .ss-project-sign img {
        position: static;
        width: 100%;
        max-width: 100%;
    }
    .ss-project-intro-copy {
        max-width: var(--ss-reading-width);
        padding-top: 0;
        margin: 0 auto;
    }
    .ss-project-sign {
        border-bottom: 1px solid #877b5930;
    }
}

@media (max-width: 767px) {
    .ss-project-sign {
        width: calc(100% + 40px);
        margin: -112px -20px 0;
    }
    .ss-project-intro-copy .heading-19 {
        font-size: 32px;
    }
}

/* Shout-out cutout: the copy stays together while artwork breaks the panel edge. */

.ss-shoutout-split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: var(--space-10);
    align-items: center;
}

.ss-shoutout-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    width: 100%;
    max-width: 700px;
    margin-inline: auto;
    text-align: center;
}

.ss-shoutout-copy .heading-19 {
    font-size: clamp(36px, 3.5vw, 52px);
    line-height: 1.1;
}

.ss-shoutout-image {
    width: 160%;
    margin: -160px -180px -130px -24px;
    position: relative;
    pointer-events: none;
}

.ss-shoutout-image img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    .ss-shoutout-split {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .ss-shoutout-image {
        width: min(110%, 600px);
        justify-self: center;
        margin: 0 -5% -140px;
    }
}

@media (max-width: 767px) {
    .ss-shoutout-copy .heading-19 {
        font-size: 36px;
    }
    .ss-shoutout-image {
        width: calc(100% + 60px);
        margin: 0 -30px -105px;
    }
}

@media (min-width: 992px) and (max-width: 1439px) {
    .ss-shoutout-image {
        width: 130%;
        margin: -120px -100px -100px -24px;
    }
}

/* Consistent section spacing; stacked cutouts reserve only their overhang. */
.ss-brand-invitation {
    padding-block: var(--space-16);
}

.ss-brand-invitation .ss-shoutout-image {
    max-width: calc(100% + 130px);
}

.ss-brand-invitation h2.heading-19, .ss-soft-panel--idea h2.heading-19 {
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.1;
}

.ss-brand-invitation .ss-project-intro-copy .heading-19 {
    font-size: clamp(32px, 3vw, 44px);
}

@media(max-width:991px) {
    .ss-brand-invitation--project {
        padding-top: 120px;
    }
    .ss-brand-invitation--shout {
        padding-top: var(--space-16);
        padding-bottom: 120px;
    }
}

@media(max-width:767px) {
    .ss-brand-invitation {
        padding-block: var(--space-10);
    }
    .ss-brand-invitation--project {
        padding-top: var(--space-20);
    }
    .ss-brand-invitation--shout {
        padding-top: var(--space-12);
        padding-bottom: 104px;
    }
    .ss-brand-invitation .heading-19 {
        font-size: 36px;
    }
    .ss-brand-invitation .ss-project-intro-copy .heading-19 {
        font-size: 32px;
    }
}

/* Shared invitations use the same layout primitives on every page. */
.ss-brand-invitation .ss-grid,
.ss-brand-invitation--project .ss-soft-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-10);
}

.ss-brand-invitation .ss-project-intro,
.ss-brand-invitation--project .ss-project-intro {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10);
}

.ambient-reviews .link-block-8 {
    padding: var(--space-5) var(--space-6);
    border: 0;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .2s ease;
}

.ambient-reviews .link-block-8:is(:hover, :focus-visible) .text-block-70 {
    opacity: 1;
}

@media(max-width:991px) {
    .ss-brand-invitation .ss-grid,
    .ss-brand-invitation--project .ss-soft-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ss-brand-invitation .ss-project-intro,
    .ss-brand-invitation--project .ss-project-intro {
        grid-template-columns: 1fr;
    }
}

@media(max-width:767px) {
    .ss-brand-invitation .ss-grid,
    .ss-brand-invitation--project .ss-soft-steps {
        grid-template-columns: 1fr;
    }
}

@media(prefers-reduced-motion:reduce) {
    .ambient-reviews .link-block-8 {
        transition: none;
    }
}

/* Inline emphasis keeps the connecting words quiet and the idea prominent. */
.ss-project-title-line {
    display: block;
    white-space: nowrap;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 400;
    line-height: 1.25;
}

.ss-project-title-line strong {
    font-size: clamp(44px, 5.2vw, 72px);
    font-weight: 700;
    color: var(--brand-slate-dark);
}

@media(max-width:767px) {
    .ss-project-title-line {
        font-size: clamp(16px, 4.2vw, 22px);
    }
    .ss-project-title-line strong {
        font-size: clamp(30px, 8vw, 44px);
    }
}

.ss-project-title-line:first-child {
    text-align: left;
}

.ss-project-title-line:last-child {
    text-align: right;
}

/* Shared invitation artwork uses the same motion on every page. */
.ss-brand-invitation--shout .ss-soft-panel::before {
    animation: ss-logo-breathe 20s linear infinite;
    animation-play-state: paused;
}

@property --ss-sign-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: -25deg;
}

.ss-brand-invitation--project .ss-project-sign img {
    position: relative;
    /* Turn around the stem’s vertical axis; its base remains anchored. */
    transform-origin: center bottom;
    /* Counteract rotation's horizontal foreshortening throughout the turn. */
    transform: perspective(800px) rotateY(var(--ss-sign-angle)) scaleX(calc(1 / cos(var(--ss-sign-angle))));
    clip-path: inset(0 round 20px);
    animation: ss-sign-sway 7s ease-in-out infinite;
    animation-play-state: paused;
}

.ss-invitation-moving .ss-soft-panel::before,
.ss-invitation-moving .ss-project-sign img {
    animation-play-state: running;
}

@keyframes ss-logo-breathe {
    0%, 100% {
        background-size: 68% auto;
    }
    50% {
        background-size: 75% auto;
    }
}

@keyframes ss-sign-sway {
    0%, 100% {
        --ss-sign-angle: -25deg;
    }
    50% {
        --ss-sign-angle: 25deg;
    }
}

@media(max-width:767px) {
    .ss-brand-invitation--shout .ss-soft-panel::before {
        animation-name: ss-logo-breathe-mobile;
    }
}

@keyframes ss-logo-breathe-mobile {
    0%, 100% {
        background-size: 125% auto;
    }
    50% {
        background-size: 138% auto;
    }
}

@media(prefers-reduced-motion:reduce) {
    .ss-brand-invitation--shout .ss-soft-panel::before,
    .ss-brand-invitation--project .ss-project-sign img {
        animation: none;
        transform: none;
    }
}

/* Quote actions share the navigation accent; ordinary actions stay neutral. */
.special_btn.ss-quote-button {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
}

.special_btn.ss-quote-button > .text-block-65 {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 400;
    white-space: normal;
}

/* Keep the existing portfolio composition, with a quieter frame and captions. */
.portfolio-api-section .home-showcase {
    padding-block: clamp(40px,5vw,72px);
}

/* Service scope takes priority; additional choices remain folded away. */
.qc-group-title,.qc-other-services > summary {
    cursor: pointer;
    padding: 14px 0;
    font: 500 16px/1.4 Kanit,sans-serif;
    color: var(--brand-slate);
}

.qc-group-title:focus-visible,.qc-other-services > summary:focus-visible {
    outline: 2px solid var(--brand-slate);
    outline-offset: 4px;
}

.qc-group + .qc-group {
    margin-top: 14px;
}

.qc-group:not([open]) {
    border-bottom: 1px solid #b8c9d180;
}

.qc-scope-card--focused {
    grid-column: 1 / -1;
}

.quote-calculator .qc-scope-card--focused h3 {
    font-size: 22px;
    font-weight: 400;
}

.qc-other-services {
    margin-top: 28px;
    border-top: 1px solid #b8c9d1;
}

.qc-other-services > div {
    padding-top: var(--space-3);
}

/* Quote actions retain their compact mobile typography. */
@media(max-width:767px) {
    .special_btn.ss-quote-button > .text-block-65 {
        font-size: 20px;
        padding: var(--space-3) var(--space-5);
    }
}

.qc-group-title,.qc-other-services > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.qc-group-title::after,.qc-other-services > summary::after {
    content: "+";
    font-size: 20px;
    font-weight: 300;
}

.qc-group[open] > .qc-group-title::after,.qc-other-services[open] > summary::after {
    content: "−";
}

.ss-home-portfolio-cta {
    align-self: stretch;
    margin-block: var(--space-8);
    text-align: center;
}

.ss-home-portfolio-cta > p {
    margin: 0 0 var(--space-4);
    font-size: 18px;
    line-height: 1.5;
    color: var(--brand-ink);
    opacity: 1;
}

.ss-home-portfolio-link.special_btn {
    display: inline-flex;
    align-self: center;
    max-width: 100%;
    margin: 0;
}

.ss-home-portfolio-link .text-block-65 {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 400;
    white-space: normal;
}

@media(max-width:767px) {
    .ss-home-portfolio-link .text-block-65 {
        font-size: 20px;
        padding: var(--space-3) var(--space-5);
    }
}

@media(min-width:992px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .ss-home-portfolio-cta {
        align-self: stretch;
        margin-block: var(--space-8);
        text-align: left;
    }
}

/* Scope editing keeps removal and undo next to the content they affect. */
.qc-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.qc-title-row #qc-title {
    min-width: 0;
}

.qc-title-row .qc-undo {
    flex-shrink: 0;
    padding: 10px var(--space-5);
}

.qc-title-row .qc-undo[hidden] {
    display: none;
}

.qc-scope-heading {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.qc-scope-heading h3 {
    margin: 0;
}

.quote-calculator .qc-remove-service {
    position: absolute;
    top: -30px;
    right: -26px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #ffffff99;
    border-radius: 50%;
    background: #ffffff99;
    color: var(--control-ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.quote-calculator .qc-remove-service:hover:not(:disabled) {
    background: #ffffffd9;
}

.qc-go-back {
    display: block;
    margin-top: var(--space-6);
    padding: var(--space-3) 0;
    border: 0;
    background: transparent;
    color: var(--link-blue);
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.qc-go-back:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.qc-go-back:focus-visible,.qc-remove-service:focus-visible,.qc-undo:focus-visible {
    outline: 2px solid var(--brand-slate);
    outline-offset: 4px;
}

.qc-services > .qc-scope > .qc-scope-heading .qc-remove-service {
    top: -12px;
    right: -12px;
}

.quote-calculator .qc-remove-service:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.quote-calculator .qc-required-note {
    margin: -4px 0 14px;
    color: var(--control-muted);
    font-size: 11px;
    line-height: 1.4;
}

.qc-clear-actions .qc-key--clear {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.qc-clear-timer {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.qc-clear-timer svg {
    position: absolute;
    inset: 0;
}

.qc-clear-timer__pie {
    opacity: .3;
    animation: qc-clear-countdown 3s linear forwards;
}

.qc-clear-timer__number {
    position: relative;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

@keyframes qc-clear-countdown {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 34.558;
    }
}

@media(prefers-reduced-motion:reduce) {
    .qc-clear-timer__pie {
        animation-timing-function: steps(3,end);
    }
}

.qc-clear-actions .qc-key:not(.qc-key--clear) {
    background: var(--brand-slate);
    border-color: var(--brand-slate);
    color: #fff;
}

.qc-clear-actions .qc-key:not(.qc-key--clear):hover {
    background: var(--quote-primary-hover);
}

.site-nav-drawer [data-quote-open] {
    position: relative;
}

.qc-draft-badge {
    position: absolute;
    top: -9px;
    right: -9px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-yellow-soft);
    border: 1px solid #b38a22;
    color: #725716;
    font: 600 13px/1 sans-serif;
}

.qc-draft-badge[hidden] {
    display: none;
}

.site-nav-drawer.is-open .qc-draft-badge {
    animation: qc-draft-pulse 2.8s ease-in-out 1s infinite;
}

@keyframes qc-draft-pulse {
    0%,100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.ss-cookie-notice {
    position: fixed;
    left: 16px;
    bottom: max(12px,env(safe-area-inset-bottom));
    z-index: 95;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    max-width: calc(100% - 32px);
    padding: var(--space-3) 14px;
    border: 1px solid var(--border-on-dark);
    border-top-color: var(--border-on-dark-top);
    border-radius: var(--radius-md);
    background: var(--brand-slate-dark);
    color: var(--text-on-dark);
    box-shadow: var(--shadow-glass);
    animation: ss-notice-rise .4s cubic-bezier(.16,1,.3,1) both;
}

.ss-cookie-notice p {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.ss-cookie-notice button {
    border: 0;
    border-radius: 6px;
    padding: 7px 11px;
    background: var(--brand-slate);
    color: #fff;
    font: 500 12px/1.3 sans-serif;
    cursor: pointer;
}

.ss-cookie-notice .ss-cookie-close {
    padding-inline: 3px;
    background: transparent;
    color: inherit;
}

.ss-cookie-notice a {
    color: inherit;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@keyframes ss-notice-rise {
    from {
        opacity: 0;
        transform: translateY(30px) scale(.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ss-cookie-notice :is(a,button):focus-visible {
    outline: 2px solid var(--text-on-dark);
    outline-offset: 3px;
}

@media(prefers-reduced-motion:reduce) {
    .site-nav-drawer.is-open .qc-draft-badge {
        animation: none;
    }
}

.ss-cookie-notice {
    transition: opacity 1s ease;
}

.ss-cookie-notice.is-fading {
    animation: none;
    opacity: 0;
    pointer-events: none;
}

@media(max-width:767px) {
    .ss-cookie-notice {
        left: 8px;
        right: 8px;
        bottom: max(8px,env(safe-area-inset-bottom));
        max-width: none;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 10px;
        padding: var(--space-2) 10px;
        border-radius: var(--radius-sm);
        box-shadow: 0 3px 12px #17394d1a;
    }
    .ss-cookie-notice p {
        font-size: 11px;
        flex: 1;
    }
    .ss-cookie-notice p::after {
        content: '/';
        margin-left: 6px;
        opacity: .45;
    }
    .ss-cookie-notice button {
        padding: 4px 7px;
        font-size: 11px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .ss-cookie-notice {
        transition: none;
        animation: none;
    }
}

/* Shared search and configurable quote options. */
.site-nav-service-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-2);
}

.site-nav-drawer .site-nav-service-actions .link-block-10.lk-right {
    margin: 0;
    align-self: auto;
}

.site-search {
    position: relative;
    flex: 1 1 200px;
    max-width: 320px;
    min-width: 0;
    z-index: 5;
    margin: 0;
    margin-right: auto;
}

.site-search-field {
    height: var(--search-height,48px);
    display: flex;
    align-items: center;
    border-radius: 66px;
    background: var(--bg-base);
    box-shadow: inset 2px 3px 7px #304f6326,inset -2px -1px 7px #ffffffad;
    padding: 0 4px 0 var(--space-2);
}

.site-search input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    padding: 0 var(--space-3);
    color: var(--control-ink);
    font: inherit;
    font-size: 16px;
    outline: none;
}

.site-search button {
    flex: 0 0 44px;
    height: 100%;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--control-ink);
    cursor: pointer;
}

.site-search-loading {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--control-ink);
    white-space: nowrap;
}

.site-search-loading[hidden] {
    display: none;
}

.site-search.is-searching button svg {
    display: none;
}

.site-search.is-searching button::after {
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid #17394d26;
    border-top-color: var(--control-ink);
    border-radius: 50%;
    animation: site-search-spin 1s linear infinite;
}

@keyframes site-search-spin {
    to {
        transform: rotate(360deg);
    }
}

@media(prefers-reduced-motion:reduce) {
    .site-search.is-searching button::after {
        animation: none;
    }
}

.site-search-field:focus-within {
    outline: 2px solid var(--brand-slate);
    outline-offset: 2px;
}

.site-search :is(input,button):focus-visible {
    outline: none;
}

.site-search a:focus-visible {
    outline: 2px solid var(--brand-slate);
    outline-offset: -2px;
    border-radius: 10px;
}

.site-search-results {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(420px,calc(100vw - 64px));
    max-height: 340px;
    overflow: auto;
    background: #e5eceff2;
    backdrop-filter: blur(18px);
    border: 1px solid #ffffffb3;
    border-radius: 16px;
    box-shadow: 6px 6px 20px #304f6333;
}

.site-search-results[hidden] {
    display: none;
}

.site-search-results p {
    font-size: 14px;
    margin: 0;
    padding: 14px var(--space-4);
}

.site-search-results ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-search-results a {
    display: block;
    padding: 14px var(--space-4);
    text-decoration: none;
    color: var(--control-ink);
    border-top: 1px solid #304f631a;
}

.site-search-results a:hover {
    background: #ffffff80;
}

.site-search-results strong,.site-search-results span {
    display: block;
}

.site-search-results strong {
    font-size: 16px;
    line-height: 1.4;
}

.site-search-results span {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 6px;
}

.site-search-results mark {
    display: inline;
    color: inherit;
    background: #ffe6a0;
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 700;
}

.quote-calculator .qc-service-search {
    width: 100%;
    max-width: none;
    flex: none;
    margin: 0 0 28px;
    font-family: Kanit,sans-serif;
}

.quote-calculator .qc-service-search input {
    font-family: Kanit,sans-serif;
    font-size: 16px;
}

.quote-calculator .qc-service-search .site-search-field {
    height: 48px;
}

.quote-calculator .qc-search-status {
    font: 400 13px/1.4 Kanit,sans-serif;
    margin: 10px var(--space-2) 0;
    color: var(--control-muted);
}

.quote-calculator .qc-search-status:empty {
    display: none;
}

.quote-calculator .qc-search-match .qc-tile__face {
    outline: 2px solid var(--quote-primary);
    outline-offset: 3px;
    box-shadow: 5px 5px 12px var(--control-shadow),-5px -5px 12px #f8ffff;
}

.quote-calculator .qc-service-search button:focus-visible {
    outline: none;
}

/* Scroll remains available on every surface without a visible scrollbar track. */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.quote-calculator .qc-variant {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px 0;
    font: 400 13px/1.4 Kanit,sans-serif;
}

.quote-calculator .qc-variant select {
    height: 44px;
    margin: 0;
    border: 1px solid #ffffff99;
    border-radius: var(--radius-md);
    background-color: var(--control-surface);
    color: var(--control-ink);
    font: 400 14px/1.4 Kanit,sans-serif;
    box-shadow: inset 2px 3px 7px #304f6326,inset -2px -1px 7px #ffffffad;
}

.quote-calculator .qc-pack-note {
    font: 400 12px/1.4 Kanit,sans-serif;
    color: var(--control-muted);
    margin: var(--space-2) 0;
}

.quote-calculator .qc-line-options {
    display: block;
    margin-top: 6px;
    font: 400 11px/1.5 Kanit,sans-serif;
    color: var(--control-muted);
}

.quote-calculator .qc-search-results,.quote-calculator .qc-catalogue {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .45s ease,opacity .3s ease;
}

.quote-calculator .qc-catalogue {
    grid-template-rows: 1fr;
    opacity: 1;
}

.quote-calculator .qc-search-results-content,.quote-calculator .qc-catalogue-content {
    min-height: 0;
    overflow: hidden;
}

.quote-calculator .qc-catalogue-content {
    overflow: visible;
}

.quote-calculator .qc-search-results-content {
    padding: 0 var(--space-5);
    margin: 0 -20px;
    transition: padding .45s ease,margin .45s ease;
}

.quote-calculator .qc-search-active .qc-search-results-content {
    padding-block: var(--space-5);
    margin-block: -20px;
}

.quote-calculator .qc-search-results .qc-tiles {
    padding: 5px;
    margin: 0 0 23px;
}

.quote-calculator .qc-search-active .qc-search-results {
    grid-template-rows: 1fr;
    opacity: 1;
}

.quote-calculator .qc-category-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-2) 0;
    background: none;
    border: 0;
    color: inherit;
    text-align: left;
    font: inherit;
}

.quote-calculator .qc-category-toggle::after {
    content: "›";
    font-size: 22px;
    transform: rotate(90deg);
    transition: transform .5s ease;
}

.quote-calculator .qc-collapsed .qc-category-toggle::after {
    transform: rotate(0deg);
}

.quote-calculator .qc-category-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .6s cubic-bezier(.22,.61,.36,1);
}

.quote-calculator .qc-category-content {
    min-height: 0;
    overflow: hidden;
    padding: var(--space-5);
    margin: -20px;
    transition: padding .6s cubic-bezier(.22,.61,.36,1),margin .6s cubic-bezier(.22,.61,.36,1);
}

.quote-calculator .qc-group:not(.qc-collapsed) .qc-category-content {
    padding-bottom: var(--space-12);
}

.quote-calculator .qc-collapsed .qc-category-content {
    padding-block: 0;
    margin-block: 0;
}

.quote-calculator .qc-collapsed .qc-category-body {
    grid-template-rows: 0fr;
}

@media(prefers-reduced-motion:reduce) {
    .quote-calculator .qc-search-results,.quote-calculator .qc-search-results-content,.quote-calculator .qc-catalogue,.quote-calculator .qc-category-body,.quote-calculator .qc-category-content,.quote-calculator .qc-category-toggle::after {
        transition: none;
    }
}

@media(max-width:767px) {
    .site-nav-drawer__links > .site-search {
        flex: none;
        width: 100%;
        max-width: none;
        margin: 0 0 var(--space-5);
        align-self: stretch;
    }
    .site-search-field {
        height: 56px;
    }
    .site-search input {
        font-size: 18px;
        padding-inline: var(--space-4);
    }
    .site-search button {
        flex-basis: 56px;
    }
    .site-search-results {
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        width: auto;
        max-height: min(420px,calc(100dvh - 200px));
    }
    .site-nav-service-actions {
        align-items: center;
    }
}

/* Inset the select indicator from the rounded edge. */
.quote-calculator .qc-variant select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 42px 0 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23536e7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
}

/* Optional quote services sit outside scope cards, immediately above Go Back. */
.quote-calculator .qc-optional-services {
    margin-top: 28px;
}

.quote-calculator .qc-optional-services h3 {
    margin: 0 0 var(--space-3);
    font: 500 14px/1.4 Kanit,sans-serif;
}

.quote-calculator .qc-optional-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.quote-calculator .qc-optional-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    max-width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid #ffffff66;
    border-radius: 14px;
    background: var(--control-surface);
    color: var(--control-ink);
    box-shadow: 4px 4px 10px var(--control-shadow),-4px -4px 10px #f8ffff;
    font: 400 14px/1.4 Kanit,sans-serif;
    text-align: left;
    cursor: pointer;
}

.quote-calculator .qc-optional-card img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    opacity: .65;
}

.quote-calculator .qc-optional-add {
    margin-left: auto;
    padding-left: 10px;
    color: var(--link-blue);
}

.quote-calculator .qc-optional-card:hover {
    box-shadow: inset 2px 2px 6px var(--control-shadow),inset -2px -2px 6px #f8ffff;
}

@media(max-width:767px) {
    .quote-calculator .qc-optional-card {
        width: 100%;
    }
}

/* Tablet clock: keep the time together at the left of its panel. */
@media(min-width:768px) and (max-width:991px) {
    .site-nav-drawer .site-nav-clock [data-local-clock] {
        justify-content: flex-start;
        align-self: flex-start;
        width: fit-content;
        max-width: 100%;
        gap: 10px;
    }
    .site-nav-drawer .site-nav-clock [data-clock-period] {
        margin-left: 6px;
    }
}

.quote-calculator .qc-privacy-note {
    margin: var(--space-4) 0 0;
    color: var(--control-muted);
    font: 400 12px/1.5 Kanit,sans-serif;
}

.quote-calculator .qc-privacy-note a {
    font-size: inherit;
    line-height: inherit;
}

/* Keep submission with the contact form; estimate details are opt-in. */
.qc-breakdown > summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding-block: 10px 2px;
    cursor: pointer;
    text-align: left;
    list-style: none;
    font: 12px/1.5 monospace;
}
.qc-breakdown > summary::-webkit-details-marker {
    display: none;
}
.qc-breakdown > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    margin-bottom: 4px;
    transition: transform .24s ease,margin-bottom .24s ease;
}
.qc-breakdown[open] > summary::after {
    transform: rotate(225deg);
    margin-bottom: 0;
}
.qc-breakdown[data-collapsing] > summary::after {
    transform: rotate(45deg);
    margin-bottom: 4px;
}
@media(prefers-reduced-motion:reduce) {
    .qc-breakdown > summary::after {
        transition: none;
    }
}
.qc-breakdown > summary:focus-visible {
    outline: 2px solid var(--brand-slate);
    outline-offset: 3px;
    border-radius: 4px;
}
.qc-breakdown[open] > summary {
    margin-bottom: 12px;
}
.qc-total-primary {
    display: block;
}
.qc-total-secondary {
    display: block;
    font: 11px/1.6 monospace;
    white-space: nowrap;
    overflow-wrap: normal;
    text-wrap: nowrap;
}
@media(min-width:768px) {
    .qc-main--contact {
        display: flex;
        flex-direction: column;
    }
    .qc-main--contact > :is(.qc-title-row,.qc-intro,.qc-services) {
        width: 100%;
        max-width: 600px;
        align-self: center;
        flex-shrink: 0;
    }
    .qc-main--contact .qc-title-row {
        margin-top: auto;
        padding-top: 26px;
    }
    .qc-main--contact .qc-title-row h2 {
        margin-top: 0;
    }
    .qc-main--contact .qc-services {
        margin-bottom: auto;
    }
}
.quote-calculator .qc-submit-actions .qc-consent {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    max-width: 440px;
    margin-inline: auto;
    line-height: 1.6;
}
.quote-calculator .qc-submit-actions .qc-consent input {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    padding: 0;
    box-shadow: none;
    accent-color: var(--brand-slate);
}
.qc-consent .ss-text-link {
    font-size: inherit;
    line-height: inherit;
    color: var(--brand-slate);
    text-decoration: underline;
}
.quote-calculator .qc-submit {
    grid-column: 1 / -1;
    justify-self: center;
    min-width: 180px;
    padding: 16px 32px;
    background: var(--brand-slate);
    color: white;
    font-size: 14px!important;
}
.qc-contact-status {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--control-muted);
    font-size: 13px;
    line-height: 1.6;
}
.qc-contact-status:empty {
    display: none;
}

/* Keep quote actions visible outside the scrolling content. */
.qc-workspace {
    display: contents;
}
.qc-layout {
    grid-template-rows: minmax(0,1fr) auto;
}
.qc-main {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.qc-aside {
    grid-column: 2;
    grid-row: 1;
}
.qc-navigation {
    grid-column: 2;
    grid-row: 2;
    padding: 18px var(--space-6) 24px;
    background: #d2dde1;
    border-top: 1px solid #b6c9d2;
    z-index: 10;
}
.qc-nav-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.qc-navigation .qc-key {
    min-height: 54px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    grid-row: auto;
    grid-column: auto;
}
.qc-keys {
    grid-template-columns: 1fr;
    margin-top: 18px;
}
.quote-calculator .qc-keys .qc-key--clear {
    justify-self: end;
    width: 64px;
    min-height: 36px;
    padding: 8px 12px;
    background: #c6ced2;
    color: #43545e;
    border-color: #e5eaed;
}
.quote-calculator .qc-keys .qc-key--clear:hover {
    background: #b7c1c7;
}
.qc-service-description {
    padding: 20px 8px 24px;
    scroll-padding-block: 20px;
}
.qc-submit-actions {
    display: grid;
    gap: 16px;
}
.qc-submit-actions .qc-consent {
    font-size: 12px;
}
.qc-submit-actions .qc-submit {
    width: 100%;
    min-width: 0;
}
.qc-next-ready svg {
    animation: qc-next-slide .65s ease-out;
}
@keyframes qc-next-slide {
    0% { transform: translateX(-10px); opacity: .25; }
    60% { transform: translateX(4px); opacity: 1; }
    100% { transform: translateX(0); }
}
@media(max-width:767px) {
    .qc-layout {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .qc-workspace {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding-bottom: 20px;
    }
    .qc-navigation {
        flex: 0 0 auto;
        padding: 14px 20px max(16px,env(safe-area-inset-bottom));
    }
}
@media(prefers-reduced-motion:reduce) {
    .qc-next-ready svg {
        animation: none;
    }
}

/* Tablet hero: center only the message, action and capped card grid. */
@media(min-width:768px) and (max-width:991px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance .div-block-29 {
        align-items: center;
        text-align: center;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance :is(.heading-6,.hero-title-location,.paragraph-3) {
        text-align: center;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance .paragraph-3 {
        margin-inline: auto;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance .hero-quote {
        align-self: center;
        margin-inline: auto;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance .div-block-26 {
        max-width: 600px;
        margin-inline: auto;
    }
}

/* Feather the hero surface behind the location and description. */
html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance :is(.hero-title-location,.paragraph-3) {
    position: relative;
    isolation: isolate;
}

html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance :is(.hero-title-location,.paragraph-3)::before {
    content: "";
    position: absolute;
    inset: -12px -18px;
    z-index: -1;
    border-radius: var(--radius-lg);
    background: rgb(199 210 212 / 0.88000000);
    filter: blur(16px);
    pointer-events: none;
}

/* Separate the Services surface from the next panel on phones in landscape. */
@media screen and (max-width: 991px) and (orientation: landscape) {
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service.af-3d {
        padding-bottom: var(--space-16);
    }
}

/* Give compact homepage service cards more room beneath their buttons. */
@media(max-width:991px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service .af-c {
        padding-bottom: var(--space-10);
    }
}

/* Homepage reading columns and compact section spacing. */
html:is([data-site-page="index"], [data-site-page="utils"]) .ss-shoutout-copy :is(h2,p) {
    text-align: center;
    margin-inline: auto;
}

html:is([data-site-page="index"], [data-site-page="utils"]) .ss-shoutout-copy .ss-actions {
    justify-content: center;
}

@media(max-width:991px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) #services.top-serv-af {
        padding-top: 96px;
        padding-bottom: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #services > [data-we-do-carousel].hero_cont.sub-sec-af {
        padding-top: 96px;
        padding-bottom: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-vision.sec-crop-60 {
        padding-top: var(--space-20);
        padding-bottom: var(--space-10);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #services > .div-block-191,
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-vision > .div-block-191 {
        margin-top: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ss-home-portfolio-cta {
        margin-bottom: var(--space-16);
    }
}

/* Approved globe hero, shared by the homepage and standalone preview. */
.hero-demo {
    margin: 0;
    background: var(--bg-hero);
}

.black_a.globe-hero {
    --hero-fold-space: 112px;
    height: calc(100dvh + var(--hero-fold-space));
    min-height: calc(100dvh + var(--hero-fold-space));
    padding-top: var(--space-10);
    padding-bottom: calc(40px + var(--hero-fold-space));
    transform: none;
}

.hero-demo .black_a.globe-hero {
    --hero-fold-space: 0px;
}

.black_a.globe-hero::before {
    display: none;
}

.globe-hero .hero_cont.hero-se {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
}

.hero-demo .globe-hero > .code-embed-5 {
    display: none;
}

.globe-hero > .code-embed-6,
.globe-hero .hero-edge-track {
    /* Carry the scene and lighting through the padded curved divider. */
    height: 100%;
}

.globe-hero .hero-edge-light {
    height: 100%;
    position: relative;
    opacity: .55;
}

.globe-hero .demo-scene {
    position: relative;
    width: 100%;
    height: 100%;
}

.globe-hero .demo-scene canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.globe-hero .hero-entrance .div-block-26 {
    background: rgb(199 210 212 / 0.22000000);
}

.black_a.globe-hero .hero-entrance :is(.hero-title-location,.paragraph-3)::before {
    content: none;
}

.globe-hero .demo-scene[data-scene-state="fallback"] {
    background: url('../images/ssm-logo.svg') 65% 50% / min(70vw,650px) auto no-repeat;
    opacity: .15;
}

@media(max-width:991px) {
    .black_a.globe-hero {
        height: auto;
        min-height: calc(100dvh + var(--hero-fold-space));
        padding-top: var(--space-8);
        padding-bottom: calc(32px + var(--hero-fold-space));
    }
    .globe-hero .hero_cont.hero-se {
        padding-block: 0;
    }
    .globe-hero .hero-entrance .heading-6 {
        --hero-text-color: #102a3b;
        --hero-accent-color: var(--brand-slate);
    }
}

@media(min-width:768px) and (max-width:991px) {
    body:not(.hero-demo) .black_a.globe-hero {
        padding-top: 88px;
    }
}

@media(max-width:767px) {
    .black_a.globe-hero {
        --demo-globe-space: clamp(300px,96vw,480px);
        padding-top: calc(32px + var(--demo-globe-space));
    }
    .globe-hero .hero_cont.hero-se {
        margin-top: clamp(-260px,-56vw,-168px);
    }
    .globe-hero .demo-scene[data-scene-state="fallback"] {
        background-position: 50% 32px;
        background-size: min(78vw,384px) auto;
    }
}

/* Stack the reviews introduction before its link can squeeze or clip the title. */
@media (max-width: 767px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .home-showcase > .div-block-197 {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-6);
        margin-top: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .div-block-195 {
        flex: none;
        min-width: 0;
        width: 100%;
        align-items: flex-start;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .link-block-8 {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        padding-inline: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .div-block-202 {
        min-width: 0;
        max-width: 100%;
    }
}

/* Both Source Select accents use solid dark lettering. */
html:is([data-site-page="index"], [data-site-page="utils"]) :is(.why-choose, .process-flow) .bold-text-3 {
    color: var(--brand-ink);
    -webkit-text-stroke: 0;
    text-shadow: none;
    filter: none;
}

/* Keep the review introduction and Google link on one left alignment. */
html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews :is(.div-block-195, .div-block-202) {
    align-items: flex-start;
    text-align: left;
}
html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .paragraph-6 {
    text-align: left;
}
html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .text-block-70 {
    justify-content: flex-start;
    text-align: left;
}
html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .div-block-198 {
    align-self: flex-start;
}
@media (max-width: 767px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews > .div-block-191 {
        padding-inline: var(--space-8);
        width: 100%;
        text-align: left;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .home-showcase > .div-block-197 {
        padding-inline: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .div-block-195 {
        margin-inline: 0;
        padding-inline: 0;
    }
}

html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .link-block-8 {
    justify-content: flex-start;
}
@media (max-width: 767px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews > .div-block-191 {
        align-items: flex-start;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .heading-15 {
        width: 100%;
        justify-content: flex-start;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .heading-14 {
        margin-inline: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .paragraph-6 {
        width: 100%;
        max-width: none;
    }
}

/* Center only the left reviews introduction on desktop. */
@media (min-width: 1280px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews > .home-showcase > .div-block-197,
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews > .home-showcase > .div-block-197 :is(.div-block-195, .div-block-202) {
        align-items: center;
        text-align: center;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews > .home-showcase > .div-block-197 :is(.paragraph-6, .heading-14, .text-block-70) {
        text-align: center;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews > .home-showcase > .div-block-197 :is(.link-block-8, .text-block-70) {
        justify-content: center;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews > .home-showcase > .div-block-197 .div-block-198 {
        align-self: center;
    }
}

/* Vision heading: a white neon core with a blue halo on desktop. */
html:is([data-site-page="index"], [data-site-page="utils"]) :is(.why-choose, .process-flow) .bold-text-3 {
    color: #91a4ad;
    -webkit-text-stroke: 0;
    text-shadow: none;
}
@media (min-width: 992px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) :is(.why-choose, .process-flow) .bold-text-3 {
        color: #f5fcff;
        font-weight: 300;
        text-shadow: 0 0 2px #fff, 0 0 5px #65d6ff, 0 0 12px #009dff, 0 0 24px #006affcc, 0 0 42px #006aff80;
    }
}

/* Homepage quotation artwork uses the approved muted blue. */
html:is([data-site-page="index"], [data-site-page="utils"]) .quote_img.ss-quote-mark {
    font-size: 120px;
    width: 1em;
    height: 1em;
    color: #819fb5;
    background: none;
    -webkit-mask: none;
    mask: none;
}
.ss-brand-invitation--shout .ss-soft-quote {
    color: #899fa7;
}
@media (max-width: 767px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .quote_img.ss-quote-mark {
        font-size: 90px;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ss-brand-invitation--shout .ss-soft-panel--slate {
        padding-top: var(--space-12);
    }
}

/* A quiet opal wash connects the shout-out panel to the surrounding aurora. */
.ss-brand-invitation--shout .ss-soft-panel--slate,
.ss-price.ss-soft-panel--slate {
    background:
        radial-gradient(ellipse at 5% 90%, #f2e7b826, transparent 65%),
        radial-gradient(ellipse at 95% 15%, #acfffb29, transparent 65%),
        linear-gradient(115deg, #526779, #536e82 50%, #5d7784);
}

/* Retain the embossed edge while allowing the aurora through the button. */
.ss-home-portfolio-link .text-block-65 {
    background-color: #d1dcdf66;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Keep mobile homepage sections on the shared container gutter. */
@media (max-width: 767px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero_cont.hero-entrance {
        padding-inline: var(--space-8);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero-entrance .text-block-3 {
        justify-content: flex-start;
        text-align: left;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero_cont-2.adfff {
        padding-inline: var(--space-8);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .hero_cont-2.adfff .sub_her_hld_af {
        padding-left: var(--space-6);
        align-items: flex-start;
        text-align: left;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .sub_her_hld_af :is(.heading-20, .block-quote) {
        width: 100%;
        margin-inline: 0;
        text-align: left;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #services > .div-block-191 {
        width: 100%;
        padding-inline: var(--space-8);
        align-items: flex-start;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #services > .div-block-191 .heading-15 {
        width: 100%;
        justify-content: flex-start;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #id-corosol-service {
        padding-inline: var(--space-8);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #services > [data-we-do-carousel].hero_cont.sub-sec-af {
        padding-inline: var(--space-8);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] .div-block-210 {
        width: 100%;
        margin-inline: 0;
        align-items: flex-start;
        text-align: left;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] :is(.heading-16, .heading-21) {
        width: 100%;
        text-align: left;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] [data-we-do-card] {
        align-items: flex-start;
        text-align: left;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) [data-we-do-carousel] .div-block-173 {
        justify-content: flex-start;
        align-items: flex-start;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .home-showcase:has([data-home-portfolio]) {
        padding-inline: var(--space-8);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #home-portfolio-intro,
    html:is([data-site-page="index"], [data-site-page="utils"]) #home-portfolio-intro .rich-text-block {
        width: 100%;
        margin-inline: 0;
        padding-inline: 0;
        align-items: flex-start;
        text-align: left;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #home-portfolio-intro .paragraph-6.std-al {
        width: 100%;
        text-align: left;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #home-portfolio-intro .ss-home-portfolio-cta {
        text-align: left;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) #home-portfolio-intro .ss-home-portfolio-link {
        align-self: flex-start;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .home-showcase:has([data-home-portfolio]) > .hero_cont {
        width: 100%;
        margin-inline: 0;
        padding-inline: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) section:has([data-home-portfolio]) > .div-block-191 {
        width: 100%;
        padding-inline: var(--space-8);
        align-items: flex-start;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) section:has([data-home-portfolio]) > .div-block-191 .heading-15 {
        width: 100%;
        margin-inline: 0;
        justify-content: flex-start;
    }
}

/* A single section gap on mobile, rather than stacked container padding. */
@media (max-width: 991px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) section:has([data-home-portfolio]) > .div-block-191,
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews > .div-block-191 {
        margin-top: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .process-flow {
        margin-top: var(--space-10);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .process-flow__action {
        margin-bottom: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ss-brand-invitation > .container {
        padding-block: 0;
        margin-block: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews.sec-crop-60 {
        padding-block: 0;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ss-faq--home {
        padding-top: 96px;
        padding-bottom: var(--space-10);
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ss-brand-invitation--shout {
        padding-top: var(--space-10);
        padding-bottom: 96px;
    }
    html:is([data-site-page="index"], [data-site-page="utils"]) .ss-brand-invitation--project {
        padding-top: var(--space-10);
    }
}

@media (max-width: 767px) {
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-vision > .div-block-191,
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-vision .cta01-af,
    html:is([data-site-page="index"], [data-site-page="utils"]) .ambient-reviews .process-flow {
        padding-inline: var(--space-8);
    }
}

@media (max-width: 991px) and (orientation: landscape) {
    html:is([data-site-page="index"], [data-site-page="utils"]) #services > [data-we-do-carousel].hero_cont.sub-sec-af {
        padding-top: var(--space-8);
    }
}

/* Opal portrait hover fades from pale blue to warm yellow. */
.staff-card { position: relative; isolation: isolate; }
.staff-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(63deg, #a8deff80, #d9fff89c);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.staff-card:is(:hover,:focus-visible) { background-color: #d1dcdfa3; }
.staff-card:is(:hover,:focus-visible)::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .staff-card::before { transition: none; }
}

/* Mobile portfolio: compact captions and touch-friendly image previews. */
@media (max-width: 767px), (pointer: coarse) {
    .portfolio-tile .portfolio-tile__overlay {
        inset: auto 0 0;
        min-height: 0;
        padding: 18px 10px 9px;
        gap: 0;
        align-items: stretch;
        background: linear-gradient(transparent, rgba(10, 30, 46, .78));
        text-align: left;
        opacity: 1;
    }
    .portfolio-tile .portfolio-tile__title {
        display: block;
        width: 100%;
        max-width: none;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 500;
        transform: none;
    }
    .portfolio-tile .portfolio-tile__tokens,
    .portfolio-tile .portfolio-tile__icon { display: none; }
    .portfolio-tile:is(:hover, :focus-visible) > .image-4 { filter: none; transform: none; }
}
.portfolio-preview__content { touch-action: pan-y pinch-zoom; }
.portfolio-preview__media { aspect-ratio: 1; }
.portfolio-preview__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font: 14px/1.4 system-ui, sans-serif;
    color: #294557;
    background: #d1dcdf;
}
.portfolio-preview__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(41,69,87,.2);
    border-top-color: #294557;
    border-radius: 50%;
    animation: portfolio-loading-spin .8s linear infinite;
}
@keyframes portfolio-loading-spin { to { transform: rotate(360deg); } }
@media (min-width: 768px) {
    .portfolio-preview__media { aspect-ratio: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .portfolio-preview__spinner { animation: none; }
}

/* Mobile contact step: start at the fields; submission follows the form. */
.qc-contact-back { display: none; }
@media (max-width: 767px) {
    .qc-layout.qc-layout--contact {
        display: block;
        overflow: auto;
        overscroll-behavior: contain;
        scroll-behavior: auto;
    }
    .qc-layout--contact .qc-workspace {
        overflow: visible;
        padding-bottom: 0;
    }
    .qc-layout--contact .qc-main,
    .qc-layout--contact .qc-aside {
        overflow: visible;
        max-height: none;
    }
    .qc-layout--contact .qc-navigation {
        position: static;
    }
    .qc-main--contact .qc-contact-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        margin: -12px 0 6px;
        padding: 0 6px 0 0;
        border: 0;
        background: transparent;
        color: var(--brand-slate);
        font: 400 13px/1.4 Kanit, sans-serif;
        cursor: pointer;
    }
    .qc-contact-back:focus-visible {
        outline: 2px solid var(--brand-slate);
        outline-offset: 3px;
        border-radius: 4px;
    }
}

/* Main menu actions: Services left, growing search in the middle, quote right. */
.site-nav-drawer .site-nav-service-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; }
.site-nav-service-actions .site-nav-services-action,
.site-nav-service-actions .site-nav-quote-action { flex: 0 0 auto; width: max-content; max-width: none; white-space: nowrap; }
.site-nav-service-actions .site-search { flex: 1 1 160px; max-width: none; width: auto; margin: 0; }
.site-nav-service-actions .site-nav-quote-action { margin-left: auto; }
@media (min-width: 768px) and (max-width: 1199px) {
    .site-nav-drawer .site-nav-service-actions { flex-wrap: wrap; }
    .site-nav-service-actions .site-search { order: 2; flex: 1 0 100%; width: 100%; }
}
.site-nav-drawer .site-nav-services .link-block-12.is-current-parent {
    color: var(--brand-slate);
    background-color: #ffffff3d;
    border-color: #ffffff5c;
    box-shadow: 0 0 10px #ffffff24, inset 0 1px 0 #ffffff38;
}
.site-nav-drawer .site-nav-services .link-block-12.is-current-parent:hover {
    background-color: #ffffff61;
}

@media (max-width: 767px) {
    .site-nav-drawer .site-nav-service-actions { flex-direction: column; align-items: flex-start; gap: 16px; }
    .site-nav-service-actions .site-nav-quote-action { order: -1; margin-left: 0; }
}

/* Compact mobile service navigation without changing the desktop menu. */
@media (max-width: 767px) {
    .site-nav-drawer .site-nav-services .inner-links-cont .div-block-223 {
        gap: 16px 12px;
        padding: 4px 8px 12px;
    }
    .site-nav-drawer .site-nav-services .inner-links-cont .div-block-224 {
        gap: 4px;
        justify-content: flex-start;
        padding: 0;
    }
    .site-nav-drawer .site-nav-services .inner-links-cont .div-block-224 > .link.sm {
        margin: 0 0 4px;
        padding-block: 4px;
    }
    .site-nav-drawer .site-nav-services .inner-links-cont .link-block-12 {
        padding-block: 7px;
        margin-block: 0;
    }
    .site-nav-drawer .site-nav-service-actions { padding-block: 8px 0; }
    .site-nav-drawer .site-nav-services-action { margin-bottom: 0; }
}

/* The reset action uses a readable label rather than a calculator abbreviation. */
.quote-calculator .qc-keys .qc-key--clear {
    width: auto;
    min-width: 88px;
    white-space: nowrap;
}

/* Portfolio previews keep a stable stage while slides load and change. */
.portfolio-preview {
    height: min(860px,calc(100dvh - 64px));
    overflow: hidden;
}
.portfolio-preview[open] { animation: portfolio-dialog-reveal 240ms ease-in-out both; }
@keyframes portfolio-dialog-reveal { from { opacity: 0; } to { opacity: 1; } }
.portfolio-preview__shell { height: 100%; box-sizing: border-box; min-height: 0; }
.portfolio-preview__content {
    min-height: 0;
    grid-template-columns: minmax(0,1.6fr) minmax(280px,1fr);
    gap: clamp(32px,4vw,64px);
    align-items: stretch;
}
.portfolio-preview__media { height: 100%; min-height: 0; aspect-ratio: auto; }
.portfolio-preview__media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.portfolio-preview__details {
    min-height: 0;
    overflow: auto;
    align-self: stretch;
    align-content: center;
    padding: 12px 8px;
}
@media (max-width: 767px) {
    .portfolio-preview { height: calc(100dvh - 32px); }
    .portfolio-preview__shell { overflow: auto; }
    .portfolio-preview__content { flex: 0 0 auto; grid-template-columns: minmax(0,1fr); gap: 24px; }
    .portfolio-preview__media { height: clamp(220px,34dvh,360px); }
    .portfolio-preview__details { overflow: visible; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .portfolio-preview[open] { animation: none; }
}

/* Review: single-step service enquiry replaces the quote calculator UI. */
.quote-enquiry {
    width: min(920px,calc(100% - 32px));
    max-width: none;
    max-height: calc(100dvh - 40px);
    margin: auto;
    padding: 0;
    border: 1px solid #ffffffb3;
    border-radius: 26px;
    background: #dbe4e7;
    color: #294557;
    box-shadow: 0 24px 90px #102e4855;
    overflow: hidden;
}
.quote-enquiry::backdrop { background: #16334666; backdrop-filter: blur(12px); }
.quote-enquiry *, .quote-enquiry *::before, .quote-enquiry *::after { box-sizing: border-box; }
.quote-enquiry [hidden] { display: none !important; }
.qe-shell { max-height: calc(100dvh - 42px); overflow: auto; overscroll-behavior: contain; }
.qe-shell:focus { outline: none; }
.qe-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 26px 36px 18px; gap: 20px; }
.qe-header h2 { margin: 0; font: 400 32px/1.2 Kanit,sans-serif; color: #526779; }
.qe-header p { margin: 7px 0 0; font: 400 15px/1.5 Kanit,sans-serif; }
.qe-close { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 0; background: transparent; color: #294557; cursor: pointer; }
.qe-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 24px; padding: 4px 36px 32px; }
.qe-form > label:not(.qe-check), .qe-service-field { display: block; font: 400 14px/1.5 Kanit,sans-serif; }
.qe-full { grid-column: 1 / -1; }
.qe-optional { font-size: 12px; color: #607887; }
.qe-form input:not([type="checkbox"]), .qe-form textarea, .qe-service-dialog .qe-search {
    display: block; width: 100%; margin: 7px 0 0; padding: 13px 15px;
    border: 1px solid #b9cbd2; border-radius: 12px; background: #e7eef0;
    color: #294557; font: 400 16px/1.5 Kanit,sans-serif;
    box-shadow: inset 2px 2px 5px #b3c4cc66,inset -2px -2px 5px #ffffffb3;
}
.qe-form textarea { resize: vertical; min-height: 125px; }
.qe-picker { margin-top: 7px; border: 1px solid #b9cbd2; border-radius: 12px; background: #e7eef0; }
.qe-picker > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; cursor: pointer; list-style: none; font: 400 16px/1.5 Kanit,sans-serif; }
.qe-picker > summary::-webkit-details-marker { display: none; }
.qe-picker[open] > summary { border-bottom: 1px solid #b9cbd2; }
.qe-picker[open] > summary svg { transform: rotate(180deg); }
.qe-picker-body { padding: 16px; }
.qe-help, .qe-done { border: 1px solid #ffffff99; border-radius: 10px; padding: 10px 16px; background: #dbe4e7; color: #294557; font: 400 14px/1.4 Kanit,sans-serif; box-shadow: 3px 3px 7px #b0c0c980,-3px -3px 7px #ffffffc9; cursor: pointer; }
.qe-context { margin: 14px 0; padding: 12px; border-radius: 10px; background: #d1dee2; font: 400 14px/1.6 Kanit,sans-serif; }
.qe-search-label { display: block; margin-top: 16px; font: 400 13px/1.4 Kanit,sans-serif; }
.qe-category { margin-top: 22px; }
.qe-category h3 { margin: 0 0 12px; font: 500 20px/1.3 Kanit,sans-serif; color: #526779; }
.qe-service-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.qe-option.qc-tile__face { width: 100%; min-width: 0; color: inherit; font-family: inherit; cursor: pointer; }
.qe-option[aria-pressed="true"] { background: #7999ac; border-color: #7da9d1; box-shadow: inset 4px 4px 9px #1959854d,inset -4px -4px 9px #eef9ff2b; color: #fff; }
.qe-option[aria-pressed="true"] img { opacity: 1; filter: brightness(0) invert(1); }
.qe-check input { flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #526779; }
@media (min-width: 768px) and (max-width: 991px) {
    .qe-service-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
.qe-done { display: block; margin: 20px 0 0 auto; }
.qe-selected { display: flex; flex-wrap: wrap; gap: 7px; }
.qe-selected:not(:empty) { margin-top: 10px; }
.qe-chip { padding: 5px 9px; border: 1px solid #b0c4ce; border-radius: 20px; color: #294557; background: #d1dfe4; font: 400 12px/1.4 Kanit,sans-serif; cursor: pointer; }
.qe-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font: 400 13px/1.6 Kanit,sans-serif; }
.qe-check a { color: inherit; text-decoration: underline; font: inherit; }
.qe-submit-row { display: flex; align-items: center; gap: 18px; }
.qe-submit { padding: 13px 28px; border: 1px solid #ffffff80; border-radius: 12px; background: #526779; color: white; font: 400 16px/1.4 Kanit,sans-serif; cursor: pointer; }
.qe-submit:disabled { opacity: .55; cursor: default; }
.qe-status, .qe-no-results { margin: 0; color: #526779; font: 400 13px/1.6 Kanit,sans-serif; }
.quote-enquiry :is(button,input,textarea,summary):focus-visible { outline: 2px solid #294557; outline-offset: 3px; }
@media (max-width: 767px) {
    .quote-enquiry { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 20px; }
    .qe-shell { max-height: calc(100dvh - 26px); }
    .qe-header { padding: 22px 20px 16px; }
    .qe-header h2 { font-size: 28px; }
    .qe-form { grid-template-columns: minmax(0,1fr); padding: 0 20px 24px; gap: 18px; }
    .qe-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .qe-picker-body { padding: 12px; }
    .qe-submit-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .qe-submit { width: 100%; }
}
.qe-options { max-height: min(420px,50dvh); overflow: auto; overscroll-behavior: contain; padding: 3px; }
.qe-check a { display: inline; margin: 0; padding: 0; }

/* Keep service browsing in its own modal with a single scrolling surface. */
.qe-picker-trigger { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; margin-top:7px; padding:14px 15px; border:1px solid #b9cbd2; border-radius:12px; background:#e7eef0; color:#294557; text-align:left; font:400 16px/1.5 Kanit,sans-serif; cursor:pointer; }
.qe-service-dialog { width:min(920px,calc(100% - 40px)); max-width:none; max-height:calc(100dvh - 40px); padding:0; border:1px solid #ffffffb3; border-radius:24px; color:#294557; background:#dbe4e7; overflow:hidden; }
.qe-service-dialog::backdrop { background:#16334666; backdrop-filter:blur(8px); }
.qe-service-shell { max-height:calc(100dvh - 42px); overflow:auto; overscroll-behavior:auto; }
.qe-service-shell:focus { outline:none; }
.qe-service-dialog .qe-picker-body { padding:0 32px 28px; }
.qe-service-dialog .qe-options { max-height:none; overflow:visible; overscroll-behavior:auto; padding:8px; }
.qe-service-dialog .qe-header h2 { font-size:28px; }
.qe-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; }
.qe-agreements { display:grid; gap:12px; }
.qe-actions .qe-submit { justify-self:end; white-space:nowrap; }
@media (max-width:767px) {
    .qe-service-dialog { width:calc(100% - 24px); max-height:calc(100dvh - 24px); border-radius:20px; }
    .qe-service-shell { max-height:calc(100dvh - 26px); }
    .qe-service-dialog .qe-picker-body { padding:0 12px 20px; }
    .qe-actions { gap:12px; grid-template-columns:minmax(0,1fr) auto; }
    .qe-actions .qe-submit { width:auto; padding:12px; font-size:13px; }
    .qe-actions .qe-check { font-size:12px; gap:7px; }
}

.qe-services-close { font:300 28px/1 Kanit,sans-serif; }

.qe-option.is-dependent { opacity:1; cursor:default; background:#b9ced8; color:#294557; box-shadow:inset 3px 3px 7px #9ab4c1,inset -3px -3px 7px #edf7fa; }
.qe-chip:disabled { opacity:1; cursor:default; }

/* Fade the service tiles behind the always reachable Done action. */
.qe-services-footer {
    position:sticky;
    bottom:0;
    z-index:2;
    display:flex;
    justify-content:flex-end;
    margin:16px -32px -28px;
    padding:42px 32px 22px;
    background:linear-gradient(to bottom,rgba(219,228,231,0) 0%,rgba(219,228,231,.88) 38%,#dbe4e7 72%);
    pointer-events:none;
}
.qe-services-footer .qe-done {
    pointer-events:auto;
    min-width:140px;
    min-height:50px;
    margin:0;
    padding:13px 28px;
    border-radius:12px;
    font-size:17px;
}
@media (max-width:767px) {
    .qe-services-footer { margin:16px -12px -20px; padding:36px 20px calc(16px + env(safe-area-inset-bottom,0px)); }
    .qe-services-footer .qe-done { min-width:132px; }
}

/* Match the carousel progress outline and leave a 12px gap to Skip. */
#id-corosol-service .ss-service-progress-controls { width:max-content; height:auto; gap:12px; z-index:40; pointer-events:auto; }
#id-corosol-service .ss-service-progress-controls .scroll-progress-af { margin:0; flex:0 0 auto; }
.ss-service-carousel-skip { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-height:28px; padding:3px 12px; border:1px solid #d1dcdf; border-radius:20px; outline:.01rem solid #b1c5d6; outline-offset:0; background:var(--bg-base); color:var(--brand-ink); box-shadow:0 5px 18px rgb(173 230 252 / .32); font:400 12px/1.4 Kanit,sans-serif; text-decoration:none; }
.ss-service-carousel-skip:hover { background:var(--control-surface); }
.ss-service-carousel-skip:focus-visible { outline:2px solid var(--brand-blue); outline-offset:3px; }

.qe-page-services { margin:22px 8px 16px; }
.qe-page-services-title { margin:0 0 10px; color:#526779; font:400 14px/1.5 Kanit,sans-serif; }
.qe-page-service-tokens { display:flex; flex-wrap:wrap; gap:8px; }
.qe-page-service-token { display:inline-flex; align-items:center; min-height:36px; padding:7px 13px; border:1px solid #b0c4ce; border-radius:20px; background:#e7eef0; color:#294557; font:400 13px/1.4 Kanit,sans-serif; cursor:pointer; }
.qe-page-service-token[aria-pressed="true"] { background:#7999ac; border-color:#7da9d1; color:#fff; }
.qe-page-service-token:disabled { cursor:default; opacity:1; }

.qe-page-services:not([hidden]) + .qe-options .qe-category:first-child { margin-top:8px; }

.portfolio-api-section .portfolio-more {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:var(--control-surface);
    color:var(--brand-ink);
    font:400 clamp(18px,2vw,26px)/1.4 Kanit,sans-serif;
    text-align:center;
    cursor:pointer;
}
.portfolio-api-section .portfolio-more:hover { background:#c8d9e0; box-shadow:inset 4px 4px 10px #afc2cc88,inset -4px -4px 10px #ffffff88; }
.portfolio-api-section .portfolio-more:focus-visible { outline:2px solid var(--brand-blue); outline-offset:-5px; }

.ss-submission-hidden { display:none !important; }
.ss-form-confirmation { padding:clamp(28px,5vw,64px); text-align:center; color:var(--brand-ink); background:#dbe4e7; border:1px solid #ffffff99; border-radius:22px; box-shadow:8px 8px 22px #aabcc855,-8px -8px 22px #ffffff88; }
.quote-enquiry .ss-form-confirmation { margin:0 24px 28px; box-shadow:none; border:0; }
.ss-form-confirmation__icon { display:grid; place-items:center; width:68px; height:68px; margin:0 auto 22px; border:1px solid #a5c2d3; border-radius:50%; color:#31688a; background:#e6eff2; box-shadow:inset 3px 3px 7px #adc4d066,inset -3px -3px 7px #ffffff; font:400 32px/1 Kanit,sans-serif; }
.ss-form-confirmation h2 { margin:0 0 14px; color:#526779; font:400 clamp(25px,3vw,34px)/1.25 Kanit,sans-serif; }
.ss-form-confirmation h2:focus { outline:none; }
.ss-form-confirmation p { max-width:46ch; margin:0 auto 28px; font:400 16px/1.7 Kanit,sans-serif; }
.ss-form-confirmation__action { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 24px; border:1px solid #ffffff99; border-radius:12px; color:#294557; background:#dbe4e7; box-shadow:4px 4px 9px #adbec788,-4px -4px 9px #ffffffaa; font:400 15px/1.4 Kanit,sans-serif; text-decoration:none; cursor:pointer; }
.ss-form-confirmation__action:focus-visible { outline:2px solid var(--brand-blue); outline-offset:4px; }
/* Bobby's live chat reuses the existing dock and ripple shell. */
.bobby-chat { width:min(410px,calc(100vw - 24px)); height:min(650px,calc(100dvh - var(--chat-bottom) - 18px)); }
.bobby-chat__embed { display:flex; flex-direction:column; gap:10px; padding:20px 16px 14px; overflow:hidden; color:#294557; }
.bobby-chat__embed [hidden] { display:none!important; }
.bobby-conversation-header { padding:2px 36px 12px 2px; border-bottom:1px solid #b9cbd2; }
.bobby-conversation-header strong { display:block; font:400 24px/1.2 Kanit,sans-serif; }
.bobby-conversation-header span { font:400 12px/1.4 Kanit,sans-serif; }
.bobby-conversation-log { display:flex; flex-direction:column; flex:1; min-height:80px; overflow:auto; overscroll-behavior:contain; padding:4px; }
.bobby-message { flex:none; margin:0 20px 14px 0; padding:12px; border:1px solid #fff9; border-radius:14px; background:#f0f5f6; font:400 14px/1.5 Kanit,sans-serif; }
.bobby-message p { margin:5px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; }
.bobby-message strong { font-size:12px; color:#526779; }
.bobby-message--user { margin:0 0 14px 20px; background:#c7dbe4; }
.bobby-message--system { background:transparent; border:0; padding:4px 8px; font-size:12px; }
.bobby-message-link { display:block; margin-top:8px; color:#1b5b91; font-size:13px; text-decoration:underline; }
.bobby-message-action { margin-top:10px; padding:9px 12px; border:1px solid #acbec9; border-radius:9px; background:#dbe4e7; color:#294557; cursor:pointer; font:400 13px/1.4 Kanit,sans-serif; }
.bobby-conversation-form { display:flex; align-items:end; gap:8px; }
.bobby-conversation-form textarea { flex:1; min-width:0; resize:none; padding:10px; border:1px solid #b1c5cf; border-radius:12px; background:#edf3f5; color:#294557; font:400 15px/1.4 Kanit,sans-serif; }
.bobby-conversation-form button,.bobby-handoff-form button[type=submit] { padding:12px 14px; border:0; border-radius:10px; background:#526779; color:#fff; font:400 14px/1.4 Kanit,sans-serif; cursor:pointer; }
.bobby-conversation-form button:disabled { opacity:.5; cursor:default; }
.bobby-conversation-status { margin:0; min-height:16px; color:#526779; font:400 12px/1.4 Kanit,sans-serif; }
.bobby-conversation-tools { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.bobby-conversation-tools button,.bobby-conversation-tools a { padding:4px; border:0; background:none; color:#526779; font:400 12px/1.4 Kanit,sans-serif; text-decoration:underline; cursor:pointer; }
.bobby-conversation-privacy { margin:0; font:400 10px/1.4 Kanit,sans-serif; color:#607887; }
.bobby-handoff-form { position:absolute; z-index:3; inset:60px 12px 12px; display:flex; flex-direction:column; gap:12px; overflow:auto; padding:20px; border:1px solid #fff; border-radius:16px; background:#dbe4e7; box-shadow:0 6px 22px #16334644; }
.bobby-handoff-form label { font:400 13px/1.5 Kanit,sans-serif; }
.bobby-handoff-form input:not([type=checkbox]) { display:block; width:100%; margin-top:5px; padding:10px; border:1px solid #b1c5cf; border-radius:10px; background:#edf3f5; }
.bobby-handoff-consent { display:flex; align-items:start; gap:8px; }
.bobby-handoff-consent input { flex:0 0 18px; width:18px; height:18px; margin-top:2px; }
.bobby-handoff-form [data-bobby-cancel-handoff] { background:none; border:0; color:#526779; cursor:pointer; }
.bobby-sr-only { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }

.bobby-conversation-intro { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; padding:24px 12px; border:0; background:none; box-shadow:none; text-align:center; }
.bobby-conversation-intro p { max-width:30ch; margin:0; color:#607887; font:400 12px/1.5 Kanit,sans-serif; }
.bobby-conversation-intro a { display:inline-block; margin-top:9px; color:#426a82; font:400 12px/1.4 Kanit,sans-serif; text-decoration:underline; }
.bobby-conversation-intro .bobby-conversation-product { margin-top:16px; font-size:11px; }

.bobby-conversation-header { position:relative; padding-right:80px; }
.bobby-end-chat { position:absolute; right:32px; top:4px; padding:3px 6px; border:0; background:none; color:#607887; font:400 11px/1.4 Kanit,sans-serif; text-decoration:underline; cursor:pointer; }
.bobby-verification { padding:14px; border:1px solid #b9cbd2; border-radius:12px; background:#edf3f5; font:400 13px/1.5 Kanit,sans-serif; }
.bobby-verification p { margin:0 0 8px; }
.bobby-verification button { padding:9px 12px; border:0; border-radius:9px; background:#526779; color:#fff; font:inherit; cursor:pointer; }
.bobby-verification button:disabled { opacity:.5; cursor:default; }

/* Keep handoff progress visible inside the contact form overlay. */
.bobby-handoff-status{padding:14px 16px;margin:0;border:1px solid #41597b;background:#bed0ea;color:#41597b;font:400 14px/1.6 Kanit,sans-serif;overflow-wrap:anywhere}
.bobby-handoff-form[data-state="sending"] .bobby-handoff-status::before{content:"";display:inline-block;width:15px;height:15px;margin-right:9px;vertical-align:-3px;border:2px solid #41597b40;border-top-color:#41597b;border-radius:50%;animation:bobby-handoff-spin .8s linear infinite}
.bobby-handoff-form[data-state="complete"]{justify-content:center;align-items:center;gap:28px;padding:28px;text-align:center;border:0;background:#dbe4e7;box-shadow:inset 3px 3px 8px #b7c4cb88,inset -3px -3px 8px #ffffffaa}
.bobby-handoff-form[data-state="complete"] .bobby-handoff-status{width:100%;padding:28px 20px;border:0;border-radius:22px;background:#dbe4e7;color:#334d67;font-size:18px;box-shadow:7px 7px 18px #b7c4cb,-7px -7px 18px #f9ffff}
.bobby-handoff-ok{min-width:120px;min-height:48px;padding:12px 30px;border:0;border-radius:16px;background:#dbe4e7;color:#334d67;font:500 16px/1.4 Kanit,sans-serif;cursor:pointer;box-shadow:5px 5px 12px #b7c4cb,-5px -5px 12px #f9ffff;transition:box-shadow .15s ease,color .15s ease}
.bobby-handoff-ok:hover{color:#17384f;box-shadow:3px 3px 8px #b7c4cb,-3px -3px 8px #f9ffff}
.bobby-handoff-ok:active{box-shadow:inset 3px 3px 7px #b7c4cb,inset -3px -3px 7px #f9ffff}
.bobby-handoff-ok:focus-visible{outline:2px solid #41597b;outline-offset:6px}
.bobby-handoff-form [disabled]{opacity:.65;cursor:wait}
@keyframes bobby-handoff-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.bobby-handoff-form[data-state="sending"] .bobby-handoff-status::before{animation:none}}