/* Home page (general/Retail.aspx) only.
   Colour tokens, .hm2-wrap, .hm2-btnrow, .hm2-btn and .hm2-eyebrow come from
   TheSourceTheme.css. The footer rules live in MasterRetail.css. */

/* Hero */
.hm2-hero{background:var(--primary);position:relative;overflow:hidden}
.hm2-hatch{position:absolute;inset:0;background:linear-gradient(135deg,transparent 49%,rgba(244,241,235,0.03) 49%,rgba(244,241,235,0.03) 51%,transparent 51%),linear-gradient(45deg,transparent 49%,rgba(244,241,235,0.03) 49%,rgba(244,241,235,0.03) 51%,transparent 51%);background-size:28px 28px}
.hm2-hero-in{position:relative;max-width:1280px;margin:0 auto;padding:6.5rem 5% 6rem}
.hm2-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:800;color:#fff;line-height:1.08;letter-spacing:-0.03em;margin:0 0 2rem;text-wrap:pretty}
.hm2-hero h1 em{font-style:normal;color:var(--accent);}
.hm2-sub{font-size:1.05rem;color:rgba(255,255,255,0.78);line-height:1.6;max-width:560px;margin:0 0 2.4rem}

/* Sections */
.hm2-sec{padding:5rem 5%}
.hm2-h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;letter-spacing:-0.02em;line-height:1.15;color:var(--primary);margin:0 0 0.85rem}
.hm2-lede{font-size:1rem;line-height:1.7;margin:0;max-width:640px}
.hm2-lede.dim{color:rgba(255,255,255,0.65)}

/* What we do */
.hm2-index{display:grid;grid-template-columns:1fr 1fr;gap:0 4rem;margin-top:2.5rem}
.hm2-row{display:flex;flex-direction:column;padding:1.75rem 0 1.5rem;border-top:1px solid var(--border);text-decoration:none;color:inherit}
.hm2-row:hover h3{color:var(--accent)}
/* Bootstrap's a:hover adds an underline and its own colour, which the design
   bundle never had to contend with. Hold the row to the design: no underline,
   text keeps its own colours, and only the h3 accent change above remains. */
.hm2-index a.hm2-row,
.hm2-index a.hm2-row:hover{text-decoration:none;color:inherit}
.hm2-row h3{font-size:1.35rem;font-weight:700;letter-spacing:-0.015em;color:var(--primary);margin:0 0 0.6rem;transition:color .15s;display:flex;align-items:center;gap:0.7rem;flex-wrap:wrap}
.hm2-row p{font-size:0.875rem;color:var(--slate);line-height:1.65;margin:0;flex:1}
.hm2-more{align-self:flex-end;margin-top:0.9rem;font-size:0.85rem;font-weight:600;color:var(--accent)}
.hm2-badge{font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;background:var(--accent);color:#fff;padding:0.3em 0.7em;border-radius:2px}

/* Why The Source */
.hm2-navy{background:var(--primary)}
.hm2-navy .hm2-h2{color:#fff}
.hm2-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;margin-top:3rem}
.hm2-n{font-size:0.72rem;font-weight:700;letter-spacing:0.12em;color:var(--accent);margin-bottom:0.9rem;font-variant-numeric:tabular-nums}
.hm2-grid4 h3{font-size:1rem;font-weight:600;color:#fff;margin:0 0 0.6rem;line-height:1.35;letter-spacing:-0.005em}
.hm2-grid4 p{font-size:0.85rem;color:rgba(255,255,255,0.55);line-height:1.7;margin:0}

/* How it works */
.hm2-steps h3{color:var(--primary);font-size:1.05rem;font-weight:700}
.hm2-steps p{color:var(--slate);font-size:0.875rem}
.hm2-stepn{font-size:2.4rem;font-weight:800;color:var(--accent);opacity:0.3;line-height:1;letter-spacing:-0.02em;margin-bottom:1rem;font-variant-numeric:tabular-nums}

/* Got a brief band */
.hm2-brief{padding-top:1rem;padding-bottom:4rem}
.hm2-brief-in{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center;border-top:1px solid var(--border);padding-top:4rem}
.hm2-brief .hm2-lede a{color:var(--accent);text-decoration:none;font-weight:500}

/* Enquiry section and form */
.hm2-form-sec{background:#EFEAE0}
.hm2-form-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:4rem;align-items:start}
.hm2-form-grid .hm2-lede a{color:var(--accent);font-weight:500}
/* The design leaves these links to the browser's default underline, which
   bootstrap strips. Put it back. Only this group: the design deliberately sets
   text-decoration:none on the brief band link, so that one is left alone.
   Placed after the rule above because it matches its specificity exactly, so
   source order decides. */
.hm2-form-grid .hm2-lede a{text-decoration:underline}
.hm2-form{background:#fff;border:1px solid var(--border);border-radius:4px;padding:1.75rem}
.hm2-form label{display:block;font-size:0.8rem;font-weight:600;color:var(--primary);margin-bottom:1rem}
.hm2-form label em{color:var(--accent);font-style:normal}
.hm2-form label .opt{color:#9aa0a8;font-weight:400}
.hm2-form .fld{margin:0.4rem 0 0}
.hm2-2col{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.hm2-form-foot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-top:0.4rem}
.hm2-privacy{font-size:0.75rem;color:#9aa0a8;line-height:1.5;max-width:280px}

/* Form fields */
.fld{display:block;width:100%;border:1px solid var(--border);border-radius:2px;padding:9px 10px;font:inherit;font-size:14px;margin-bottom:10px;background:#fff;color:var(--primary)}
.fld::placeholder{color:#9aa0a8}
.fld:focus{outline:none;border-color:var(--accent)}
textarea.fld{resize:vertical}

/* Responsive */
@media (max-width:1024px){.hm2-grid4{grid-template-columns:1fr 1fr}.hm2-form-grid{grid-template-columns:1fr;gap:2.5rem}.hm2-brief-in{grid-template-columns:1fr}}
@media (max-width:720px){.hm2-index{grid-template-columns:1fr}.hm2-grid4{grid-template-columns:1fr}.hm2-2col{grid-template-columns:1fr}}