@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
 
html {
  scroll-behavior: smooth;
}

:root {
  --ma-charcoal: #1C1C1C;
  --ma-teal:  #5e7374;
  --ma-teal-light: #4A9A9A;
  --ma-teal-dark: #1E4A4A;
  --ma-linen: #F5F0E8;
  --ma-sand: #E8E0D0;
  --ma-offwhite: #FAFAF7;
  --ma-slate: #3D3D3D;
  --ma-white: #ffffff;
  --ma-font-display: 'Cormorant Garamond', serif;
  --ma-font-body: "Noto Sans", sans-serif;
  --ma-max-width: 1320px;
  --ma-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ma-transition-fast: all 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
 
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
body {
  font-family: var(--ma-font-body);
  background: var(--ma-offwhite);
  color: var(--ma-slate);
  overflow-x: hidden;
	font-size: 16px !important;
}


h2, h3{
	font-weight: 600 !important;
}

/*GRAVITY FORMS*/
/* ─── VARIABLES ─── */
/*:root {
  --ma-charcoal: #1C1C1C !important;
  --ma-teal:  #5e7374 !important;
  --ma-teal-light: #4A9A9A !important;
  --ma-teal-dark: #1E4A4A !important;
  --ma-linen: #F5F0E8 !important;
  --ma-sand: #E8E0D0 !important;
  --ma-offwhite: #FAFAF7 !important;
  --ma-slate: #3D3D3D !important;
  --ma-white: #ffffff !important;
  --ma-font-display: 'Cormorant Garamond', serif !important;
  --ma-font-body: 'Jost', sans-serif !important;
}*/

/* ─── FORM GRID LAYOUT (Overrides GF Default Layout globally) ─── */

.ma-btn-primary-fill {
  position: absolute;
  inset: 0;
  background: #fff !important;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1;
}

.white-bg{
	background-color: #fff !important;
}

form[id^="gform_"] .gform_fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Creates the 50/50 split */
    gap: 2px !important; /* Creates the 2px line between fields */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ma-btn-primary-light {
  font-family: var(--ma-font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ma-charcoal);
  text-decoration: none;
  background: var(--ma-white);
  padding: 18px 40px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: color 0.35s ease, transform 0.2s ease;
  white-space: nowrap;
}
 
.ma-btn-primary-light-bg {
  position: absolute;
  inset: 0;
  background: var(--ma-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1;
}
 
.ma-btn-primary-light:hover { color: var(--ma-white); transform: translateY(-2px); }
.ma-btn-primary-light:hover .ma-btn-primary-light-bg { transform: scaleX(1); }

/* Force full-width fields to span across both columns */
form[id^="gform_"] .gfield.gfield--width-full {
    grid-column: span 2 !important;
}

/* Force half-width fields to take up exactly one column */
form[id^="gform_"] .gfield.gfield--width-half {
    grid-column: span 1 !important;
}

/* ─── THE FIELD BOX (Becomes the bordered container) ─── */
form[id^="gform_"] .gfield {
    display: flex !important;
    flex-direction: column !important;
    background: var(--ma-white) !important;
    border: 1px solid var(--ma-sand) !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: border-color 0.3s ease, background 0.2s ease !important;
    box-sizing: border-box !important;
}

/* Highlight the whole box when the user clicks inside */
form[id^="gform_"] .gfield:focus-within {
    border-color: var(--ma-teal-light) !important;
    background: var(--ma-offwhite) !important;
}

/* ─── LABELS (Moved inside the box) ─── */
form[id^="gform_"] .gfield_label {
    font-family: var(--ma-font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    color: var(--ma-teal) !important;
    padding: 14px 18px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* ─── INPUTS & TEXTAREAS (Transparent, no borders) ─── */
form[id^="gform_"] .ginput_container input,
form[id^="gform_"] .ginput_container textarea,
form[id^="gform_"] .ginput_container select {
    font-family: var(--ma-font-body) !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    color: #a5a5a5 !important;
    background: transparent !important;
    border: none !important;
    padding: 10px 18px 16px !important;
    margin: 0 !important;
    outline: none !important;
    width: 100% !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

form[id^="gform_"] .ginput_container select {
	  padding: 0 18px !important;
}

/* Ensure Textarea has enough height */
form[id^="gform_"] .ginput_container textarea {
    resize: vertical !important;
    min-height: 120px !important;
}

/* Placeholder text styling */
form[id^="gform_"] .ginput_container input::placeholder,
form[id^="gform_"] .ginput_container textarea::placeholder {
    color: #b3b3b3 !important;
    font-weight: 300 !important;
    opacity: 1 !important;
}

/* ─── SUBMIT BUTTON ─── */
form[id^="gform_"] .gform_footer {
    margin-top: 24px !important;
    padding: 0 !important;
    display: flex !important;
}

form[id^="gform_"] .gform_button {
    font-family: var(--ma-font-body) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--ma-white) !important;
    background: var(--ma-teal) !important;
    border: none !important;
    padding: 16px 40px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
}

form[id^="gform_"] .gform_button:hover {
    transform: translateY(-2px) !important;
    background: var(--ma-teal-dark) !important;
    box-shadow: 0 10px 28px rgba(45,106,106,0.3) !important;
}

/* ─── HIDE EXTRA GF ELEMENTS ─── */
/* Hides description texts or extra spacing GF tries to inject */
form[id^="gform_"] .gfield_description {
    display: none !important;
}

/* ─── HIDE GRAVITY FORMS HONEYPOT (ANTI-SPAM) ─── */
form[id^="gform_"] .gform_validation_container,
.gform_validation_container {
    display: none !important;
    position: absolute !important;
    left: -9000px !important;
    visibility: hidden !important;
}





 
/* ─── PROCESS ─── */
.ma-process {
  background: var(--ma-charcoal);
  padding: 120px 48px;
  position: relative;
  overflow: hidden;
}
 
.ma-process-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
 
.ma-process-inner {
  max-width: var(--ma-max-width);
  margin: 0 auto;
  position: relative;
}
 
.ma-process-header { margin-bottom: 80px; }
 
.ma-process-h2 {
  font-family: var(--ma-font-display);
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ma-white);
  margin-top: 16px;
}
 
.ma-process-h2-em { font-style: italic; color: var(--ma-teal-light); }
 
.ma-process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
 
.ma-process-steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ma-teal) 0%, rgba(74,154,154,0.2) 100%);
}
 
.ma-process-step {
  padding: 0 32px 48px 0;
  position: relative;
}
 
.ma-process-step-num-wrap {
  position: relative;
  margin-bottom: 36px;
}
 
.ma-process-step-dot {
  width: 56px;
  height: 56px;
  border: 1px solid rgba(43, 43, 43, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background: var(--ma-charcoal);
  transition: var(--ma-transition);
}
 
.ma-process-step:hover .ma-process-step-dot {
  border-color: var(--ma-teal);
  background: #2a3a3a;
}
 
.ma-process-step-num {
  font-family: var(--ma-font-display);
  font-size: 25px;
  font-weight: 500;
  color: var(--ma-teal-light);
}
 
.ma-process-step-phase {
  font-family: var(--ma-font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ma-teal-light);
  margin-bottom: 10px;
}
 
.ma-process-step-title {
  font-family: var(--ma-font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  color: var(--ma-white);
  line-height: 1.2;
  margin-bottom: 14px;
}
 
.ma-process-step-body {
  font-family: var(--ma-font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(115, 115, 115, 1);
}
 

 

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  
  .ma-process { padding: 96px 32px; }
  .ma-process-steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .ma-process-steps::before { display: none; }
	
	.ma-process-steps {
		grid-template-columns: repeat(3, 1fr) !important;	
	}
}

 
@media (max-width: 768px) {
  .ma-process { padding: 80px 24px; }
  .ma-process-steps { grid-template-columns: 1fr; gap: 40px; }
	
	.ma-process-steps {
		grid-template-columns: repeat(1, 1fr) !important;	
	}
}
 
@media (max-width: 480px) {
  .ma-process { padding: 72px 18px; }
}

.ma-process-step-body{
	color: #fff !important;	
}

.ma-process-step-title em{
	font-size: 17px;
	color: #5cbfbf;
}


.ma-process-grid-bg{
	background-image: url('https://masonarchitecture.kinsta.cloud/wp-content/uploads/cross-pattern-4.svg') !important;
	background-size: contain !important;
	background-position: center !important;
}

.ma-process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}

@media (min-width: 1025px){
	.ma-process-steps {
    grid-template-columns: repeat(3, 1fr) !important;
}
}