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

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

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

/*------------------------------------------*/
/* BACKGROUNDS                              */
/*------------------------------------------*/
/* Background colours */
:root {
  --bg-cream: #f7efe2;
  --bg-white: #ffffff;
  --bg-earth: #1e1405;
}
.bg-cream { background-color: var(--bg-cream); color: var(--bg-earth); }
.bg-white { background-color: var(--bg-white); color: var(--bg-earth); }
.bg-earth { background-color: var(--bg-earth); color: var(--bg-white);}

/* Primary palette for backgrounds */
.bg-sunray      { background-color: #ffcd2e; }
.bg-coral       { background-color: #ff8e65; }
.bg-blush       { background-color: #ff6e80; }
.bg-magenta     { background-color: #dd37d2; }
.bg-violet      { background-color: #a805fb; }

/* Extended palette for backgrounds */
.bg-dark-teal   { background-color: #077982; }
.bg-teal        { background-color: #009aa1; }
.bg-dark-emerald{ background-color: #287a4d; }
.bg-emerald     { background-color: #339b62; }
.bg-dark-azure  { background-color: #0b6fc1; }
.bg-azure       { background-color: #148def; }
.bg-dark-indigo { background-color: #4c32df; }
.bg-indigo      { background-color: #674cff; }
.bg-dark-magenta{ background-color: #bd26b3; }
.bg-dark-violet { background-color: #8805cb; }
.bg-dark-crimson{ background-color: #d5172f; }
.bg-crimson     { background-color: #f1384f; }
.bg-dark-blush  { background-color: #e75769; }
.bg-dark-coral  { background-color: #ec7346; }
.bg-dark-sunray { background-color: #f0b113; }

.swatch {
  padding: 10px 15px;
  color: #fff;
  margin-bottom: 8px;
  display: inline-block;
  border-radius: 4px;
  font-family: 'TWK Everett', Arial, sans-serif;
}
.bg-cream.swatch, .bg-white.swatch { color: var(--bg-earth); } /* dark text on light bg */


/*------------------------------------------*/
/* FONTS                                    */
/*------------------------------------------*/

/* TWK Everett local font */
@font-face {
  font-family: 'TWK Everett';
  src: url('https://441896203.fs1.hubspotusercontent-ap1.net/hubfs/441896203/raw_assets/public/Cotality%20AU/assets/fonts/TWKEverett-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'TWK Everett';
  src: url('https://441896203.fs1.hubspotusercontent-ap1.net/hubfs/441896203/raw_assets/public/Cotality%20AU/assets/fonts/TWKEverett-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

/* IBM Plex Mono (loaded from Google Fonts) */
body, .ibm-plex-mono {
  font-family: 'IBM Plex Mono', monospace;
}

/*------------------------------------------*/
/* BODY & TYPOGRAPHY                        */
/*------------------------------------------*/
html {
  font-size: 16px;
}

body {
  background-color: #f7efe2; /* cream */
  color: #1e1405; /* primary text */
  font-family: 'TWK Everett', Arial, sans-serif;
  line-height: 1.5;
}


h1, h2, h3, h4, h5, h6 {
  font-family: 'TWK Everett', Arial, sans-serif;
  color: #1e1405;
  margin-bottom: 1rem;
}
h1 {
  font-size: 3.2rem;
  font-weight: 700;
}

h2 {
  font-size: 2.2rem;
  font-weight: 700;x
}
p, span, li, small {
  font-family: 'TWK Everett', Arial, sans-serif;
  color: #1e1405;
  font-size: 1rem;
}

@media (max-width: 767.98px) {
  html {
    font-size: 12px;
  }
  h1 {
  font-size: 2.7rem;
  }
  h2 {
  font-size: 2.5rem;
  }
}

.terms-conditions {
  --font-size-modifier: -1rem;

  & h2 {
    font-size: calc(2rem + var(--font-size-modifier));
  }

  & p,
  & ul {
    font-size: calc(1.7rem + var(--font-size-modifier));
    line-height: 1.4;
    margin-bottom: 0.5rem;
  }

  & li {
    font-size: calc(1.7rem + var(--font-size-modifier));
    line-height: 1.4;
    margin-bottom: 0;
  }
}


.bg-sunray,
.bg-coral,
.bg-blush,
.bg-magenta,
.bg-violet,
.bg-earth {
  * {
    color: var(--bg-white);
  }
}
.hs_cos_wrapper_type_rich_text ul li {
    background-image: url('https://441896203.fs1.hubspotusercontent-ap1.net/hubfs/441896203/raw_assets/public/Cotality%20AU/assets/list_bullet.svg');
    background-repeat: no-repeat;
    list-style-type: none;
    padding-left: 2.4rem;
}
ol li {
    text-indent: 1rem;
    margin-left: 1.5rem;
}
blockquote {
  font-size: 1.2rem;
  background-color: var(--bg-white);
  padding: 2rem;
  /* Cut off the top-right corner */
  clip-path: polygon(
    0 0, 
    calc(100% - 52px) 0, 
    100% 32px, 
    100% 100%, 
    0 100%
  );
}
blockquote::before {
  content:'“';
  font-size: 2rem;
  font-weight: bold;
  margin-right: 1rem;
}

/* Text colours */
.text-cream       { color: #f7efe2; }
.text-white       { color: #ffffff; }
.text-earth       { color: #1e1405; }
.text-sunray      { color: #ffcd2e; }
.text-coral       { color: #ff8e65; }
.text-blush       { color: #ff6e80; }
.text-magenta     { color: #dd37d2; }
.text-violet      { color: #a805fb; }


/*------------------------------------------*/
/* LINKS                                    */
/*------------------------------------------*/
a {
  color: #0b6fc1;
  text-decoration: underline;
}

a:hover {
  text-decoration: underline;
  color: #0b6fc1;
}

/*------------------------------------------*/
/* BUTTONS                                  */
/*------------------------------------------*/
.btn,.hs-button,.primary-btn,.secondary-btn,button {
    align-items: center;
    /* background-position:95%; */
    /* background-repeat:no-repeat; */
    /* background-size:auto; */
    border: none;
    cursor: pointer;
    display: inline-flex;
    font-family: IBM Plex Mono Medium,Courier New,monospace;
    font-weight: 500;
    gap: 8px;
    justify-content: center;
    padding: 20px;
    text-decoration: none;
}

.primary-btn, .btn-primary, .hs-button {
  background-color: #a805fb;
  color: #ffffff;
  text-decoration: none;
}

.primary-btn:hover, .btn-primary:hover, .hs-button:hover {
  background-color: #8805cb;
  color: #ffffff;
  text-decoration: none;
}

.secondary-btn, .btn-secondary, .hs-button.secondary {
  background-color: transparent;
  text-decoration: none;
  border: 2px solid #a805fb;
  color: #1e1405;
}

.secondary-btn:hover, .btn-secondary:hover, .hs-button.secondary:hover {
  opacity: 0.9;
  color: #1e1405;
  text-decoration: none;
}

.hs-button::after, .primary-btn::after, .btn-primary::after, .secondary-btn::after, .btn-secondary::after {
  font-family: 'Material Icons';
  content: 'arrow_forward';
  display: inline-block;
  margin-left: 8px;
  font-size: 18px;
  vertical-align: middle;
  color: currentColor; /* matches button text */
}

input.hs-button {
  background-position: 89% !important;
  background-repeat: no-repeat !important;
  padding-right: 60px;
  margin-top: 1rem;
}
.hs-button.primary {
    background-image: url(https://441896203.fs1.hubspotusercontent-ap1.net/hubfs/441896203/raw_assets/public/Cotality%20AU/assets/arrow-white.svg) !important;
}

/*------------------------------------------*/
/* STORYTELLER               */
/*------------------------------------------*/

.story{
    /*transition: max-height 1s ease-in-out;*/
}
.storyteller {
   opacity: 0;
   transition: all 0.3s ease-in-out 0.2s;
   height:  0;
   overflow: hidden;
}

.storyteller.reading{
    opacity: 1;
    display: initial;
    height:  auto;
}

.secondary-btn.previous:after {
content: none;
}
.secondary-btn.previous:before {
    color: currentColor;
    content: "arrow_back";
    display: inline-block;
    font-family: Material Icons;
    font-size: 18px;
    margin-right: 8px;
    vertical-align: middle;
}
/*------------------------------------------*/
/* HEADER & FOOTER (existing)               */
/*------------------------------------------*/
.site-header {
  background-color: #1e1405;
  padding: 20px 0;
}
.site-header .header-inner {

}
.site-header .logo img {
  max-width: 200px;
  height: auto;
}

.site-footer {
  padding: 30px 20px;
  text-align: center;
  font-family: Arial, sans-serif;
  line-height: 1.4;
}
.site-footer .footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  color: #f7efe2;
  font-size: 0.9rem;
}
.site-footer .footer-links {
  margin-top: 14px;
}
.site-footer .footer-links a {
  color: #f7efe2;
  text-decoration: underline;
  font-size: 14px;
}
.site-footer .footer-links span {
  margin: 0 6px;
  color: #f7efe2;
}
.site-footer .footer-address strong {
  color: #f7efe2;
}

/*------------------------------------------*/
/* FORMS                                    */
/*------------------------------------------*/
.hs-form .hs-error-msg,
.hs-form .hs_error_rollup label {
    color: #d5172f;
    opacity: 1;
}

/* HubSpot Form Inputs, Selects, Textareas */
.hs-form input:not([type=submit]):not([type=checkbox]),
.hs-form select,
.hs-form textarea {
    background: transparent;
    border: none;
    border-bottom: 2px solid #1e1405;
    color: #1e1405;
    font-size: 1rem;
    line-height: 1.5;
    padding: 8px 0;
    outline: none;
    width: 100%;
    /*margin-bottom: 0.75rem;*/
}

.hs-form input:focus,
.hs-form select:focus,
.hs-form textarea:focus {
    border-color: var(--bg-earth);
}

.hs-form input::placeholder, .hs-form textarea::placeholder {
  opacity: 0.6;
}
.form-control:focus {
    background-color: transparent;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
/* Remove Chrome’s blue focus outline */
.hs-form input:focus,
.hs-form textarea:focus,
.hs-form select:focus {
    outline: none;          /* removes the default blue */
    box-shadow: none;       /* ensures no other shadow appears */
    border-bottom-color: var(--bg-earth); /* optional: keep the bottom border color consistent */
}

/* Select styling with arrow */
.hs-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m1 1 4 4 4-4'/%3E%3C/svg%3E") 100% no-repeat;
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 6px;
  border: none;
  border-bottom: 2px solid #1e1405;
  border-radius: 0;
  padding: 8px 24px 8px 0; /* space for arrow */
  width: 100%;
  font-size: 1rem;
  color: #1e1405;
  cursor: pointer;
  outline: none;
}
.hs-form-field {
  margin-bottom: 1.5rem;
}

/* Labels */
.hs-form label {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    color: #1e1405;
    transition: all 0.3s;
    opacity: 0;
}
.hs-form label.visible {
  opacity: 0.7;
  max-height: 2rem;
}
*/

.hs-form>label {
    opacity: 0;
    max-height: 0;
}
.hs-form .hs-checkbox label, .hs-form .hs-fieldtype-radio label, .hs-form .hs-range label {
    opacity: 1;
    margin: 1.5rem 0 .5rem;
}
.legal-consent-container label {
    font-size: inherit;
    margin: 1.5rem 0 .5rem;
    opacity: 1;
}
.hs-form .hs-radio label {
    opacity: 1;
}
.hs-radio-wrapper .hs-radio label {
    text-align: center;
}
.hs-form .hs-radio-wrapper.d-flex {
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.legal-consent-container {
    font-size: .875em;
}


.hs-radio-wrapper .hs-radio {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content
}

/* Placeholder + Autofill */
.hs-form input::-webkit-input-placeholder,
.hs-form select::-webkit-input-placeholder,
.hs-form textarea::-webkit-input-placeholder {
  color: #1e1405;
}

.hs-form input:-webkit-autofill,
.hs-form input:-webkit-autofill:focus,
.hs-form input:-webkit-autofill:hover,
.hs-form input:-webkit-autofill:active {
    -webkit-text-fill-color: #1e1405;
    box-shadow: inset 0 0 0 1000px transparent;
}

/* Checkbox */

/* Container & label adjustments */
.hs-form-radio-display,
.hs-form-checkbox-display {
    padding-left: 35px !important;
    position: relative !important;
    display: inline-block;
    cursor: pointer;
}

/* Hide the actual input */

.hs-form-checkbox input {
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    position: absolute !important;
}
.hs-form-radio input {
  width: auto !important;
}

.hs-form-checkbox {
    margin-bottom: 1rem;
}

/* Label text styling */
.hs-form-radio label,
.hs-form-checkbox label {
  opacity:1;
}

.hs-form-checkbox-display span {
  font-size: 0.75rem;
  position: relative;
}
.hs-form-radio-display span {
  font-size: 1rem;
}


/* -------------------------------
   Hide actual inputs
---------------------------------*/
.hs-form-radio input[type="radio"],
.hs-form-booleancheckbox input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* -------------------------------
   Label positioning & spacing
---------------------------------*/
.hs-form-radio-display,
.hs-form-booleancheckbox-display {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding-left: 30px; /* space for custom control */
}

/* -------------------------------
   Custom outline (circle for radio, square for checkbox)
---------------------------------*/
.hs-form-radio-display span::before,
.hs-form-booleancheckbox-display span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc; /* grey outline */
  transform: translateY(-50%);
  box-sizing: border-box;
}

/* Circle for radios */
.hs-form-radio-display span::before {
  border-radius: 50%;
}

/* Slightly rounded square for checkboxes */
.hs-form-booleancheckbox-display span::before {
  border-radius: 4px;
}

/* -------------------------------
   Checked state (filled)
---------------------------------*/
.hs-form-radio-display input[type="radio"]:checked + span::after,
.hs-form-booleancheckbox-display input[type="checkbox"]:checked + span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  box-sizing: border-box;
}

/* Radio fill */
.hs-form-radio-display input[type="radio"]:checked + span::after {
  width: 12px;
  height: 12px;
  background: #ccc;
  border-radius: 50%;
  transform: translate(4px, -50%);
}

/* Checkbox fill */
.hs-form-booleancheckbox-display input[type="checkbox"]:checked + span::after {
  width: 14px;
  height: 14px;
  background: #ccc;
  border-radius: 2px;
  transform: translate(3px, -50%);
}



input[type='range']{
  accent-color: #000;
}
.hs-field-desc {
    font-size: 0.8rem;
    margin: 0.5rem 0;
}

/* Remove bullets for HubSpot radio/checkbox lists */
.inputs-list li {
  list-style: none;
  margin: 0;   /* reset spacing if needed */
  padding: 0;
}
.inputs-list {
  padding: 0;
}

abbr.required, .hs-form-required {
    color: red;
    text-decoration: none
}


/*------------------------------------------------------*/
/* CONTAINER DEFAULTS (Hubspot new drag-n-drop classes) */
/*------------------------------------------------------*/
/* --------------------------------------------------
   HubSpot DnD Grid — flex + gap (robust for nesting)
   Works with data-w="N" and legacy spanX classes
   Desktop: keeps configured column widths
   Mobile: stacks to full-width under 768px
   --------------------------------------------------*/
/* --------------------------
   DND GRID: calc-based widths
   -------------------------- */
:root { --dnd-gap: 1.5rem; } /* adjust once to change gutters */

.dnd-section {
  box-sizing: border-box;
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 2rem;
  /*padding-left: 1rem;*/
  /*padding-right: 1rem;*/
}

/* outer row is the flex container */
.dnd-section > .row-fluid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dnd-gap);
  margin: 0;
  align-items: stretch;
  box-sizing: border-box;
}

/* column base */
.dnd-section > .row-fluid > .dnd-column,
.dnd-section > .row-fluid > .widget-span {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 0 0 auto;
}

/* --- Smart calc widths for common layouts --- */
/* 3-up (data-w="4") -> 3 columns, 2 gaps */
.dnd-section .dnd-column[data-w="4"],
.dnd-section .widget-span[data-w="4"] {
  flex-basis: calc((100% - (2 * var(--dnd-gap))) / 3);
  max-width: calc((100% - (2 * var(--dnd-gap))) / 3);
}

/* 2-up (data-w="6") -> 2 columns, 1 gap */
.dnd-section .dnd-column[data-w="6"],
.dnd-section .widget-span[data-w="6"] {
  flex-basis: calc((100% - (1 * var(--dnd-gap))) / 2);
  max-width: calc((100% - (1 * var(--dnd-gap))) / 2);
}

/* 2/3 + 1/3 combos (data-w="8" & data-w="4") -> 2 columns, 1 gap
   calc proportionally from (100% - gap) */
.dnd-section .dnd-column[data-w="8"],
.dnd-section .widget-span[data-w="8"] {
  flex-basis: calc((100% - var(--dnd-gap)) * (8 / 12));
  max-width: calc((100% - var(--dnd-gap)) * (8 / 12));
}
.dnd-section .dnd-column[data-w="4"].two-col, /* fallback selector */
.dnd-section .widget-span[data-w="4"].two-col {
  flex-basis: calc((100% - var(--dnd-gap)) * (4 / 12));
  max-width: calc((100% - var(--dnd-gap)) * (4 / 12));
}
/* NOTE: if you see 8+4 side-by-side but .dnd-column[data-w="4"] used elsewhere as 3-up,
   the specific [data-w="4"] /3 rule above will apply. */

/* 4-up (data-w="3") -> 4 columns, 3 gaps */
.dnd-section .dnd-column[data-w="3"],
.dnd-section .widget-span[data-w="3"] {
  flex-basis: calc((100% - (3 * var(--dnd-gap))) / 4);
  max-width: calc((100% - (3 * var(--dnd-gap))) / 4);
}

.dnd-section .dnd-column[data-w="12"],
.dnd-section .widget-span[data-w="12"] {
    flex-basis: calc(100% - var(--dnd-gap));
    max-width: calc(100% - var(--dnd-gap));
}

/* Generic percent fallback (safe) */
.dnd-section .dnd-column[data-w="1"]  { flex-basis: 8.3333%;  max-width: 8.3333%; }
.dnd-section .dnd-column[data-w="2"]  { flex-basis: 16.6667%; max-width: 16.6667%; }
.dnd-section .dnd-column[data-w="5"]  { flex-basis: 41.6667%; max-width: 41.6667%; }
.dnd-section .dnd-column[data-w="7"]  { flex-basis: 58.3333%; max-width: 58.3333%; }
.dnd-section .dnd-column[data-w="8"]  { /* already set above with calc */ }
.dnd-section .dnd-column[data-w="9"]  { flex-basis: 75%;      max-width: 75%; }
.dnd-section .dnd-column[data-w="10"] { flex-basis: 83.3333%; max-width: 83.3333%; }
.dnd-section .dnd-column[data-w="11"] { flex-basis: 91.6667%; max-width: 91.6667%; }
.dnd-section .dnd-column[data-w="12"] { flex-basis: 100%;     max-width: 100%; }

/* Prevent nested inner .row-fluid from creating a competing flex context */
.dnd-column > .row-fluid-wrapper > .row-fluid,
.dnd-column .row-fluid-wrapper .row-fluid {
    align-items: stretch;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: var(--dnd-gap);
    margin: 0;
}

/* inner content padding so text doesn't sit on gutters */
.dnd-column > .row-fluid-wrapper {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  box-sizing: border-box;
}

/* MOBILE: stack columns full-width under 768px */
@media (max-width: 767.98px) {
  .dnd-section > .row-fluid > .dnd-column,
  .dnd-section > .row-fluid > .widget-span {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .dnd-column > .row-fluid-wrapper { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* Make DND sections with this class stretch to the full browser width */
.footer-full-width .dnd-section-inner {
  max-width: none;
}


/* STICKY FOOTER */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* Let main expand to fill available space */
main#main-content {
  flex: 1 0 auto;
}
  /* Footer stays at the bottom naturally */
footer.site-footer {
  flex-shrink: 0; /* Ensure it doesn’t shrink */
}


/*------------------------------------------*/
/* CONTAINER DEFAULTS (Bootstrap style)     */
/*------------------------------------------*/
.container, .container-fluid {
  max-width: 1140px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

/********************************************/
/*            MODULE SPECIFIC               */
/********************************************/
.banner {
  
}
.clipped {
  clip-path: polygon(0 0, calc(100% - 52px) 0, 100% 32px, 100% 100%, 0 100%);
}

/********************************************/
/*              COOKIE BANNER               */
/********************************************/


#hs-banner-parent * {
    font-family: 'TWK Everett', Arial, sans-serif !important;
}
#hs-banner-parent h2 {
    font-size: 1rem;
}
#hs-banner-parent a, #hs-banner-parent a strong {
    color: #000;
    text-decoration: underline !important;
}

/********************************************/
/*                 UTILS                    */
/********************************************/