/* =========================================================
   UCG INNER-PAGE LAYOUT SYSTEM
   A small set of reusable parts so About / Services / Locations
   / Careers can all be rebuilt from the same vocabulary instead
   of being styled one at a time.

   THE PARTS
     .ucgp            wrapper — required on every page using this
     .ucgp-hero       compact page hero (never full viewport)
     .ucgp-band       section; add --cream / --orange / --deep
     .ucgp-head       eyebrow + h2 left, lede right
     .ucgp-grid       card grid; add --2 / --3 / --4
     .ucgp-card       card surface (dark on navy, white on cream)
     .ucgp-steps      numbered process list
     .ucgp-split      two-column media + copy
     .ucgp-cta        full orange call-to-action band

   Colours and type come from ucg-site.css.
   ========================================================= */

.ucgp{font-family:'Poppins',system-ui,sans-serif;color:#fff;background:var(--ucg-navy);
  font-weight:300;line-height:1.6;overflow-x:clip}
.ucgp *{box-sizing:border-box}
.ucgp img{display:block;max-width:100%}
.ucgp a{text-decoration:none !important}
.ucgp h1,.ucgp h2,.ucgp h3,.ucgp h4{font-weight:600;line-height:1.1;letter-spacing:-.02em;
  margin:0;color:#fff !important}
.ucgp p,.ucgp ul,.ucgp ol{margin:0;padding:0}
.ucgp-wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 32px}

/* ---------- eyebrow ---------- */
.ucgp-eyebrow{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ucg-orange) !important;display:flex;align-items:center;gap:12px}
.ucgp-eyebrow::before{content:"";width:44px;height:2px;background:var(--ucg-orange)}
.ucgp-eyebrow.is-center{justify-content:center}
.ucgp-eyebrow.is-center::after{content:"";width:44px;height:2px;background:var(--ucg-orange)}

/* ---------- hero ---------- */
.ucgp-hero{position:relative;overflow:hidden;padding:clamp(72px,8vw,118px) 0 clamp(64px,7vw,96px);
  background:var(--ucg-navy)}
.ucgp-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.ucgp-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(4,18,47,.95) 0%,rgba(7,28,72,.84) 46%,rgba(249,113,4,.14) 100%)}
.ucgp-hero .ucgp-wrap{position:relative;z-index:2}
.ucgp-hero h1{font-size:clamp(34px,5vw,62px);max-width:18ch;margin:22px 0 18px}
.ucgp-hero .lede{font-size:clamp(16px,1.3vw,19px);color:rgba(255,255,255,.78);max-width:58ch}
.ucgp-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ---------- bands ---------- */
.ucgp-band{position:relative;padding:clamp(64px,7vw,110px) 0;background:var(--ucg-navy)}
.ucgp-band--deep{background:var(--ucg-navy-3)}
.ucgp-band--cream{background:var(--ucg-cream);
  border-top:2px solid var(--ucg-orange);border-bottom:2px solid var(--ucg-orange)}
.ucgp-band--cream h1,.ucgp-band--cream h2,.ucgp-band--cream h3,.ucgp-band--cream h4{color:var(--ucg-navy) !important}
.ucgp-band--cream p,.ucgp-band--cream li{color:rgba(70,45,25,.76)}
.ucgp-band--orange{background:var(--ucg-orange)}
.ucgp-band--orange .ucgp-eyebrow{color:#fff !important}
.ucgp-band--orange .ucgp-eyebrow::before,
.ucgp-band--orange .ucgp-eyebrow::after{background:#fff}
.ucgp-band--orange p{color:rgba(255,255,255,.92)}
/* warm glow to stop the dark bands reading flat */
.ucgp-band--glow::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 88% 6%, rgba(249,113,4,.13) 0%, rgba(249,113,4,0) 60%)}
.ucgp-band > .ucgp-wrap{position:relative;z-index:1}

/* ---------- section head ---------- */
.ucgp-head{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;
  margin-bottom:clamp(38px,4vw,58px)}
.ucgp-head h2{font-size:clamp(28px,3.6vw,50px);margin-top:20px}
.ucgp-head .lede{font-size:clamp(15.5px,1.3vw,18px);color:rgba(255,255,255,.74)}
.ucgp-band--cream .ucgp-head .lede{color:rgba(70,45,25,.74)}
.ucgp-head.is-center{grid-template-columns:1fr;text-align:center;justify-items:center;max-width:760px;margin-inline:auto}

/* ---------- grids + cards ---------- */
.ucgp-grid{display:grid;gap:22px}
.ucgp-grid--2{grid-template-columns:repeat(2,1fr)}
.ucgp-grid--3{grid-template-columns:repeat(3,1fr)}
.ucgp-grid--4{grid-template-columns:repeat(4,1fr)}
.ucgp-card{position:relative;background:var(--ucg-navy-2);border:1px solid var(--ucg-rule);
  border-radius:14px;padding:34px 30px;overflow:hidden;
  transition:.4s cubic-bezier(.2,.7,.3,1)}
.ucgp-card::before{content:"";position:absolute;top:0;left:0;width:56px;height:3px;
  background:var(--ucg-orange);transition:width .45s cubic-bezier(.2,.7,.3,1)}
.ucgp-card:hover{transform:translateY(-6px);border-color:rgba(249,113,4,.55);
  box-shadow:0 26px 54px -26px rgba(0,0,0,.7)}
.ucgp-card:hover::before{width:100%}
.ucgp-card h3{font-size:19px;margin-bottom:11px}
.ucgp-card p{font-size:14.5px;color:rgba(255,255,255,.64)}
.ucgp-band--cream .ucgp-card{background:#fff;border-color:var(--ucg-cream-line,rgba(180,110,50,.16))}
.ucgp-band--cream .ucgp-card p{color:rgba(70,45,25,.72)}
.ucgp-card .idx{position:absolute;top:24px;right:26px;font-size:11px;font-weight:500;
  letter-spacing:.14em;color:rgba(249,113,4,.55)}

/* ---------- numbered steps ---------- */
.ucgp-steps{display:grid;gap:20px;list-style:none}
.ucgp-steps li{display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:start;list-style:none}
.ucgp-steps .n{width:52px;height:52px;border-radius:50%;background:var(--ucg-orange);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600}
.ucgp-steps h3{font-size:18px;margin-bottom:7px}
.ucgp-steps p{font-size:14.5px;color:rgba(255,255,255,.66)}
.ucgp-band--cream .ucgp-steps p{color:rgba(70,45,25,.72)}

/* ---------- split (media + copy) ---------- */
.ucgp-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,72px);align-items:center}
.ucgp-split--flip{grid-template-columns:1.1fr .9fr}
.ucgp-split figure{position:relative;margin:0}
.ucgp-split figure img{width:100%;border-radius:16px;object-fit:cover}
.ucgp-split figure::after{content:"";position:absolute;left:-14px;bottom:-14px;width:104px;height:104px;
  border-left:3px solid var(--ucg-orange);border-bottom:3px solid var(--ucg-orange);pointer-events:none}
.ucgp-split h2{font-size:clamp(26px,3.2vw,42px);margin-bottom:18px}
.ucgp-split p{font-size:15.5px;color:rgba(255,255,255,.72);margin-bottom:16px}
.ucgp-band--cream .ucgp-split p{color:rgba(70,45,25,.76)}

/* ---------- signature block ---------- */
.ucgp-sig{display:flex;align-items:center;gap:16px;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(180,110,50,.22)}
.ucgp-sig .name{font-weight:600;font-size:16px;color:var(--ucg-navy)}
.ucgp-sig .role{font-size:13px;color:rgba(70,45,25,.66)}
.ucgp-sig .mark{width:38px;height:22px;flex:0 0 auto}
.ucgp-sig .mark path{fill:none;stroke:var(--ucg-orange);stroke-width:2.2;stroke-linejoin:miter}

/* ---------- CTA band ---------- */
.ucgp-cta{background:var(--ucg-orange);position:relative;overflow:hidden;padding:clamp(44px,4.6vw,64px) 0}
.ucgp-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 88% 20%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 62%)}
.ucgp-cta .ucgp-wrap{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:space-between;gap:36px;flex-wrap:wrap}
.ucgp-cta h2{font-size:clamp(26px,3.1vw,42px);max-width:18ch;color:#fff !important}
.ucgp-cta .k{font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-bottom:12px}
.ucgp-cta-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.ucgp-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;font-size:13.5px;
  font-weight:500;letter-spacing:.06em;text-transform:uppercase;border:1px solid transparent;
  border-radius:999px;transition:.28s cubic-bezier(.2,.7,.3,1);cursor:pointer;font-family:inherit}
.ucgp-btn--primary{background:var(--ucg-orange);color:#fff !important}
.ucgp-btn--primary:hover{background:var(--ucg-orange-2);transform:translateY(-2px);
  box-shadow:0 14px 34px -12px rgba(249,113,4,.75)}
.ucgp-btn--ghost{border-color:rgba(255,255,255,.34);color:#fff !important}
.ucgp-btn--ghost:hover{border-color:var(--ucg-orange);color:var(--ucg-orange) !important;
  background:rgba(249,113,4,.08);transform:translateY(-2px)}
.ucgp-btn--oncolor{background:#fff;color:var(--ucg-orange) !important;border-color:#fff}
.ucgp-btn--oncolor:hover{background:var(--ucg-navy);color:#fff !important;border-color:var(--ucg-navy);
  transform:translateY(-2px)}
.ucgp-btn--onghost{background:transparent;color:#fff !important;border-color:rgba(255,255,255,.6)}
.ucgp-btn--onghost:hover{background:rgba(255,255,255,.14);border-color:#fff;transform:translateY(-2px)}
.ucgp-btn .arw{transition:transform .28s}
.ucgp-btn:hover .arw{transform:translateX(5px)}

/* ---------- contact detail rows ---------- */
.ucgp-details{display:flex;gap:44px;flex-wrap:wrap;margin-top:32px;padding-top:26px;
  border-top:1px solid var(--ucg-rule)}
.ucgp-details .l{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ucgp-details .v{font-size:17px;font-weight:500;margin-top:6px;color:#fff}
.ucgp-details a:hover{color:var(--ucg-orange) !important}

/* ---------- inline form shell ---------- */
.ucgp-formcard{background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);max-width:820px;margin:0 auto}
.ucgp-formcard iframe{width:100%;min-height:1700px;border:0;display:block}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .ucgp-grid--4{grid-template-columns:repeat(2,1fr)}
  .ucgp-grid--3{grid-template-columns:repeat(2,1fr)}
  .ucgp-split,.ucgp-split--flip{grid-template-columns:1fr;gap:34px}
  .ucgp-head{grid-template-columns:1fr;gap:22px}
}
@media(max-width:760px){
  .ucgp-wrap{padding:0 20px}
  .ucgp-band{padding:56px 0}
  .ucgp-hero{padding:56px 0 48px}
  .ucgp-grid--2,.ucgp-grid--3,.ucgp-grid--4{grid-template-columns:1fr}
  .ucgp-hero-actions .ucgp-btn,.ucgp-cta-actions .ucgp-btn{flex:1 1 100%;justify-content:center}
  .ucgp-cta .ucgp-wrap{flex-direction:column;align-items:flex-start}
  .ucgp-details{gap:26px}
  .ucgp-steps li{grid-template-columns:44px 1fr;gap:16px}
  .ucgp-steps .n{width:44px;height:44px;font-size:14px}
  .ucgp-formcard iframe{min-height:1900px}
}

/* =========================================================
   LINK COLOUR GUARD
   Astra colours links site-wide; inside our own components
   links should inherit the surrounding text colour.
   ========================================================= */
.ucgp a{color:inherit !important}
.ucgp-details a,.ucgp-details .v a{color:#fff !important}
.ucgp-details a:hover{color:var(--ucg-orange) !important}
.ucgp-card h3,.ucgp-card p{color:inherit}
a.ucgp-card{display:block}
a.ucgp-card h3{color:#fff !important}
.ucgp-band--cream a.ucgp-card h3{color:var(--ucg-navy) !important}
.ucgp-btn--primary,.ucgp-btn--primary:hover{color:#fff !important}
.ucgp-btn--oncolor,.ucgp-btn--oncolor:hover{color:var(--ucg-orange) !important}
.ucgp-btn--oncolor:hover{color:#fff !important}
.ucgp-btn--ghost,.ucgp-btn--onghost{color:#fff !important}

/* =========================================================
   FORM SLOT
   The GoHighLevel embed is dropped in here and swapped for
   the compact intake panel by ucg-forms.js, so the form sits
   with Brandon rather than as a full-width wall of fields.
   ========================================================= */
.ucgp-formslot{margin-top:30px}
.ucgp-formslot .ucgf-panel{max-width:none;margin:0}
.ucgp-formslot iframe{width:100%;border:0;min-height:200px}

/* =========================================================
   PANEL INSIDE PAGE
   .ucgp zeroes heading and list margins for its own layout,
   which also flattened the shared form panel. Restore the
   panel's internal spacing when it sits inside a page.
   ========================================================= */
.ucgp .ucgf-panel .ucgf-eyebrow{margin:0 0 10px !important}
.ucgp .ucgf-panel h3{margin:0 0 18px !important;color:#fff !important}
.ucgp .ucgf-trust{margin:0 0 24px !important;padding:0 !important;display:flex;flex-wrap:wrap;gap:10px 22px}
.ucgp .ucgf-trust li{margin:0 !important;color:rgba(255,255,255,.78) !important}
.ucgp .ucgf-panel p{margin:0}
.ucgp .ucgf-meta{color:rgba(255,255,255,.5) !important}
.ucgp .ucgf-btn{color:#fff !important}

/* =========================================================
   HERO HEIGHT
   Inner-page heroes are wayfinding, not a stage. Tighter
   than the first pass so content starts sooner.
   ========================================================= */
.ucgp-hero{padding:clamp(46px,4.6vw,72px) 0 clamp(40px,4vw,58px)}
.ucgp-hero h1{margin:18px 0 14px}
.ucgp-hero-actions{margin-top:26px}
.ucgp-details{margin-top:26px;padding-top:22px}
@media(max-width:760px){.ucgp-hero{padding:40px 0 34px}}

/* =========================================================
   ABOUT EXTRAS
   Logo tiles and the secondary 'book a call' link.
   ========================================================= */
.ucgp-logo{background:#fff;border:1px solid rgba(180,110,50,.16);border-radius:14px;height:clamp(110px,10vw,140px);display:flex;align-items:center;justify-content:center;padding:clamp(18px,2vw,28px);transition:.38s cubic-bezier(.2,.7,.3,1)}
.ucgp-logo:hover{transform:translateY(-5px);border-color:rgba(249,113,4,.45);box-shadow:0 20px 44px -22px rgba(120,60,10,.34)}
.ucgp-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.68;transition:.38s}
.ucgp-logo:hover img{filter:none;opacity:1}
.ucgp-alt{margin-top:18px;font-size:14px;color:rgba(255,255,255,.6) !important;text-align:center}
.ucgp-alt a{color:var(--ucg-orange) !important;font-weight:500}
.ucgp-alt a:hover{text-decoration:underline !important}
@media(max-width:760px){.ucgp-logo{height:96px}}

/* =========================================================
   HEADING ACCENT
   The original About page set one word of each heading in
   orange italic. Kept, because it's a nice piece of the
   existing identity.
   ========================================================= */
.ucgp .ucgp-accent{color:var(--ucg-orange) !important;font-style:italic;font-weight:600}

/* =========================================================
   ORGANIC SPLIT
   Carries over the treatment from the previous About page:
   images masked into a soft organic shape, scattered accent
   dots, and centred copy alongside. Alternates side to side.
   ========================================================= */
.ucgp-split--organic{align-items:center}
.ucgp-split--organic .ucgp-copy{text-align:center;max-width:56ch;margin-inline:auto}
.ucgp-split--organic .ucgp-eyebrow{justify-content:center}
.ucgp-split--organic .ucgp-eyebrow::after{content:"";width:44px;height:2px;background:var(--ucg-orange)}
.ucgp-split--organic h2{margin-bottom:18px}

.ucgp-blob{position:relative;margin:0;padding:26px}
.ucgp-blob img{
  width:100%;
  aspect-ratio:1/.92;
  object-fit:cover;
  border-radius:58% 42% 47% 53% / 46% 52% 48% 54%;
  box-shadow:0 30px 60px -30px rgba(70,40,10,.42);
}
/* the square corner bracket belongs to rectangular figures only —
   it has higher specificity, so cancel it explicitly here */
.ucgp-split .ucgp-blob::after,
.ucgp-split--organic figure::after{content:none !important;display:none !important}
.ucgp-split--organic:nth-of-type(even) .ucgp-blob img{border-radius:44% 56% 58% 42% / 55% 44% 56% 45%}
.ucgp-blob.is-b img{border-radius:47% 53% 40% 60% / 58% 43% 57% 42%}
.ucgp-blob.is-c img{border-radius:60% 40% 55% 45% / 42% 58% 42% 58%}

/* scattered accent dots */
.ucgp-blob .dot{position:absolute;border-radius:50%;display:block;pointer-events:none}
.ucgp-blob .d1{width:15px;height:15px;background:var(--ucg-navy);top:6%;left:14%}
.ucgp-blob .d2{width:10px;height:10px;background:#2FB6A8;top:2%;left:31%}
.ucgp-blob .d3{width:20px;height:20px;background:var(--ucg-orange);bottom:12%;right:7%}
.ucgp-blob .d4{width:12px;height:12px;background:#E2B457;bottom:4%;left:26%}
.ucgp-blob .d5{width:8px;height:8px;background:var(--ucg-navy);top:44%;right:2%}
.ucgp-blob .d6{width:13px;height:13px;background:#2FB6A8;bottom:24%;left:4%}

@media(max-width:1080px){
  .ucgp-split--organic{gap:22px}
  .ucgp-split--organic .ucgp-blob{order:-1;max-width:520px;margin-inline:auto}
}
@media(max-width:760px){
  .ucgp-blob{padding:20px}
  .ucgp-blob .d3{width:16px;height:16px}
  .ucgp-blob .d1{width:12px;height:12px}
}
/* =========================================================
   BLOB SPECIFICITY
   .ucgp-split figure img sets a 16px radius and outranks
   .ucgp-blob img, so the organic shapes have to be forced.
   ========================================================= */
.ucgp-split .ucgp-blob img{border-radius:58% 42% 47% 53% / 46% 52% 48% 54% !important;aspect-ratio:1/.92;object-fit:cover}
.ucgp-split .ucgp-blob.is-b img{border-radius:47% 53% 40% 60% / 58% 43% 57% 42% !important}
.ucgp-split .ucgp-blob.is-c img{border-radius:60% 40% 55% 45% / 42% 58% 42% 58% !important}

/* =========================================================
   ORGANIC HEIGHT
   The blob figures were near-square, which made each of these
   three sections taller than the copy needed. Shorter, wider
   shapes and tighter band padding — same treatment, less scroll.
   ========================================================= */
.ucgp-split .ucgp-blob img,
.ucgp-split--organic .ucgp-blob img{aspect-ratio:1/.6 !important;max-height:330px}
.ucgp-blob{padding:18px;max-width:520px;margin-inline:auto}
.ucgp-split--organic{gap:clamp(26px,3.4vw,54px)}
.ucgp-split--organic .ucgp-copy{max-width:52ch}
.ucgp-split--organic h2{margin-bottom:14px}
.ucgp-split--organic p{margin-bottom:0}

/* tighter bands for the three story sections */
.ucgp-band:has(.ucgp-split--organic){padding:clamp(42px,4.2vw,66px) 0}

/* dots pull in to match the smaller shape */
.ucgp-blob .d1{top:2%;left:12%}
.ucgp-blob .d2{top:-2%;left:30%}
.ucgp-blob .d3{bottom:6%;right:5%}
.ucgp-blob .d4{bottom:0;left:24%}
.ucgp-blob .d5{top:40%;right:1%}
.ucgp-blob .d6{bottom:20%;left:2%}

@media(max-width:1080px){
  .ucgp-split .ucgp-blob img{aspect-ratio:1/.58 !important;max-height:300px}
}
@media(max-width:760px){
  .ucgp-split .ucgp-blob img{aspect-ratio:1/.7 !important;max-height:260px}
  .ucgp-band:has(.ucgp-split--organic){padding:38px 0}
}
/* =========================================================
   BAND EDGES
   The cream bands were bracketed by a 2px orange rule top
   and bottom. With several bands stacked it read as ruled
   lines across the page rather than as an accent, so the
   colour change alone now does the separating.
   ========================================================= */
/* the rule marks the change from dark to light. Between two cream
   bands there is no change, so it only reads as a stray line. */
.ucgp-band--cream + .ucgp-band--cream{border-top:0 !important}
.ucgp-band--cream:has(+ .ucgp-band--cream){border-bottom:0 !important}