/* ==========================================================================
   Global CSS — Hybrid Houses
   Based on the agency global stylesheet. Changes for this project:
   - Variables: Hybrid Houses palette (forest, sage, warm white, charcoal, timber gold)
   - Grid is mobile-first: columns are 100% by default, take 50% from 768px
     (.col3/.col4/.col6/.col20) and their set widths from 1024px
   - Sections don't float (keeps the sticky header and page flow reliable)
   - line-height set once on body, not on every element (*)
   - li keeps display:list-item so content lists show markers
   - #button uses a CSS chevron instead of FontAwesome (no icon font to load)
   - [hidden] always hides, even on elements given a display value
   ========================================================================== */

@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/jost-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Jost", "Futura", "Century Gothic", "Segoe UI", Arial, sans-serif;
  --font-size: 17px;
  --font-ssmall: 14px;
  --line-height: 1.7;
  --size-10: 10px;
  --size-15: 15px;
  --size-20: 20px;
  --size-25: 25px;
  --m-white-color: #FFFFFF;
  --m-black-color: #000000;
  --m-forest-color: #1B4D3E;   /* Forest green */
  --m-sage-color: #7A8F7A;     /* Sage green */
  --m-warm-color: #FAF9F6;     /* Warm white */
  --m-charcoal-color: #2E2E2E; /* Charcoal */
  --m-gold-color: #C9B06D;     /* Timber gold */
  --b-lgray-color: #707670;    /* placeholders */
  --d-green-color: #1B4D3E;    /* back-to-top button (name kept from global) */
}

/* Global css */
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: var(--font-size); font-family: var(--font-family); line-height: var(--line-height); background: var(--m-warm-color); color: var(--m-charcoal-color); font-weight: 400; }

section { width: 100%; position: relative; }
header, .homeBanner, .innerBannerBox, footer { width: 100%; }

a { text-decoration: none; outline: none; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; }
img { max-width: 100%; }
p, ul, ol { margin-bottom: 10px; color: inherit; }
small { font-size: var(--font-ssmall); }
ul { padding-left: 40px; }
strong { font-family: inherit; }
html, button, input, select, textarea { font-family: var(--font-family); font-size: var(--font-size); line-height: var(--line-height); }
div, ul, ol { display: block; }
input[type=submit], button { outline: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/* container & column (mobile-first) */
.containerBox { width: 100%; max-width: 1215px; margin: 0 auto; padding: 0; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.containerFull { max-width: 100%; width: 100%; padding: 0; display: flex; }
.rowBox { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.col1, .col2, .col20, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { width: 100%; padding: 0 15px; }
@media (min-width: 768px) {
  .col3, .col4, .col6, .col20 { width: 50%; }
}
@media (min-width: 1024px) {
  .col1 { width: 8.33333333%; } .col2 { width: 16.66666667%; } .col20 { width: 20%; } .col3 { width: 25%; }
  .col4 { width: 33.33333333%; } .col5 { width: 41.66666667%; } .col6 { width: 50%; } .col7 { width: 58.33333333%; }
  .col8 { width: 66.66666667%; } .col9 { width: 75%; } .col10 { width: 83.33333333%; } .col11 { width: 91.66666667%; }
}
/* End container & column */

/* placeholder */
::-webkit-input-placeholder { color: var(--b-lgray-color); }
::-moz-placeholder { color: var(--b-lgray-color); opacity: 1; }
:-ms-input-placeholder { color: var(--b-lgray-color); }
::placeholder { color: var(--b-lgray-color); }

/* heading */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.15; }

/* display */
[hidden] { display: none !important; }
.dnone { display: none !important; }

/* margin */
.m0 { margin: 0 !important; } .mt0 { margin-top: 0 !important; } .mb0 { margin-bottom: 0 !important; } .ml0 { margin-left: 0 !important; } .mr0 { margin-right: 0 !important; }
.mt10 { margin-top: 10px !important; } .mt15 { margin-top: 15px !important; } .mt20 { margin-top: 20px !important; } .mt30 { margin-top: 30px !important; } .mt40 { margin-top: 40px !important; } .mt50 { margin-top: 50px !important; } .mt60 { margin-top: 60px !important; }
.mb10 { margin-bottom: 10px !important; } .mb15 { margin-bottom: 15px !important; } .mb20 { margin-bottom: 20px !important; } .mb30 { margin-bottom: 30px !important; } .mb40 { margin-bottom: 40px !important; } .mb50 { margin-bottom: 50px !important; } .mb60 { margin-bottom: 60px !important; }

/* padding */
.p0 { padding: 0 !important; } .pt0 { padding-top: 0 !important; } .pb0 { padding-bottom: 0 !important; } .pl0 { padding-left: 0 !important; } .pr0 { padding-right: 0 !important; }
.pt10 { padding-top: 10px !important; } .pt20 { padding-top: 20px !important; } .pt30 { padding-top: 30px !important; } .pt40 { padding-top: 40px !important; } .pt50 { padding-top: 50px !important; } .pt60 { padding-top: 60px !important; }
.pb10 { padding-bottom: 10px !important; } .pb20 { padding-bottom: 20px !important; } .pb30 { padding-bottom: 30px !important; } .pb40 { padding-bottom: 40px !important; } .pb50 { padding-bottom: 50px !important; } .pb60 { padding-bottom: 60px !important; }

/* flex */
.dflex { display: flex; }
.fwrap { flex-wrap: wrap; }
.faistart { align-items: flex-start; }
.faicenter { align-items: center; }
.faiend { align-items: flex-end; }
.fjcstart { justify-content: flex-start; }
.fjccenter { justify-content: center; }
.fjcend { justify-content: flex-end; }
.fjcsb { justify-content: space-between; }
.rowreverse { flex-direction: row-reverse; }

/* text align */
.text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; }

/* background color */
.bg-white { background: var(--m-white-color); }
.bg-forest { background: var(--m-forest-color); }
.bg-sage { background: var(--m-sage-color); }
.bg-warm { background: var(--m-warm-color); }
.bg-gold { background: var(--m-gold-color); }

/* width */
.w315 { max-width: 315px; } .w260 { max-width: 260px; } .w380 { max-width: 380px; }

/* bg img */
.bgimg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.opcity1 { opacity: .1; } .opcity2 { opacity: .2; } .opcity3 { opacity: .3; } .opcity4 { opacity: .4; } .opcity5 { opacity: .5; }
.opcity6 { opacity: .6; } .opcity7 { opacity: .7; } .opcity8 { opacity: .8; } .opcity9 { opacity: .9; } .opcity10 { opacity: 1; }

/* Top scroll */
#button {
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--d-green-color); width: 46px; height: 46px; border: 1.5px solid rgba(250, 249, 246, .7); border-radius: 2px;
  position: fixed; bottom: 24px; right: 20px; z-index: 60; cursor: pointer; box-shadow: 0 6px 18px rgba(27, 77, 62, .25);
  -webkit-transition: background-color .3s, opacity .4s, visibility .4s; transition: background-color .3s, opacity .4s, visibility .4s;
  opacity: 0; visibility: hidden;
}
#button:hover { background: #143A2F; }
#button.show { opacity: 1; visibility: visible; }
#button::after { content: ""; width: 10px; height: 10px; margin-top: 5px; border-top: 2px solid #fff; border-left: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
@media (min-width: 768px) { #button { right: 30px; bottom: 40px; } }
/* End Global css */