/* Content pages */

.phero { position: relative; color: #fff; background: radial-gradient(1000px 520px at 82% -10%, #2f6cc0 0%, transparent 62%), linear-gradient(170deg, var(--blue-deep), var(--navy) 62%, var(--ink)); overflow: hidden; }
.phero__in { padding-block: clamp(44px, 6vw, 84px) clamp(76px, 10vw, 130px); }
.phero .eyebrow { color: var(--sun); margin-bottom: 14px; }
.phero h1 { max-width: 34ch; font-size: clamp(40px, 5.8vw, 84px); }
.phero__lede { max-width: 56ch; margin-top: 16px; font-size: clamp(17px, 1.4vw, 20px); color: rgba(255, 255, 255, .84); }
.phero__sweep { position: absolute; left: 0; right: 0; bottom: -1px; }

/* Services */
.srows { display: grid; gap: clamp(18px, 2.4vw, 30px); padding-block: 14px clamp(40px, 5vw, 70px); }
.srow { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 380px; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-sm); }
.srow:nth-child(even) .srow__img { order: 2; }
.srow__img { position: relative; min-height: 260px; background: var(--cream-2); }
.srow__img img, .srow__img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.srow:hover .srow__img img, .srow:hover .srow__img video { transform: scale(1.04); }
.srow__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: clamp(24px, 3.4vw, 50px); }
.srow__body h2 { font-size: clamp(28px, 3.2vw, 46px); }
.srow__body .eyebrow { opacity: .75; }
.srow__body--blue { background: var(--blue); color: #fff; }
.srow__body--sun { background: var(--sun); color: var(--ink); }
.srow__body--coral { background: var(--coral); color: var(--ink); }
.srow__body--plum { background: var(--plum); color: #fff; }
.srow__body--leaf { background: var(--leaf); color: var(--ink); }
.srow__body--sky { background: var(--sky); color: var(--ink); }
.srow__body--tangerine { background: var(--tangerine); color: var(--ink); }

/* Call to action */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-block: clamp(30px, 4vw, 54px) clamp(50px, 6vw, 84px); }
.cta > div { flex: 1 1 320px; }
.cta h2 { font-size: clamp(28px, 3.4vw, 46px); color: var(--navy); margin-bottom: 6px; }
.cta p { color: var(--muted); font-size: 18px; }

/* Team */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; padding-block: 14px 20px; }
.person { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: var(--cream-2); box-shadow: var(--shadow-sm); aspect-ratio: 4 / 5; }
.person img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .8s var(--ease); }
.person:hover img { transform: scale(1.05); }
.person figcaption { position: absolute; inset: auto 0 0; display: grid; padding: 46px 16px 14px; color: #fff; background: linear-gradient(transparent, rgba(5, 31, 71, .88)); }
.person b { font: 800 24px/1.1 var(--font-display); }

/* Videos */
.vids { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; padding-block: 14px 20px; }
.vid { margin: 0; border-radius: 20px; overflow: hidden; background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.vid video { display: block; width: 100%; aspect-ratio: 16 / 10; background: #000; }
.vid figcaption { padding: 12px 16px 14px; font: 800 18px/1.2 var(--font-display); }

/* FAQ */
.faq { max-width: 880px; padding-block: 10px 10px; }
.faq__search input { width: 100%; height: 56px; padding: 0 18px; margin-bottom: 14px; border: 0; border-radius: 16px; background: #fff; box-shadow: var(--shadow); font-size: 17px; }
.qa { margin-bottom: 10px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; font: 800 clamp(18px, 1.6vw, 21px)/1.25 var(--font-display); color: var(--navy); cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary svg { flex: none; width: 19px; height: 19px; color: var(--muted); transition: transform .2s; }
.qa[open] summary svg { transform: rotate(180deg); }
.qa > div { display: grid; gap: 10px; padding: 0 18px 18px; }
.faq__none { padding: 20px 4px; color: var(--muted); }

/* About */
.about { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(22px, 4vw, 60px); align-items: start; padding-block: 14px clamp(36px, 5vw, 60px); }
.about__copy { display: grid; gap: 14px; justify-items: start; }
.about__lead { font: 800 clamp(23px, 2.2vw, 31px)/1.2 var(--font-display); color: var(--navy); }
.about__vid video { aspect-ratio: 1; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-bottom: 24px; }
.pillar { padding: 26px; border-radius: 22px; }
.pillar h2 { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 10px; }
.pillar ul { margin: 0; padding-left: 18px; }
.pillar--blue { background: var(--blue); color: #fff; }
.pillar--plum { background: var(--plum); color: #fff; }
.pillar--sun { background: var(--sun); color: var(--ink); }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; padding-block: 16px clamp(50px, 6vw, 80px); }
.legal h2 { font-size: 24px; color: var(--navy); margin-bottom: 6px; }
address { font-style: normal; }

/* Forms */
.contact { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: start; padding-block: 14px clamp(50px, 6vw, 84px); }
.form { display: grid; gap: 14px; padding: clamp(18px, 2.4vw, 30px); border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); }
.field { display: grid; gap: 5px; font-weight: 600; color: var(--navy); }
.field input, .field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); font-weight: 400; color: var(--text); resize: vertical; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 92, 170, .16); }
.check { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.check input { width: 19px; height: 19px; accent-color: var(--blue); }
.form__note { color: var(--muted); font-size: 13.5px; }
.form .btn { justify-self: start; }
.form__status { padding: 10px 14px; border-radius: 12px; background: var(--cream); color: var(--navy); font-weight: 600; }
.enq { padding: 16px; border-radius: 16px; background: linear-gradient(150deg, var(--blue), var(--blue-deep)); color: #fff; }
.enq h2 { font-size: 21px; margin-bottom: 10px; overflow-wrap: anywhere; }
.enq dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; margin: 0; }
.enq dt { font-size: 13px; opacity: .78; }
.enq dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.contact__side { display: grid; gap: 10px; }
.channel { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .2s var(--ease); }
.channel:hover { transform: translateY(-2px); }
.channel svg { flex: none; width: 26px; height: 26px; color: var(--blue); }
.channel b { display: block; color: var(--navy); }
.channel span { color: var(--muted); font-size: 14.5px; }
.legalbox { display: grid; gap: 8px; padding: 18px; border-radius: 16px; background: var(--cream-2); }
.legalbox h3 { font-size: 19px; color: var(--navy); }

@media (max-width: 860px) {
  .srow, .about, .contact { grid-template-columns: minmax(0, 1fr); }
  .srow:nth-child(even) .srow__img { order: 0; }
  .pillars { grid-template-columns: 1fr; }
}

/* Contact Form 7 (live contact and enquiry pages): same look as the preview forms */
.wpcf7-form { display: grid; gap: 14px; padding: clamp(18px, 2.4vw, 30px); border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); }
.wpcf7-form p { margin: 0; }
.wpcf7-form label { display: block; font-weight: 600; color: var(--navy); }
.wpcf7-form-control-wrap { display: block; margin-top: 5px; }
.wpcf7-form input:not([type="checkbox"]):not([type="submit"]):not([type="hidden"]), .wpcf7-form textarea, .wpcf7-form select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); font-weight: 400; color: var(--text); }
.wpcf7-form textarea { resize: vertical; min-height: 140px; }
.wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 92, 170, .16); }
.wpcf7-list-item { display: block; margin: 0; }
.wpcf7-list-item label { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.wpcf7-list-item input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--blue); }
.wpcf7-submit { justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--sun); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(255, 193, 7, .8); }
.wpcf7-submit:hover { background: #ffcd2e; }
.wpcf7-not-valid-tip { display: block; margin-top: 5px; color: #b00020; font-size: 13.5px; font-weight: 600; }
.wpcf7-response-output { margin: 0; padding: 10px 14px; border: 0 !important; border-radius: 12px; background: var(--cream); color: var(--navy); font-weight: 600; }