/* =====================================================================
   DIGITAL YOU CIC — About page (page id 11) stylesheet
   Scoped to .elementor-11. Ports the homepage component system
   (dycic.css / .elementor-10) and adds About-specific patterns:
   belief band, values cards, team splits, monogram placeholders.
   Author: lukeduff.co.uk
   ===================================================================== */

/* ---- inherit brand tokens (also defined globally on :root by dycic.css) ---- */
:root{
  --blue:#144e8c; --blue-deep:#144e8c; --blue-deeper:#103f73;
  --turquoise:#16becf; --turq-deep:#0e93a1; --heather:#7961aa;
  --sand:#cec19f; --sand-25:#f3efe7; --mist:#f4f7fb;
  --ink:#144e8c; --ink-soft:#37689d; --radius:20px;
}

/* ---- Elementor taming: we control spacing via the rules below ---- */
.elementor-11 .elementor-widget{margin-block-end:0!important}
.elementor-11 .e-con,.elementor-11 .e-con-inner{--padding-block-start:0px;--padding-block-end:0px;--padding-inline-start:0px;--padding-inline-end:0px}
.elementor-11 .e-con-inner{max-width:none;width:100%}
.elementor-11 p{font-size:17px;line-height:1.65}
.elementor-11{font-family:"Source Sans 3",sans-serif;color:var(--ink)}
.elementor-11 h1,.elementor-11 h2,.elementor-11 h3,.elementor-11 h4{font-family:"Source Sans 3",sans-serif;font-weight:700;line-height:1.12;color:var(--blue)}
.elementor-11 h1,.elementor-11 h2{text-wrap:balance}
.elementor-11 img{max-width:100%;display:block;height:auto}

.elementor-11 .wrap{max-width:1160px;margin:0 auto;padding:0 24px;width:100%}

/* ---- buttons ---- */
.elementor-11 .btn,.elementor-11 a.btn,.elementor-11 .btn .elementor-button{display:inline-block;background:var(--turquoise);color:var(--blue-deep);text-decoration:none;font-weight:700;font-family:"Source Sans 3",sans-serif;padding:14px 30px;border-radius:999px;transition:transform .15s,box-shadow .2s;border:none;cursor:pointer;font-size:16px;line-height:1.2}
.elementor-11 .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(22,190,207,.4)}
.elementor-11 .btn.white{background:#fff;color:var(--blue)}
.elementor-11 .btn.outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
/* variants must target the inner Elementor <a>, not just the wrapper */
.elementor-11 .btn.white .elementor-button{background:#fff;color:var(--blue);box-shadow:none}
.elementor-11 .btn.outline .elementor-button{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.elementor-11 .btn.outline .elementor-button:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px #fff}
.elementor-11 .btn.blue .elementor-button{background:var(--blue);color:#fff}
.elementor-11 .btn.heather .elementor-button{background:var(--heather);color:#fff}
.elementor-11 .btn.outline:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 2px #fff}
.elementor-11 .btn.blue{background:var(--blue);color:#fff}
.elementor-11 .btn.heather{background:var(--heather);color:#fff}
.elementor-11 .elementor-button-wrapper{line-height:1}

/* ---- eyebrow ---- */
.elementor-11 .eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--heather);margin-bottom:12px}
.elementor-11 .eyebrow.light{color:var(--turquoise);text-align:center}

/* ====================== HERO ====================== */
.elementor-11 .hero{background:var(--blue);color:#fff;position:relative;overflow:hidden}
.elementor-11 .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(125% 95% at 72% 6%,#1c63ad 0%,#144e8c 56%);z-index:0}
.elementor-11 .hero::after{content:"";position:absolute;inset:auto 0 -2px 0;height:90px;background:#fff;border-radius:100% 100% 0 0 / 90px 90px 0 0;z-index:2}
.elementor-11 .hero>.e-con-inner,.elementor-11 .hero .wrap{position:relative;z-index:3;padding:110px 24px 190px;max-width:1000px;text-align:center;margin:0 auto}
.elementor-11 .hero h1{color:#fff;font-size:clamp(48px,6.6vw,84px);line-height:1.04;margin-bottom:26px;letter-spacing:-.02em}
.elementor-11 .hero h1 .hl{color:var(--turquoise);white-space:nowrap}
.elementor-11 .hero p.lead,.elementor-11 .hero .lead p{font-size:clamp(18px,2vw,21.5px);color:#fff;max-width:62ch;margin:0 auto 38px}
.elementor-11 .hero .cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.elementor-11 .hero .pill-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.elementor-11 .hero .pill{border:1.5px solid rgba(255,255,255,.45);color:#fff;border-radius:999px;padding:8px 18px;font-size:14px;font-weight:600;letter-spacing:.02em}

/* ====================== OUR STORY (mission split) ====================== */
.elementor-11 .mission{padding:96px 0}
.elementor-11 .mission>.e-con-inner,.elementor-11 .mission .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;max-width:1160px;margin:0 auto;padding:0 24px}
.elementor-11 .mission h2{font-size:clamp(32px,4vw,48px);margin-bottom:22px}
.elementor-11 .mission h2 .u{box-shadow:inset 0 -14px 0 var(--turquoise)}
.elementor-11 .mission p{color:var(--ink-soft);margin-bottom:15px}
.elementor-11 .mission .solo{font-weight:700;font-size:20px;color:var(--heather);margin-top:6px}

/* visual card (shared by Our Story + Team) */
.elementor-11 .m-visual{position:relative}
.elementor-11 .m-visual .ph{border-radius:28px;overflow:hidden;box-shadow:0 24px 50px rgba(13,56,102,.22);aspect-ratio:4/4.4}
.elementor-11 .m-visual .ph img{width:100%;height:100%;object-fit:cover}
.elementor-11 .m-visual .badge{margin-top:18px;background:var(--blue);color:#fff;border-radius:16px;padding:18px 24px;box-shadow:0 14px 30px rgba(13,56,102,.18);display:flex;flex-direction:column;gap:3px}
.elementor-11 .m-visual .badge strong{display:block;color:var(--turquoise);font-size:17px}
.elementor-11 .m-visual .badge span{font-size:14px;color:#fff}
.elementor-11 .m-visual .burst{position:absolute;top:-34px;right:0;width:110px;transform:rotate(20deg);z-index:2}

/* monogram placeholder (founder portrait stand-in) */
.elementor-11 .ph.mono{background-color:var(--blue);display:flex;align-items:center;justify-content:center;position:relative}
.elementor-11 .ph.mono::before{content:"";position:absolute;inset:0;background-color:var(--heather);opacity:.55;clip-path:polygon(100% 0,100% 100%,30% 100%);pointer-events:none}
.elementor-11 .ph.mono::after{content:"";position:absolute;inset:0;background-color:rgba(22,190,207,.22);opacity:1;clip-path:circle(38% at 82% 12%);pointer-events:none}
.elementor-11 .ph.mono .mono-initials,.elementor-11 .ph.mono h3{color:#fff;font-size:clamp(72px,12vw,128px);font-weight:700;letter-spacing:.04em;line-height:1;margin:0;position:relative;z-index:2;text-align:center}

/* ====================== WHAT WE BELIEVE ====================== */
.elementor-11 .believe{background:var(--mist);padding:88px 0;border-top:1px solid #eef1f6;border-bottom:1px solid #eef1f6}
.elementor-11 .believe-inner{max-width:760px;margin:0 auto;padding:0 24px;text-align:center}
.elementor-11 .believe .eyebrow{color:var(--heather);text-align:center}
.elementor-11 .believe h2{font-size:clamp(30px,3.6vw,44px);margin-bottom:30px}
.elementor-11 .believe h2 em{font-style:normal;color:var(--turq-deep)}
.elementor-11 .believe .creed{font-size:clamp(19px,2.2vw,23px);line-height:1.5;color:var(--blue);font-weight:600;margin-bottom:14px}
.elementor-11 .believe .creed strong{color:var(--turq-deep);font-weight:700}
.elementor-11 .believe .creed-close{font-size:17px;color:var(--ink-soft);font-weight:400;max-width:60ch;margin:18px auto 0}

/* ====================== OUR VALUES (services dark band) ====================== */
.elementor-11 .services{background:var(--blue-deep);position:relative;padding:96px 0 104px;overflow:hidden;border-top:1px solid rgba(255,255,255,.18)}
.elementor-11 .services h2{color:#fff;font-size:clamp(32px,3.8vw,46px);text-align:center;margin-bottom:12px}
.elementor-11 .services h2 em{font-style:normal;color:var(--turquoise)}
.elementor-11 .services .sub{text-align:center;color:#d4e4f4;max-width:60ch;margin:0 auto 54px}
.elementor-11 .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.elementor-11 .svc{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.40);border-radius:var(--radius);padding:34px 30px;box-shadow:0 14px 30px rgba(0,0,0,.22);transition:background .25s,transform .25s}
.elementor-11 .svc:hover{background:rgba(255,255,255,.18);transform:translateY(-4px)}
.elementor-11 .svc .num{font-weight:700;font-size:19px;letter-spacing:.1em;margin-bottom:14px;display:inline-block;padding:4px 12px;border-radius:999px}
.elementor-11 .n1{background:var(--turquoise);color:var(--blue-deep)}
.elementor-11 .n2{background:var(--heather);color:#fff}
.elementor-11 .n3{background:#d3eff3;color:var(--blue-deep)}
.elementor-11 .n4{background:var(--turquoise);color:var(--blue-deep)}
.elementor-11 .n5{background:var(--heather);color:#fff}
.elementor-11 .n6{background:#fff;color:var(--blue-deep)}
.elementor-11 .svc h3{color:#fff;font-size:20px;margin-bottom:8px}
.elementor-11 .svc .vtag{color:var(--turquoise);font-weight:700;font-size:14.5px;font-style:italic;margin-bottom:10px}
.elementor-11 .svc p{color:#fff;font-size:15px}

/* ====================== MEET THE TEAM ====================== */
.elementor-11 .team{padding:96px 0}
.elementor-11 .team-head{text-align:center;max-width:62ch;margin:0 auto 56px;padding:0 24px}
.elementor-11 .team-head .eyebrow{text-align:center}
.elementor-11 .team-head h2{font-size:clamp(30px,3.6vw,44px);margin-bottom:14px}
.elementor-11 .team-head h2 em{font-style:normal;color:var(--heather)}
.elementor-11 .team-head p{color:var(--ink-soft)}
.elementor-11 .team-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1160px;margin:0 auto 36px;padding:0 24px}
.elementor-11 .team-row:last-child{margin-bottom:0}
.elementor-11 .team-row.rev .m-visual{order:-1}
.elementor-11 .team-row .role{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--turq-deep);margin-bottom:6px;display:block}
.elementor-11 .team-row h3{font-size:30px;margin-bottom:10px}
.elementor-11 .team-row p{color:var(--ink-soft);margin-bottom:14px;font-size:16px}
.elementor-11 .team-row .m-visual .ph{aspect-ratio:4/4.2}

/* ====================== CLOSING CTA (mid band) ====================== */
.elementor-11 .midband{background:#fff;padding:72px 0;border-top:1px solid rgba(20,78,140,.08)}
.elementor-11 .midband-inner{text-align:center;max-width:760px;margin:0 auto;padding:0 24px}
.elementor-11 .midband h2{color:var(--blue-deep);font-size:clamp(28px,3.2vw,40px);margin-bottom:12px}
.elementor-11 .midband h2 .u{box-shadow:inset 0 -12px 0 var(--turquoise)}
.elementor-11 .midband p{color:var(--ink);margin-bottom:26px;font-size:18px;font-weight:600}
.elementor-11 .midband .cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ===== fix: inline widgets inside flex rows (pills, CTAs) ===== */
.elementor-11 .pill-row .elementor-widget,
.elementor-11 .cta-row .elementor-widget{width:auto;flex:0 0 auto;max-width:none}
.elementor-11 .pill-row,.elementor-11 .cta-row{align-items:center}

/* ===== fix: visual photo fills its rounded card ===== */
.elementor-11 .m-visual .ph{display:flex}
.elementor-11 .m-visual .ph .elementor-widget-image,
.elementor-11 .m-visual .ph .elementor-widget-image .elementor-widget-container,
.elementor-11 .m-visual .ph figure{width:100%;height:100%;margin:0}
.elementor-11 .m-visual .ph img{width:100%;height:100%;object-fit:cover}

/* ===== fix: Elementor flex containers default to column — force row ===== */
.elementor-11 .pill-row,.elementor-11 .cta-row{flex-direction:row}

/* ===== fix: centred text blocks — keep widgets full width (flex column centres) ===== */
.elementor-11 .believe-inner > .elementor-widget,
.elementor-11 .midband-inner > .elementor-widget{width:100%;max-width:100%}
.elementor-11 .believe-inner,.elementor-11 .midband-inner{align-items:center}

/* ===== tighten: zero Elementor flex-gaps then re-assert intended gaps ===== */
.elementor-11 .e-con{gap:0}
/* span-heading inner title colours — override Elementor kit (prevents dark-on-dark) */
.elementor-11 .hero .pill .elementor-heading-title{color:#fff!important}
.elementor-11 .eyebrow .elementor-heading-title{color:var(--heather)!important}
.elementor-11 .eyebrow.light .elementor-heading-title{color:var(--turquoise)!important}
.elementor-11 .num .elementor-heading-title{color:inherit!important}
.elementor-11 .team-row .role .elementor-heading-title{color:var(--turq-deep)!important}
.elementor-11 .ph.mono .mono-initials .elementor-heading-title{color:#fff!important}
.elementor-11 .pill-row{gap:10px}
.elementor-11 .cta-row{gap:16px}
.elementor-11 .svc-grid{gap:22px}
.elementor-11 .mission>.e-con-inner,.elementor-11 .mission .wrap{gap:64px}
.elementor-11 .team-row{gap:60px}

/* ===== polish: left-align card content (build-page forces align-items:center) ===== */
.elementor-11 .svc,
.elementor-11 .mission .wrap > .e-con:first-child,
.elementor-11 .mission > .e-con-inner > .e-con:first-child,
.elementor-11 .team-row > .e-con:not(.m-visual){align-items:flex-start;text-align:left}

/* ====================== MOTION / HOVER / SCROLL ====================== */
.elementor-11 .svc{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
html{scroll-behavior:smooth}
body{overflow-x:clip}
.elementor-11 section,.elementor-11 .e-con{scroll-margin-top:104px}

/* ====================== RESPONSIVE ====================== */
/* Tablet ≤1024 */
@media(max-width:1024px){
  .elementor-11 .wrap,.elementor-11 .mission .wrap,.elementor-11 .team-row{max-width:820px}
  .elementor-11 .services,.elementor-11 .mission,.elementor-11 .team,.elementor-11 .believe{padding-top:78px;padding-bottom:78px}
}
/* Stack splits + 2-col value grid ≤980 */
@media(max-width:980px){
  .elementor-11 .mission>.e-con-inner,.elementor-11 .mission .wrap{grid-template-columns:1fr;gap:48px}
  .elementor-11 .team-row{grid-template-columns:1fr;gap:34px}
  .elementor-11 .team-row.rev .m-visual{order:0}
  .elementor-11 .svc-grid{grid-template-columns:1fr 1fr}
  .elementor-11 .m-visual .ph,.elementor-11 .team-row .m-visual .ph{aspect-ratio:16/10;max-width:520px}
  .elementor-11 .ph.mono{aspect-ratio:16/9}
}
/* Phone ≤680 */
@media(max-width:680px){
  .elementor-11 .wrap,.elementor-11 .mission .wrap,.elementor-11 .team-row,.elementor-11 .believe-inner,.elementor-11 .midband-inner,.elementor-11 .team-head{padding-left:20px;padding-right:20px}
  .elementor-11 .svc-grid{grid-template-columns:1fr}
  .elementor-11 .hero>.e-con-inner,.elementor-11 .hero .wrap{padding:64px 24px 140px}
  .elementor-11 .hero h1{font-size:clamp(38px,10.5vw,52px)}
  .elementor-11 .hero p.lead,.elementor-11 .hero .lead p{font-size:17px}
  .elementor-11 .believe h2,.elementor-11 .services h2,.elementor-11 .mission h2,.elementor-11 .team-head h2,.elementor-11 .midband h2{font-size:clamp(26px,7.4vw,34px)}
  .elementor-11 .svc{padding:28px 24px}
  .elementor-11 .m-visual .badge{padding:16px 18px}
  .elementor-11 .m-visual .burst{width:78px;top:-22px}
  .elementor-11 .ph.mono .mono-initials,.elementor-11 .ph.mono h3{font-size:84px}
  /* hero CTAs full-width stacked, centred */
  .elementor-11 .hero .cta-row{flex-direction:column;align-items:stretch;width:100%;max-width:330px;margin-left:auto;margin-right:auto}
  .elementor-11 .hero .cta-row .elementor-widget{width:100%}
  .elementor-11 .hero .cta-row .elementor-button{display:block;text-align:center}
}
/* Small phone ≤400 */
@media(max-width:400px){
  .elementor-11 .hero>.e-con-inner,.elementor-11 .hero .wrap{padding-left:18px;padding-right:18px}
  .elementor-11 .hero .pill{font-size:12.5px;padding:6px 13px}
}