/* ═══════════════════════════════════════════════════════════════
   H2 CONVEYANCING — DESIGN SYSTEM   
   ═══════════════════════════════════════════════════════════════ */

/* ───── Tokens ───── */
:root {
    /* Colours */
    --skin-red:         #ED1C24;   /* Primary/Red */
    --skin-black:       #231F20;   /* Primary/Rich Black */
    --skin-white:       #FFFFFF;
    --skin-grey-5:      #F4F4F4;   /* Secondary/Rich Black 5% */
    --skin-grey-10:     #E9E9E9;   /* Secondary/Rich Black 10% */
    --skin-dark-grey:   #2B2B2B;   /* Primary/Dark Grey */
    --skin-gold:        #FFB805;   /* review stars */
    --skin-red-soft:    #FF9DA0;   /* chevron accent red @ reduced opacity */
    --skin-grey-accent: #949494;   /* chevron accent grey */
	--border-color:     rgba(0, 0, 0, 0.02);
	--border-radius:    8px;

    /* Type — Vazirmatn for headings/buttons/most body, Inter for copyright, Varta for one callout */
    --font-heading:  'Vazirmatn', 'Arial', sans-serif;
    --font-body:     'Vazirmatn', 'Arial', sans-serif;
    --font-copy:     'Inter', 'Arial', sans-serif;
    --font-callout:  'Varta', 'Arial', sans-serif;
	--font-size: 	 19px;

    /* Layout */
    --skin-content-max: 1920px;
    --skin-gutter:      160px;
    --skin-wrapper-padding-block: 0;
	--t40:  40px;
    --t60: 60px;
	--t80: 80px;
}

/* ───── Page reset ───── */
* { box-sizing: border-box; }
html {
    /* Keeps anchor jumps (in-page links, anchor-nav module, keyboard focus
       landing on an off-screen element) from scrolling a target's heading
       underneath the sticky header. --header-h is set by assets/js/site.js
       from the header's real measured height; the fallback covers the
       instant before JS runs. */
    scroll-padding-top: var(--header-h, 100px);
}
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size);
    line-height: 1.5;
    color: var(--skin-black);
    background: var(--skin-white);
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ───── Typography ───── */
h1, .h1 { font-family: var(--font-heading); font-weight: 600; font-size: 56px; line-height: 68px; margin: 0 0 30px;  }
h2, .h2 { font-family: var(--font-heading); font-weight: 600; font-size: 46px; line-height: 58px; margin: 0 0 30px;  color: var(--skin-red); text-align: center; }
h3, .h3 { font-family: var(--font-heading); font-weight: 600; font-size: 36px; line-height: 46px; margin: 0 0 30px;  }
h4, .h4 { font-family: var(--font-heading); font-weight: 600; font-size: 23px; line-height: 29px; margin: 0 0 25px;  }
h6, .h6 { font-family: var(--font-heading); font-weight: 600; font-size: 21px; line-height: 23px; margin: 0 0 25px;  }
p { margin: 0 0 25px; }
.text-intro { font-family: var(--font-body); font-size: 19px; line-height: 29px; font-weight: 400; }
.text-copy  { font-family: var(--font-copy); font-size: 16px; line-height: 24px; font-weight: 400; }

/* ───── Layout helpers ───── */
.skin-inner {
    max-width: var(--skin-content-max);
    margin: 0 auto;
    width: 100%;
}

.skin-inner-reduced {
	max-width: 1200px;
}

.skin-wrapper { position: relative; 
    padding-block: var(--skin-wrapper-padding-block, 0); 
}

/* ───── Buttons — rounded pill system (no angled tail in this brand) ───── */
.elementor-button,
.skin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
	align-self: flex-start;
    gap: 6px;
    height: auto;
    line-height: 1.4em;
    padding: 16px 28px 13px;
    border-radius: 100px;
    border: 1px solid var(--skin-red);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--font-size);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.skin-btn i {
    margin-top: -3px;
}
.skin-btn-red   { background: var(--skin-red);   color: var(--skin-white); }
.skin-btn-black { background: var(--skin-black); color: var(--skin-white); border-color: var(--skin-black); }
.skin-btn-black:hover,
.skin-btn-black:focus,
.skin-btn-red:focus,
.skin-btn-red:hover   { background: var(--skin-white); color: var(--skin-red); }

.skin-btn-black:hover,
.skin-btn-black:focus {
	border-color: var(--skin-red);
}

/* Ghost text-link with angle-right icon — "Learn More" / "Read More" */
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 17px;
    color: var(--skin-red);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
}
.text-link i { font-size: 17px; }

/* Circular icon-only button — prev/next, back-to-top */
.skin-btn-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 100px;
    background: var(--skin-white);
    border: 2px solid var(--skin-red);
    color: var(--skin-red);
    font-size: 22px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.skin-btn-circle:hover { background: var(--skin-red); color: var(--skin-white); }

/* ───── Back-to-top floating button ───── */
.back-top {
    position: fixed;
    right: 40px;
    bottom: 40px;
    width: 62px;
    height: 62px;
    border-radius: 100px;
    background: var(--skin-white);
    border: 2px solid var(--skin-red);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--skin-red);
    font-size: 22px;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, background 0.2s, color 0.2s;
    z-index: 999;
}
.back-top.visible { opacity: 1; pointer-events: all; transform: translateY(0);}
.back-top:hover { background: var(--skin-red); color: var(--skin-white); }

/* ───── Full-bleed gradient background bands (page rhythm device) ───── */
.band-a {
    background: linear-gradient(to bottom, rgba(244,244,244,0) 0%, var(--skin-grey-5) 50%, rgba(244,244,244,0) 100%);
}
.band-b {
    background: linear-gradient(to bottom, rgba(254,244,244,0) 0%, #FEF4F4 53.6%, #FBD2D3 100%);
}

/* ───── Chevron diagonal accent (project motif) ───── */
.chevron-accent {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 121px;
    height: 636px;
    pointer-events: none;
    z-index: 0;
}
.chevron-accent-left  { left: 0; }
.chevron-accent-right { right: 0; }
.chevron-accent img { width: 100%; height: 100%; }

/* ───── Forms ───── */
.form-field { display: flex; flex-direction: column; gap: 14px; }
.form-field label { font-family: var(--font-heading); font-weight: 600; font-size: 17px; color: var(--skin-black); }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
    font-family: var(--font-body);
    font-size: 17px;
    color: var(--skin-black);
    background: var(--skin-white);
    border: 1px solid var(--skin-grey-10);
    border-radius: 8px;
    padding: 18.5px 16px;
    width: 100%;
}
.form-field textarea { min-height: 130px; resize: vertical; font-family: var(--font-body); }
.form-radio-group { display: flex; flex-direction: column; gap: 12px; }
.form-radio { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 17px; color: var(--skin-black); cursor: pointer; }
.form-radio input[type="radio"] {
    appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1px solid var(--skin-red);
    background: var(--skin-white);
    margin: 0;
    flex-shrink: 0;
}
.form-radio input[type="radio"]:checked {
    background: var(--skin-red);
    box-shadow: inset 0 0 0 3px var(--skin-white);
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }

/* ───── Responsive heading scale ───── */

@media (max-width: 1920px) {
    .skin-inner {
        padding: 0 var(--skin-gutter);
    }
}

@media (max-width: 1600px) {
	:root { --skin-gutter: 40px; }
	.skin-inner {
		max-width: 100%;
	}
	.skin-wrapper {
		padding-right: 40px;
		padding-left: 40px;
	}
	
	h1, .h1 { font-size: 48px; line-height: 1.4; }
	h2, .h2 { font-size: 38px; line-height: 1.4; }
	h3, .h3 { font-size: 30px; line-height: 1.4; }
	h4, .h4 { font-size: 20px; line-height: 1.4; }
	h6, .h6 { font-size: 18px; line-height: 1.4; }
	.text-intro { font-size: 18px; line-height: 1.4; }
}

@media (max-width: 1280px) {	
	h1, .h1 { font-size: 40px; line-height: 54px; }
    h2, .h2 { font-size: 36px; line-height: 46px; }
    
	.site-header .skin-inner {
		flex-wrap: wrap;
		padding: 20px 15px;
	}
}

@media (max-width: 1024px) {
    :root { --skin-gutter: 30px; }
    .chevron-accent { display: none; }
}

@media (max-width: 767px) {
     :root { 
		 --skin-gutter: 20px; 
		 --font-size: 16px;
	}
	
    .skin-wrapper {
		padding-right: 20px;
		padding-left: 20px;
	}

    h1, .h1 { font-size: 36px; line-height: 42px; }
    h2, .h2 { font-size: 30px; line-height: 38px; }
    h3, .h3 { font-size: 26px; line-height: 34px; }
    :root { --skin-gutter: 24px; }
    .form-row-2 { grid-template-columns: 1fr; }
	
	.back-top {
		bottom: 100px;
	}

}