/* ================================================
 GLOBAL TOKENS
 ================================================ */
:root {
 --ink: #4C4744;
 --muted: #CCC2BC;
 --line: #E2DDD9;
 --brand: #1F2A32;

 --bg-form: #fff; /* form card background */
 --bg-intro: #E2DDD9; /* desktop intro/surround */
 --neutral-mobile: #F5F4F2; /* mobile neutral background */

 --gap-md: 30px;
 --gap-sm: 10px;
 --maxw: 720px; /* constrained to design width */
 --field-h: 56px;

 font-family: "Jost", sans-serif;
 color: var(--ink);
}

/* ================================================
 HERO
 ================================================ */
.trade-form__hero img {
 width:100%;
 height: auto;
 display: block;
}
@media (min-width:769px) {
 .only-mobile { display: none !important; }
 .only-desktop { display: block !important; }
}
@media (max-width:768px) {
 .only-mobile { display: block !important; }
 .only-desktop { display: none !important; }
}
@media (min-width:1024px) {
 /* ensure mobile hero is hidden on large viewports */
 .only-mobile { display: none !important; }
 .only-desktop { display: block !important; }
}

/* ================================================
 INTRO SECTION (full-width coloured background)
 ================================================ */
.trade-intro {
 background: var(--bg-intro);
 width:100%;
 padding: 72px 20px 64px; /* larger top & comfortable bottom */
 display: flex;
 justify-content: center;
 box-sizing: border-box;
}
.trade-intro__container {
 width:100%;
 max-width:720px; /* narrower column for intro copy */
 text-align: center;
 box-sizing: border-box;
 padding: 0 12px;
}
.trade-intro__title {
 margin: 0 0 20px 0;
 font-family: "ACaslonPro", "Libre Caslon Text", Georgia, serif;
 font-weight:400;
 font-size:40px; /* larger display */
 line-height:48px;
 color: var(--brand);
}
.trade-intro__lead {
 margin:10px auto;
 line-height:1.8;
 max-width:720px;
 color: #6b6360; /* softer ink */
 font-size:15px;
}

/* ================================================
 FORM SECTION (white container inside neutral bg)
 ================================================ */
.trade-form {
 width:100%;
 background: var(--bg-form); /* same surround as intro */
 display: flex;
 justify-content: center;
 padding: 20px;
 box-sizing: border-box;
}
.trade-form__wrap {
 background: var(--bg-form);
 width:100%;
 max-width: var(--maxw);
 border-radius:8px;
 padding: 60px 40px;
 display: flex;
 flex-direction: column;
 gap: var(--gap-md);
 box-sizing: border-box;
 margin-top:24px; /* breathing room beneath intro */
 margin-left: auto;
 margin-right: auto;
}

/* Ensure rows inherit wrapper width */
.trade-form__wrap .tf-row--2 {
 width:100%;
}

/* ================================================
 FORM GRID + FIELD BASE
 ================================================ */
.tf-row {
 display: grid;
 grid-template-columns:1fr;
 row-gap: var(--gap-md);
}
.tf-row--2 {
 display: grid;
 grid-template-columns: repeat(2, minmax(0,1fr)); /* explicit two columns */
 column-gap: var(--gap-md);
 row-gap: var(--gap-md);
}
@media (max-width:900px) {
 .tf-row--2 { grid-template-columns:1fr; column-gap:0; }
}
.tf-field {
 display: flex;
 flex-direction: column;
 gap: var(--gap-sm);
}
.tf-field--narrow { max-width:380px; }

.tf-label {
 font-size:16px;
 line-height:26px;
 color: var(--ink);
}

.tf-input,
.tf-select,
.tf-textarea {
 width:100%;
 height: var(--field-h);
 border:1px solid var(--line);
 border-radius:4px;
 padding: 14px;
 font: inherit;
 color: var(--ink);
 background: #fff;
 min-width:0;
 box-sizing: border-box;
}
.tf-textarea {
 height: auto;
 min-height:120px;
 padding: 12px 14px;
 resize: vertical;
}
.tf-input::placeholder,
.tf-textarea::placeholder {
 color: var(--muted);
}

/* SELECT CHEVRON */
.tf-select-wrap { position: relative; }
.tf-select { appearance: none; padding-right:40px; }
.tf-select-wrap::after {
 content: "";
 position: absolute;
 right:14px;
 top:50%;
 width:12px; height:12px;
 border-right:2px solid var(--muted);
 border-bottom:2px solid var(--muted);
 transform: translateY(-50%) rotate(45deg);
 pointer-events: none;
}

/* FOCUS */
.tf-input:focus,
.tf-select:focus,
.tf-textarea:focus {
 outline:2px solid rgba(31,42,50,0.3);
 border-color: var(--brand);
}

/* ================================================
 CONSENT SECTION
 ================================================ */
.tf-helper {
 margin:0;
 padding:0;
 font-size:16px;
 color: var(--ink);
 line-height:26px;
}
.tf-consent {
 display: flex;
 align-items: flex-start;
 gap:12px;
 margin:0;
 padding:0;
}

.tf-checkbox {
 appearance: none;
 width:24px;
 height:24px;
 border:1.5px solid var(--brand);
 border-radius:6px;
 display: grid;
 place-items: center;
 cursor: pointer;
}
.tf-checkbox:checked { background: var(--brand); }
.tf-checkbox:checked::after {
 content: "";
 width:12px;
 height:8px;
 border-right:2px solid #fff;
 border-bottom:2px solid #fff;
 transform: rotate(45deg);
}

/* ================================================
 LINKS + ACTIONS
 ================================================ */
.tf-link {
 color: inherit;
 text-decoration: underline;
 text-underline-offset:2px;
}
.tf-actions {
 display: flex;
 justify-content: center;
 margin-top:40px; /* more space above button */
 margin-bottom:0;
}
.tf-btn {
 display: flex;
 padding: 16px 20px;
 align-items: center;
 gap:10px;
 border-radius:30px;
 background: #1F2A32;
 color: #fff;
 border: none;
 font-size:16px;
 font-weight:600;
 cursor: pointer;
 transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.tf-btn:hover {
 transform: translateY(-2px);
}
.tf-btn:focus {
 outline:3px solid rgba(31,42,50,0.12);
 outline-offset:4px;
}

/* FINAL CLEANUP */
.trade-form__wrap > *:last-child {
 margin-bottom:0 !important;
 padding-bottom:0 !important;
}
.tf-helper:last-child { margin-bottom:0; }

/* ================================================
 MOBILE (≤480px) — MATCH FIGMA MOBILE SPEC
 ================================================ */
@media (max-width:480px) {
 :root {
 --mobile-maxw:351px;
 }

 /* HERO: use the mobile image with a fixed height and cover */
 .trade-form__hero img.only-mobile {
 display:block !important;
 width:100%;
 height:220px; /* visual height matching design */
 object-fit: cover;
 }
 .trade-form__hero img.only-desktop { display:none !important; }

 /* INTRO (neutral background) */
 .trade-intro {
 background: #ffffff;
 padding: 30px 20px 60px;
 }
 .trade-intro__container {
 max-width: var(--mobile-maxw);
 box-sizing: border-box;
 margin:0 auto;
 padding:0;
 }
 .trade-intro__title {
 font-family: "ACaslonPro", "Libre Caslon Text", Georgia, serif;
 font-weight:400;
 font-size:40px;
 line-height:44px;
 letter-spacing:0.8px;
 margin: 0 0 10px 0;
 text-align: center;
 }
 .trade-intro__lead {
 font-size:16px;
 line-height:26px;
 letter-spacing:0.64px;
 max-width:331px;
 margin:0 auto;
 text-align: center;
 }

 /* FORM (neutral surround + white card) */
 .trade-form {
 background: var(--neutral-mobile);
 padding: 30px 20px 60px;
 box-sizing: border-box;
 }
 .trade-form__wrap {
 background: var(--bg-form);
 max-width: var(--mobile-maxw);
 border-radius:8px;
 padding: 30px 20px;
 gap:30px;
 margin:0 auto;
 box-sizing: border-box;
 }

 /* Single column fields */
 .tf-row--2 {
 grid-template-columns:1fr !important;
 column-gap:0 !important;
 row-gap:30px;
 }

 /* Input height */
 .tf-input, .tf-select {
 height:55px;
 }

 /* Typography scaling */
 .tf-label,
 .tf-helper,
 .tf-link,
 .tf-consent span {
 font-size:16px;
 line-height:26px;
 letter-spacing:0.64px;
 }

 /* Postcode full width */
 .tf-field--narrow { max-width: none; }

 /* Checkbox inline spacing and size */
 .tf-consent { gap:10px; align-items: flex-start; }
 .tf-checkbox { width:20px; height:20px; }

 /* Submit button: centered, full-width-ish on mobile */
 .tf-actions { margin-top:20px; }
 .tf-btn {
 display: block;
 width:100%;
 max-width:260px;
 margin:12px auto 0;
 padding:12px 18px;
 font-size:15px;
 border-radius:30px;
 }

 /* Footer content below form (image + key benefits) should sit flush to edges */
 .trade-form + .key-benefits, .trade-form + img { width:100%; }
}

/* ================================================
 ANTI-HORIZONTAL-SCROLL FIXES
 ================================================ */
html, body {
 overflow-x: hidden;
}

.trade-intro,
.trade-form,
.trade-intro__container,
.trade-form__wrap {
 box-sizing: border-box;
 overflow-wrap: anywhere;
 word-break: break-word;
}

/* Grids and inputs shrink correctly */
.tf-row--2 > .tf-field,
.tf-input,
.tf-select,
.tf-textarea {
 min-width:0;
}

/* Media never overflow */
img, picture, video, canvas {
 max-width:100%;
 height: auto;
 display: block;
}

/* Desktop enforcement: ensure two-column rows inside the form wrapper */
@media (min-width:1024px) {
 .trade-form__wrap .tf-row--2 {
 display: grid !important;
 grid-template-columns: repeat(2, minmax(0,1fr)) !important;
 column-gap: var(--gap-md) !important;
 row-gap: var(--gap-md) !important;
 }
}