*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#113942;
  --teal-mid:#1a5260;
  --gold:#B59C6D;
  --lime:#ccef00;
  --sage:#689080;
  --plum:#50164A;
  --cream:#F2F2F2;
  --offwhite:#FAFAF8;
  --dark:#0a1f24;
  --text:#1a1a1a;
  --muted:#6b7280;
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--offwhite);color:var(--text);overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(17,57,66,0.95);backdrop-filter:blur(12px);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;color:var(--gold);letter-spacing:0.12em;display:flex;align-items:center;gap:0.65rem}
.nav-logo img:where(.vector-image){height:14px;width:auto;display:block}
.logo-journey{font-family:'DM Sans',sans-serif;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.62);font-weight:400}
.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links a{color:rgba(255,255,255,0.75);text-decoration:none;font-size:0.875rem;font-weight:300;letter-spacing:0.05em;transition:color 0.2s}
.nav-links a:hover{color:var(--lime)}
.nav-cta{background:var(--lime);color:var(--dark);padding:0.5rem 1.5rem;border-radius:2rem;font-weight:500;font-size:0.875rem;text-decoration:none;transition:all 0.2s}
.nav-links a.nav-cta{color:var(--dark);font-weight:500}
.nav-cta:hover{background:#fff;color:var(--teal)}
.nav-links a.nav-cta:hover{color:var(--teal)}

/* HERO */
.hero{min-height:100vh;background:var(--teal);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4rem;padding:8rem 6rem 6rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-20%;right:-10%;width:60%;height:120%;background:radial-gradient(ellipse at center,rgba(181,156,109,0.12) 0%,transparent 70%);pointer-events:none}
.hero-slash{position:absolute;top:0;right:0;width:5px;height:100%;background:var(--lime);transform:rotate(-15deg) translateX(200px);transform-origin:top right}
.hero-left{position:relative;z-index:2}
.hero-eyebrow{display:inline-block;font-size:0.75rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;font-weight:400}
.hero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(3rem,5vw,4.5rem);line-height:1.05;color:#fff;margin-bottom:1rem;font-weight:600}
.hero-title em{color:var(--lime);font-style:italic}
.hero-sub{font-size:1.1rem;line-height:1.7;color:rgba(255,255,255,0.7);margin-bottom:2.5rem;font-weight:300;max-width:440px}
.hero-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.btn-primary{background:var(--lime);color:var(--dark);padding:0.9rem 2.5rem;border-radius:3rem;font-weight:500;font-size:1rem;text-decoration:none;display:inline-block;transition:all 0.25s;letter-spacing:0.02em}
.btn-primary:hover{background:#fff;transform:translateY(-2px)}
.btn-ghost{color:rgba(255,255,255,0.7);font-size:0.9rem;text-decoration:none;display:flex;align-items:center;gap:0.5rem;transition:color 0.2s}
.btn-ghost:hover{color:var(--lime)}
.hero-right{position:relative;display:flex;align-items:center;justify-content:center}
.phone-frame{width:260px;background:#1a1a2e;border-radius:2.5rem;padding:0.75rem;box-shadow:0 40px 80px rgba(0,0,0,0.5);position:relative;z-index:2}
.phone-screen{border-radius:2rem;overflow:hidden;aspect-ratio:9/19}
.phone-screen img{width:100%;height:100%;object-fit:cover}
.hero-float-1{position:absolute;top:-5%;right:-15%;opacity:0.9;animation:floatY 6s ease-in-out infinite}
.hero-float-2{position:absolute;bottom:-5%;left:-10%;opacity:0.8;animation:floatY 7s ease-in-out infinite 1s}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

/* PROBLEM */
.problem{background:var(--offwhite);padding:7rem 6rem;display:block;max-width:720px;margin:0 auto}
.problem-text .label{font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;font-weight:500}
.problem-text h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,3.5vw,3.2rem);line-height:1.15;color:var(--teal);margin-bottom:1.5rem;font-weight:600}
.problem-text p{font-size:1rem;line-height:1.8;color:var(--muted);margin-bottom:1rem;font-weight:300}
.problem-quotes{display:flex;flex-direction:column;gap:1rem}
.quote-card{background:#fff;border-left:3px solid var(--gold);padding:1.2rem 1.5rem;border-radius:0 0.75rem 0.75rem 0;box-shadow:0 2px 20px rgba(0,0,0,0.04)}
.quote-card p{font-size:0.9rem;line-height:1.6;color:var(--teal);font-style:italic;margin-bottom:0.25rem}
.quote-card span{font-size:0.75rem;color:var(--gold);font-weight:500}




/* PROBLEM - B statement layout adapted for A */
.problem-statement{padding:6rem 6rem;background:var(--offwhite);display:grid;grid-template-columns:1fr 2fr;gap:5rem;align-items:center;max-width:none;margin:0}
.problem-statement .statement-left .label{font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;font-weight:500}
.problem-statement .statement-quote{font-family:'Cormorant Garamond',serif;font-size:clamp(1.9rem,3vw,3rem);line-height:1.15;color:var(--teal);font-weight:600}
.problem-statement .statement-quote em{font-style:italic;color:var(--gold)}
.problem-statement .statement-right p{font-size:1rem;line-height:1.85;color:var(--muted);font-weight:300;margin-bottom:1.1rem}
.problem-statement .statement-right p:last-child{margin-bottom:0}
.problem-rule{border:none;border-top:1px solid rgba(181,156,109,0.22);margin:0}
/* PERSONAS */
.personas{padding:7rem 6rem;background:#f9f9f9}
.personas-header{text-align:center;margin-bottom:4rem}
.personas-header .section-label{font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;font-weight:500}
.personas-header h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,3.5vw,3.2rem);line-height:1.15;color:var(--teal);margin-bottom:0;font-weight:600}
.personas-header h2 em{font-style:italic;color:var(--gold)}
.personas-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2rem}
.persona-card{background:#fff;border-radius:12px;padding:0;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08);display:flex;flex-direction:column;transition:transform 0.3s ease,box-shadow 0.3s ease;border-bottom:4px solid #ccc}
.persona-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,0.12)}
.persona-image{width:100%;height:auto;display:block;aspect-ratio:1;object-fit:contain;background:#f9f9f9;padding:1.5rem}
.persona-label{font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);margin-top:1.5rem;margin-left:1.5rem;margin-right:1.5rem;font-weight:600}
.persona-name{font-size:1.2rem;font-weight:700;color:var(--teal);margin-top:0.5rem;margin-left:1.5rem;margin-right:1.5rem;font-family:'Cormorant Garamond',serif}
.persona-quote{font-size:0.9rem;line-height:1.6;color:var(--muted);background:#f5f5f5;padding:1.2rem 1.5rem;margin:1rem 1.5rem 1.5rem;border-radius:6px;font-style:italic}
.persona-1{border-bottom-color:#ccef00}
.persona-2{border-bottom-color:#4a7c8f}
.persona-3{border-bottom-color:#2c3e50}
.persona-4{border-bottom-color:#a89968}
.persona-5{border-bottom-color:#e85e4d}

@media (max-width:1200px){.personas-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
@media (max-width:768px){.personas-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}.personas{padding:5rem 2rem}}
@media (max-width:480px){.personas-grid{grid-template-columns:1fr;gap:1rem}.personas{padding:3rem 1.5rem}}

/* HOW IT WORKS */
.how{background:var(--teal);padding:7rem 6rem;text-align:center}
.how .section-label{font-size:0.75rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.how h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,3.5vw,3rem);color:#fff;margin-bottom:1rem;font-weight:600}
.how .section-desc{color:rgba(255,255,255,0.65);max-width:560px;margin:0 auto 4rem;font-size:1rem;line-height:1.7;font-weight:300}
.journey-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;align-items:start}
.step-connector{display:flex;align-items:center;justify-content:center;padding-top:2.5rem;color:var(--gold);font-size:1.2rem;opacity:0.5}
.journey-step{background:rgba(255,255,255,0.05);border:1px solid rgba(181,156,109,0.2);border-radius:1.25rem;padding:2rem 1.25rem;text-align:center;transition:all 0.3s;cursor:default}
.journey-step:hover{background:rgba(181,156,109,0.1);border-color:var(--gold);transform:translateY(-4px)}
.step-icon{width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:1.2rem}
.step-num{font-size:0.7rem;letter-spacing:0.15em;color:var(--gold);text-transform:uppercase;margin-bottom:0.5rem;font-weight:500}
.step-title{font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:#fff;margin-bottom:0.5rem;font-weight:600}
.step-desc{font-size:0.82rem;color:rgba(255,255,255,0.55);line-height:1.6;font-weight:300}
.step-lime{background:rgba(204,239,0,0.15)}
.step-gold{background:rgba(181,156,109,0.15)}
.step-sage{background:rgba(104,144,128,0.2)}
.step-plum{background:rgba(80,22,74,0.3)}
.step-teal{background:rgba(26,82,96,0.3)}

/* APP SCREENS SHOWCASE */
.screens{background:var(--offwhite);padding:7rem 6rem;}
.screens-header{text-align:center;margin-bottom:4rem}
.screens-header .label{font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.screens-header h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,3.5vw,3rem);color:var(--teal);font-weight:600}
.screens-row{display:flex;gap:2rem;justify-content:center;align-items:flex-end}
.screen-card{flex:0 0 auto;border-radius:2rem;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.12)}
.screen-card.center{width:220px;box-shadow:0 30px 80px rgba(17,57,66,0.25)}
.screen-card.side{width:170px;opacity:0.85}
.screen-card img{width:100%;display:block}

/* PERSONAS */
.personas{background:#fff;padding:7rem 6rem}
.personas-header{text-align:center;margin-bottom:4rem}
.personas-header .label{font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.personas-header h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,3.5vw,3rem);color:var(--teal);font-weight:600}
.personas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.persona-card{background:var(--cream);border-radius:1.25rem;padding:2rem;position:relative;overflow:hidden;transition:all 0.3s}
.persona-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.1)}
.persona-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:4px}
.persona-areej::before{background:var(--lime)}
.persona-alex::before{background:var(--gold)}
.persona-maria::before{background:var(--sage)}
.persona-marco::before{background:var(--plum)}
.persona-illus{height:130px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:1rem}
.persona-illus img{height:100%;object-fit:contain;mix-blend-mode:multiply}
.persona-tag{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;margin-bottom:0.5rem}
.persona-areej .persona-tag{color:#5a7a00}
.persona-alex .persona-tag{color:#8a6f3c}
.persona-maria .persona-tag{color:#3d6157}
.persona-marco .persona-tag{color:var(--plum)}
.persona-name{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--teal);margin-bottom:0.5rem;font-weight:600}
.persona-quote{font-size:0.83rem;color:var(--muted);line-height:1.6;font-style:italic;font-weight:300}

/* APP DOWNLOADS */
.app-download{position:relative;isolation:isolate;overflow:hidden;background:var(--teal);padding:6rem 2rem;text-align:center;scroll-margin-top:5rem}
.app-download::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 100%,rgba(181,156,109,.16),transparent 65%);pointer-events:none}
.app-download-inner{max-width:760px;margin:0 auto}
.app-download .section-label{font-size:.875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem}
.app-download h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.75rem,5vw,4.5rem);line-height:1.08;color:#fff;font-weight:600;margin:0 0 1.5rem}
.app-download h2 em{color:var(--lime);font-weight:400}
.app-download .section-desc{max-width:520px;margin:0 auto;color:#c6d4d5;font-size:1.0625rem;font-weight:300;line-height:1.8}
.app-store-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:2.5rem}
.app-store-button{display:inline-flex;align-items:center;gap:1rem;min-width:218px;min-height:72px;padding:.875rem 1.5rem;border:1px solid #70888d;border-radius:12px;background:#081b20;color:#fff;text-align:left;text-decoration:none;transition:background .2s,border-color .2s}
.app-store-button:hover{background:#102d34;border-color:var(--gold)}
.app-store-button:focus-visible{outline:2px solid var(--lime);outline-offset:5px}
.app-store-button img:where(.vector-image){width:30px;height:34px;flex-shrink:0}
.app-store-copy{display:flex;flex-direction:column;gap:.2rem}
.app-store-copy small{font-size:.8125rem;line-height:1.2;font-weight:400}
.app-store-copy strong{font-size:1.375rem;line-height:1.2;font-weight:500;letter-spacing:-.02em}
.app-download-note{margin-top:1.25rem;color:#a8bfc3;font-size:.875rem;line-height:1.6}
@media(max-width:580px){
  .app-download{padding:4.5rem 1.5rem}
  .app-store-buttons{flex-direction:column;align-items:center}
  .app-store-button{width:100%;max-width:280px}
}

/* USP */
.usp{background:var(--offwhite);padding:7rem 6rem}
.usp-header{text-align:center;margin-bottom:4rem}
.usp-header .label{font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.usp-header h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,3.5vw,3rem);color:var(--teal);font-weight:600}
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.usp-card{background:#fff;border-radius:1.25rem;padding:2.5rem 2rem;border-bottom:3px solid transparent;transition:all 0.3s}
.usp-card:hover{border-bottom-color:var(--gold);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.07)}
.usp-icon{width:2.75rem;height:2.75rem;border-radius:0.75rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;font-size:1.25rem}
.usp-icon.teal{background:rgba(17,57,66,0.08)}
.usp-icon.gold{background:rgba(181,156,109,0.15)}
.usp-icon.lime{background:rgba(204,239,0,0.2)}
.usp-card h3{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--teal);margin-bottom:0.75rem;font-weight:600}
.usp-card p{font-size:0.875rem;color:var(--muted);line-height:1.7;font-weight:300}

/* TEAM */
.team{background:#fff;padding:7rem 6rem;text-align:center}
.team .label{font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.team h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,3.5vw,3rem);color:var(--teal);margin-bottom:3.5rem;font-weight:600}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;max-width:760px;margin:0 auto}
.team-card{background:var(--cream);border-radius:1.5rem;padding:2.5rem;text-align:left}
.team-avatar{width:4rem;height:4rem;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--gold);margin-bottom:1.25rem;font-weight:600}
.team-card h3{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--teal);margin-bottom:0.25rem;font-weight:600}
.team-card .role{font-size:0.8rem;color:var(--gold);font-weight:500;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:1rem}
.team-card p{font-size:0.875rem;color:var(--muted);line-height:1.7;font-weight:300}

/* CTA */
.cta-section{background:var(--teal);padding:8rem 6rem;text-align:center;position:relative;overflow:hidden}
.cta-section .label{font-size:0.75rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem;position:relative}
.cta-section h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.5rem,4vw,4rem);color:#fff;margin-bottom:1.5rem;line-height:1.1;font-weight:600;position:relative}
.cta-section h2 em{color:var(--lime);font-style:italic}
.cta-section p{color:rgba(255,255,255,0.65);max-width:480px;margin:0 auto 3rem;font-size:1rem;font-weight:300;line-height:1.7;position:relative}
.cta-actions{display:flex;gap:1.25rem;justify-content:center;position:relative}
.cta-illus{position:absolute;bottom:0;right:4%;height:85%;opacity:0.25;pointer-events:none}

/* SITE FOOTER */
.site-footer{background:#0a1f24;color:#c0cdcf;padding:3.5rem clamp(1.5rem,6vw,6rem) 1.75rem;border-top:1px solid rgba(181,156,109,.25)}
.site-footer-inner{max-width:1200px;margin:0 auto}
.site-footer-top{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding-bottom:2.5rem}
.site-footer-brand{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none}
.site-footer-brand img:where(.vector-image){display:block;width:64px;height:auto}
.site-footer-brand .logo-journey{font-family:'DM Sans',sans-serif;font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;color:#e2e8e7;font-weight:400}
.site-footer-owner{font-size:.875rem;line-height:1.7;margin-top:1rem;color:#a8babc}
.site-footer-owner strong{font-weight:500;color:#e2e8e7}
.site-footer-links{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem}
.site-footer-links a{font-size:.875rem;line-height:1.7;color:#c0cdcf;text-decoration:none;padding:.5rem 0;transition:color .2s}
.site-footer-links a:hover,.site-footer-links a[aria-current="page"]{color:var(--gold)}
.site-footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem 2rem;font-size:.875rem;line-height:1.7}
.site-footer-powered a{color:#e2e8e7;font-weight:500;text-decoration:underline;text-decoration-color:rgba(181,156,109,.55);text-underline-offset:4px;transition:color .2s}
.site-footer-powered a:hover{color:var(--gold)}
.site-footer a:focus-visible{outline:2px solid var(--lime);outline-offset:5px;border-radius:2px}
@media(max-width:720px){
  .site-footer-top{flex-direction:column;align-items:flex-start;gap:1.5rem;padding-bottom:1.75rem}
  .site-footer-links{gap:.5rem 1.25rem}
  .site-footer-bottom{flex-direction:column;align-items:flex-start;gap:.75rem}
}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.fade-up{opacity:0;animation:fadeUp 0.7s ease forwards}
.fade-up-1{animation-delay:0.1s}
.fade-up-2{animation-delay:0.25s}
.fade-up-3{animation-delay:0.4s}


@media(max-width:900px){
  .problem-statement{grid-template-columns:1fr;padding:5rem 2rem;gap:2rem}
}
/* RESPONSIVE */
@media(max-width:900px){
  .hero,.problem{grid-template-columns:1fr;padding:6rem 2rem;gap:3rem}
  .hero-right{display:none}
  .how,.screens,.personas,.usp,.team,.cta-section{padding:5rem 2rem}
  .journey-steps{grid-template-columns:1fr;}
  .step-connector{display:none}
  .personas-grid,.usp-grid,.team-grid{grid-template-columns:1fr 1fr}
  .screens-row{flex-wrap:wrap}
}
@media(max-width:580px){
  .personas-grid,.usp-grid,.team-grid{grid-template-columns:1fr}
  .nav-links{display:none}
}



/* B PERSONA SECTION COMPATIBILITY */
:root{
  --grey:#F2F2F2;
  --white:#FFFFFF;
  --beige:#B59C6D;
  --beige-light:#e8dcc8;
  --beige-pale:#f5f0e8;
  --teal2:#1a5260;
  --border:#ddd8d0;
}


/* SHARED */
.lbl{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--beige);font-weight:500;margin-bottom:.6rem;display:block}
.sec-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,3.2vw,3rem);line-height:1.1;font-weight:600;color:var(--text);margin-bottom:1rem}
.sec-title em{font-style:italic;color:var(--beige)}
.sec-title strong{font-weight:600}
.sec-desc{font-size:.95rem;color:var(--muted);line-height:1.8;font-weight:300;max-width:520px}
.rule{border:none;border-top:1px solid var(--border);margin:0}
.sec{padding:7rem 5rem}
.rev{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rev.in{opacity:1;transform:none}

/* PERSONAS */
.personas-sec{background:var(--grey)}
.persona-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem;margin-top:3rem}
.persona-card{background:var(--white);border-radius:14px;padding:1.75rem 1.4rem 2rem;border:1px solid var(--border);position:relative;overflow:hidden}
.pc-illus{height:110px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:1rem}
.pc-illus img{height:100%;object-fit:contain}
.pc-tag{font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:var(--beige);font-weight:500;margin-bottom:.3rem}
.pc-name{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--text);font-weight:600;margin-bottom:.5rem}
.speech-bubble{background:var(--grey);border-radius:12px;padding:.75rem .9rem;border:1px solid var(--border);position:relative}
.speech-bubble::before{content:'';position:absolute;top:-8px;left:18px;width:14px;height:8px;background:var(--grey);clip-path:polygon(0% 100%,50% 0%,100% 100%)}
.speech-bubble p{font-size:.77rem;color:var(--teal);line-height:1.6;font-style:italic;font-weight:300;margin:0}
.pc-line{position:absolute;bottom:0;left:0;right:0;height:2px}


/* JOURNEY INTRO - SINGLE PNG VERSION */
.journey-intro-clean {
  background: #F2F2F2;
  padding: 7rem 6rem;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 4rem;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(181,156,109,0.18);
  border-bottom: 1px solid rgba(181,156,109,0.18);
}

.journey-intro-clean::after {
  content: '';
  position: absolute;
  right: -180px;
  top: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(181,156,109,0.12);
  pointer-events: none;
}

.journey-clean-copy {
  position: relative;
  z-index: 2;
  text-align: left;
  max-width: 560px;
}

.journey-clean-copy .section-label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #B59C6D;
  margin-bottom: 1rem;
  font-weight: 500;
}

.journey-clean-copy h2 {
  font-family: 'Cormorant Garamond',serif;
  font-size: clamp(2.3rem,3.8vw,3.6rem);
  line-height: 1.08;
  color: #113942;
  margin-bottom: 1.25rem;
  font-weight: 600;
}

.journey-clean-copy h2 em {
  color: #B59C6D;
  font-style: italic;
}

.journey-clean-copy .section-desc {
  color: #6b7280;
  max-width: 500px;
  font-size: 1.02rem;
  line-height: 1.85;
  font-weight: 300;
  margin-bottom: 2rem;
}

.journey-colour-key {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-top: 1.75rem;
}

.journey-colour-key span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: block;
}

.journey-colour-key .beige { background:#B59C6D; }
.journey-colour-key .blue { background:#113942; }
.journey-colour-key .yellow { background:#F4D35E; }
.journey-colour-key .green { background:#689080; }
.journey-colour-key .purple { background:#50164A; }

.journey-clean-visual {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dt-app-illustration {
  display: block;
  width: min(560px, 100%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 42px rgba(17,57,66,0.12));
}

@media(max-width:1050px){
  .journey-intro-clean {
    grid-template-columns: 1fr;
    padding: 5rem 3rem;
    gap: 3rem;
  }
  .journey-clean-copy {
    max-width: 680px;
  }
  .dt-app-illustration {
    width: min(520px, 100%);
  }
}

@media(max-width:640px){
  .journey-intro-clean {
    padding: 4rem 1.5rem;
  }
  .dt-app-illustration {
    width: 100%;
  }
}



/* SHARED */
.lbl{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--beige);font-weight:500;margin-bottom:.6rem;display:block}
.sec-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,3.2vw,3rem);line-height:1.1;font-weight:600;color:var(--text);margin-bottom:1rem}
.sec-title em{font-style:italic;color:var(--beige)}
.sec-title strong{font-weight:600}
.sec-desc{font-size:.95rem;color:var(--muted);line-height:1.8;font-weight:300;max-width:520px}
.rule{border:none;border-top:1px solid var(--border);margin:0}
.sec{padding:7rem 5rem}
.rev{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rev.in{opacity:1;transform:none}

/* JOURNEY / HOW IT WORKS */
.how-sec{background:var(--white)}
.journey-wrap{position:relative;margin-top:3.5rem;padding-bottom:1rem}
.journey-svg-line{position:absolute;top:46px;left:2%;width:96%;height:52px;pointer-events:none;z-index:0}
.journey-phases{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;position:relative;z-index:1}
.journey-item{display:flex;flex-direction:column;align-items:center;gap:.55rem;cursor:pointer}
.phase-bubble{width:94px;height:94px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .25s,box-shadow .25s;box-shadow:0 6px 20px rgba(0,0,0,.12);flex-shrink:0}
.journey-item:hover .phase-bubble,.journey-item.open .phase-bubble{transform:scale(1.1);box-shadow:0 12px 32px rgba(0,0,0,.2)}
.phase-icon{font-size:1.5rem;color:#fff;line-height:1;display:block;text-align:center}
.phase-label{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.journey-detail-row{display:none;grid-column:1/-1;padding:.25rem .5rem 0}
.journey-detail-row.open{display:block;animation:fadeDown .25s ease}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.phase-detail-inner{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:1.4rem 2rem;box-shadow:0 8px 28px rgba(0,0,0,.07);max-width:560px;margin:0 auto}
.phase-detail-title{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:600;margin-bottom:.45rem}
.phase-detail-inner p{font-size:.84rem;color:var(--muted);line-height:1.72;font-weight:300;margin:0}


/* EXACT B JOURNEY BLOCK SUPPORT */
:root{
  --grey:#F2F2F2;
  --white:#FFFFFF;
  --beige:#B59C6D;
  --beige-light:#e8dcc8;
  --beige-pale:#f5f0e8;
  --teal2:#1a5260;
  --border:#ddd8d0;
  --lime:#CCEF00;
}


/* SHARED */
.lbl{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--beige);font-weight:500;margin-bottom:.6rem;display:block}
.sec-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,3.2vw,3rem);line-height:1.1;font-weight:600;color:var(--text);margin-bottom:1rem}
.sec-title em{font-style:italic;color:var(--beige)}
.sec-title strong{font-weight:600}
.sec-desc{font-size:.95rem;color:var(--muted);line-height:1.8;font-weight:300;max-width:520px}
.rule{border:none;border-top:1px solid var(--border);margin:0}
.sec{padding:7rem 5rem}
.rev{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rev.in{opacity:1;transform:none}

/* JOURNEY / HOW IT WORKS */
.how-sec{background:var(--white)}
.journey-wrap{position:relative;margin-top:3.5rem;padding-bottom:1rem}
.journey-svg-line{position:absolute;top:46px;left:2%;width:96%;height:52px;pointer-events:none;z-index:0}
.journey-phases{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;position:relative;z-index:1}
.journey-item{display:flex;flex-direction:column;align-items:center;gap:.55rem;cursor:pointer}
.phase-bubble{width:94px;height:94px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .25s,box-shadow .25s;box-shadow:0 6px 20px rgba(0,0,0,.12);flex-shrink:0}
.journey-item:hover .phase-bubble,.journey-item.open .phase-bubble{transform:scale(1.1);box-shadow:0 12px 32px rgba(0,0,0,.2)}
.phase-icon{font-size:1.5rem;color:#fff;line-height:1;display:block;text-align:center}
.phase-label{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.journey-detail-row{display:none;grid-column:1/-1;padding:.25rem .5rem 0}
.journey-detail-row.open{display:block;animation:fadeDown .25s ease}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.phase-detail-inner{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:1.4rem 2rem;box-shadow:0 8px 28px rgba(0,0,0,.07);max-width:560px;margin:0 auto}
.phase-detail-title{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:600;margin-bottom:.45rem}
.phase-detail-inner p{font-size:.84rem;color:var(--muted);line-height:1.72;font-weight:300;margin:0}



/* JOURNEY BLOCK - COMPACT WITH EXACT B POPUP TEXT AND PHONE WIREFRAME */
.journey-compact-sec {
  background: var(--teal);
  padding: 5.25rem 6rem 5.75rem;
  border-top: none;
  border-bottom: none;
}

.journey-compact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 205px;
  gap: 2.5rem;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
}

.journey-compact-main .lbl {
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: .7rem;
  display: block;
}

.journey-compact-main .sec-title {
  font-family: 'Cormorant Garamond',serif;
  font-size: clamp(2.2rem,3.2vw,3rem);
  line-height: 1.1;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
  max-width: 760px;
}

.journey-compact-main .sec-title em {
  font-style: italic;
  color: var(--lime);
}

.journey-compact-main .sec-desc {
  font-size: .95rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.8;
  font-weight: 300;
  max-width: 760px;
  margin-bottom: 2.7rem;
}

.journey-compact-wrap {
  position: relative;
  max-width: 720px;
}

.compact-line {
  position: absolute;
  top: 41px;
  left: 48px;
  right: 48px;
  height: 38px;
  pointer-events: none;
  z-index: 0;
}

.compact-phases {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.2rem;
  position: relative;
  z-index: 1;
}

.compact-phase {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.phase-trigger {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  width: 100%;
  font: inherit;
}

.compact-phase .phase-bubble {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 7px 22px rgba(0,0,0,.13);
  flex-shrink: 0;
}

.compact-phase:hover .phase-bubble,
.compact-phase.open .phase-bubble {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 13px 32px rgba(0,0,0,.2);
}

.compact-phase .phase-icon {
  font-size: 1.45rem;
  color: #fff;
  line-height: 1;
  display: block;
  text-align: center;
}

.compact-phase .phase-icon-img {
  width: 31px;
  height: 31px;
  object-fit: contain;
  display: block;
}

.compact-phase .phase-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255,255,255,0.75);
}

.phase-popover {
  display: none;
  width: 175px;
  margin-top: 1rem;
  background: #FFFFFF;
  border: 1px solid #ddd8d0;
  border-radius: 14px;
  padding: 0.95rem 1rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  text-align: left;
  position: relative;
}

.phase-popover::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: #FFFFFF;
  border-left: 1px solid #ddd8d0;
  border-top: 1px solid #ddd8d0;
}

.compact-phase.open .phase-popover {
  display: block;
  animation: phaseDrop .22s ease;
}

@keyframes phaseDrop {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.phase-popover .phase-detail-title {
  font-family: 'Cormorant Garamond',serif;
  font-size: 1.15rem;
  line-height: 1.15;
  font-weight: 600;
  margin-bottom: .42rem;
}

.phase-popover p {
  font-size: .78rem;
  color: #6b6b6b;
  line-height: 1.58;
  font-weight: 300;
  margin: 0;
}

.journey-app-preview {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.4rem;
}

.journey-phone-frame {
  width: 165px;
  background: #FFFFFF;
  border: 2px solid #111;
  border-radius: 2rem;
  padding: 0.42rem;
  box-shadow: 0 18px 34px rgba(17,57,66,0.13);
  position: relative;
}

.journey-phone-frame::before {
  content: '';
  position: absolute;
  top: 0.35rem;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 8px;
  border-radius: 999px;
  background: #111;
  z-index: 3;
}

.journey-phone-screen {
  border-radius: 1.55rem;
  overflow: hidden;
  background: #F2F2F2;
  aspect-ratio: 9 / 19.5;
}

.journey-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

@media(max-width:1050px){
  .journey-compact-sec {
    padding: 5rem 3rem;
  }

  .journey-compact-layout {
    grid-template-columns: 1fr;
  }

  .journey-app-preview {
    justify-content: flex-start;
  }

  .journey-phone-frame {
    width: 155px;
  }
}

@media(max-width:760px){
  .journey-compact-sec {
    padding: 4rem 1.5rem;
  }

  .compact-line {
    display: none;
  }

  .compact-phases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem 1rem;
  }

  .compact-phase .phase-bubble {
    width: 76px;
    height: 76px;
  }

  .phase-popover {
    width: min(220px, 100%);
  }
}


/* MOBILE FIX - PERSONA CARDS STACK CLEANLY */
@media (max-width: 760px) {
  .personas-sec {
    padding: 4rem 1.5rem !important;
    overflow-x: hidden;
  }

  .personas-sec .sec-title,
  .personas-sec h2 {
    font-size: clamp(2.1rem, 12vw, 3.2rem) !important;
    line-height: 1.08 !important;
    max-width: 100% !important;
  }

  .persona-grid,
  .personas-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 2.5rem !important;
  }

  .personas-sec .persona-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .personas-sec .speech-bubble,
  .personas-sec .persona-quote {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

@media (max-width: 480px) {
  .personas-sec {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .personas-sec .persona-card {
    padding: 1.35rem 1.15rem 1.6rem !important;
  }

  .personas-sec .pc-illus {
    height: 140px !important;
  }

  .personas-sec .pc-name,
  .personas-sec .persona-name {
    font-size: 1.55rem !important;
  }
}


/* MOBILE FIX - PERSONA CARD IMAGE PROPORTIONS */
@media (max-width: 760px) {
  .personas-sec .persona-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 1.4rem !important;
    border-radius: 18px !important;
  }

  .personas-sec .pc-illus {
    height: 210px !important;
    max-height: 210px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin-bottom: 1.25rem !important;
  }

  .personas-sec .pc-illus img {
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
  }

  .personas-sec .pc-tag {
    font-size: 0.68rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 0.35rem !important;
  }

  .personas-sec .pc-name {
    font-size: 1.75rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.9rem !important;
  }

  .personas-sec .speech-bubble {
    padding: 1rem 1.1rem !important;
    border-radius: 14px !important;
  }

  .personas-sec .speech-bubble p {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 480px) {
  .personas-sec .pc-illus {
    height: 185px !important;
    max-height: 185px !important;
  }

  .personas-sec .persona-card {
    padding: 1.25rem !important;
  }

  .personas-sec .pc-name {
    font-size: 1.65rem !important;
  }
}


/* MOBILE FIX - JOURNEY AS STACKED PHASE CARDS */
.journey-app-preview-mobile {
  display: none;
}

@media (max-width: 760px) {
  .journey-compact-sec {
    padding: 4rem 1.25rem 4.5rem !important;
    overflow-x: hidden !important;
  }

  .journey-compact-layout {
    display: block !important;
    max-width: 100% !important;
  }

  .journey-compact-main .sec-title {
    font-size: clamp(2.1rem, 11vw, 3rem) !important;
    line-height: 1.08 !important;
  }

  .journey-compact-main .sec-desc {
    margin-bottom: 2rem !important;
  }

  .journey-app-preview-desktop {
    display: none !important;
  }

  .journey-app-preview-mobile {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto 2.75rem !important;
    padding-top: 0 !important;
  }

  .journey-app-preview-mobile .journey-phone-frame {
    width: min(245px, 72vw) !important;
    border-radius: 2.2rem !important;
  }

  .journey-app-preview-mobile .journey-phone-screen {
    border-radius: 1.75rem !important;
  }

  .journey-compact-wrap {
    max-width: 100% !important;
  }

  .journey-compact-wrap .compact-line {
    display: none !important;
  }

  .compact-phases {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.35rem !important;
    width: 100% !important;
  }

  .compact-phase {
    width: 100% !important;
    background: #FFFFFF !important;
    border: 1px solid #ddd8d0 !important;
    border-radius: 18px !important;
    padding: 1.75rem 1.4rem !important;
    box-shadow: 0 12px 34px rgba(17,57,66,0.08) !important;
  }

  .compact-phase .phase-trigger {
    width: 100% !important;
    gap: 1rem !important;
  }

  .compact-phase .phase-bubble {
    width: min(185px, 48vw) !important;
    height: min(185px, 48vw) !important;
    margin: 0 auto !important;
  }

  .compact-phase .phase-icon-img {
    width: 58px !important;
    height: 58px !important;
  }

  .compact-phase .phase-icon {
    font-size: 3rem !important;
  }

  .compact-phase .phase-label {
    font-size: 1rem !important;
    letter-spacing: 0.08em !important;
  }

  .phase-popover {
    width: 100% !important;
    margin-top: 1.35rem !important;
    padding: 1.15rem 1.2rem !important;
    box-shadow: none !important;
    background: #F2F2F2 !important;
  }

  .phase-popover::before {
    background: #F2F2F2 !important;
  }

  .phase-popover .phase-detail-title {
    font-size: 1.35rem !important;
  }

  .phase-popover p {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 420px) {
  .compact-phase .phase-bubble {
    width: 165px !important;
    height: 165px !important;
  }

  .compact-phase .phase-icon-img {
    width: 52px !important;
    height: 52px !important;
  }
}


/* MOBILE FIX - JOURNEY FLIP CARDS */
@media (max-width: 760px) {
  .compact-phase {
    perspective: 1200px !important;
    min-height: 360px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    position: relative !important;
  }

  .compact-phase .phase-trigger,
  .compact-phase .phase-popover {
    min-height: 360px !important;
    width: 100% !important;
    border: 1px solid #ddd8d0 !important;
    border-radius: 22px !important;
    background: #FFFFFF !important;
    box-shadow: 0 12px 34px rgba(17,57,66,0.08) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transition: transform 0.55s ease !important;
    transform-style: preserve-3d !important;
  }

  .compact-phase .phase-trigger {
    padding: 2.2rem 1.4rem !important;
    justify-content: center !important;
    transform: rotateY(0deg) !important;
  }

  .compact-phase .phase-popover {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: absolute !important;
    inset: 0 !important;
    margin-top: 0 !important;
    padding: 2rem 1.7rem !important;
    text-align: center !important;
    transform: rotateY(180deg) !important;
    background: #F2F2F2 !important;
  }

  .compact-phase.open .phase-trigger {
    transform: rotateY(180deg) !important;
  }

  .compact-phase.open .phase-popover {
    transform: rotateY(0deg) !important;
  }

  .compact-phase .phase-popover::before {
    display: none !important;
  }

  .compact-phase .phase-popover .phase-detail-title {
    font-size: 1.75rem !important;
    line-height: 1.1 !important;
    margin-bottom: 1rem !important;
  }

  .compact-phase .phase-popover p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #1f3f46 !important;
  }

  .compact-phase .phase-popover::after {
    content: 'Tap to turn back';
    display: block;
    margin-top: 1.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #B59C6D;
  }
}

@media (max-width: 420px) {
  .compact-phase {
    min-height: 330px !important;
  }

  .compact-phase .phase-trigger,
  .compact-phase .phase-popover {
    min-height: 330px !important;
  }

  .compact-phase .phase-popover {
    padding: 1.7rem 1.35rem !important;
  }

  .compact-phase .phase-popover .phase-detail-title {
    font-size: 1.55rem !important;
  }

  .compact-phase .phase-popover p {
    font-size: 0.95rem !important;
  }
}


/* MOBILE FIX - JOURNEY FLIP CARD TAP RELIABILITY */
@media (max-width: 760px) {
  .compact-phase .phase-trigger {
    pointer-events: auto !important;
    z-index: 2 !important;
    position: relative !important;
  }

  .compact-phase .phase-popover {
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .compact-phase.open .phase-trigger {
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .compact-phase.open .phase-popover {
    pointer-events: auto !important;
    z-index: 3 !important;
  }

  .compact-phase,
  .compact-phase * {
    -webkit-tap-highlight-color: transparent;
  }
}


/* MOBILE FIX - JOURNEY TEXT ALWAYS VISIBLE, NO TAP NEEDED */
@media (max-width: 760px) {
  .journey-compact-sec {
    padding: 4rem 1.25rem 4.5rem !important;
    overflow-x: hidden !important;
  }

  .journey-app-preview-desktop {
    display: none !important;
  }

  .journey-app-preview-mobile {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto 2.5rem !important;
    padding-top: 0 !important;
  }

  .journey-app-preview-mobile .journey-phone-frame {
    width: min(220px, 68vw) !important;
  }

  .journey-compact-wrap {
    max-width: 100% !important;
  }

  .journey-compact-wrap .compact-line {
    display: none !important;
  }

  .compact-phases {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    width: 100% !important;
  }

  .compact-phase {
    width: 100% !important;
    min-height: auto !important;
    perspective: none !important;
    background: #FFFFFF !important;
    border: 1px solid #ddd8d0 !important;
    border-radius: 20px !important;
    padding: 1.35rem 1.25rem !important;
    box-shadow: 0 12px 34px rgba(17,57,66,0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .compact-phase .phase-trigger {
    width: 100% !important;
    min-height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    pointer-events: none !important;
    transform: none !important;
    transition: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }

  .compact-phase.open .phase-trigger {
    transform: none !important;
  }

  .compact-phase .phase-bubble {
    width: 112px !important;
    height: 112px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  .compact-phase:hover .phase-bubble,
  .compact-phase.open .phase-bubble {
    transform: none !important;
  }

  .compact-phase .phase-icon-img {
    width: 40px !important;
    height: 40px !important;
  }

  .compact-phase .phase-icon {
    font-size: 2.25rem !important;
  }

  .compact-phase .phase-label {
    font-size: 0.95rem !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 0.25rem !important;
  }

  .compact-phase .phase-popover {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-height: auto !important;
    margin-top: 1rem !important;
    padding: 1.05rem 1.1rem !important;
    transform: none !important;
    transition: none !important;
    pointer-events: auto !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    background: #F2F2F2 !important;
    border: 1px solid #ddd8d0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  .compact-phase.open .phase-popover {
    transform: none !important;
  }

  .compact-phase .phase-popover::before,
  .compact-phase .phase-popover::after {
    display: none !important;
    content: none !important;
  }

  .compact-phase .phase-detail-title {
    font-size: 1.25rem !important;
    line-height: 1.15 !important;
    margin-bottom: 0.45rem !important;
  }

  .compact-phase .phase-popover p {
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
    color: #1f3f46 !important;
    margin: 0 !important;
  }
}

@media (max-width: 420px) {
  .compact-phase .phase-bubble {
    width: 102px !important;
    height: 102px !important;
  }

  .compact-phase .phase-icon-img {
    width: 36px !important;
    height: 36px !important;
  }

  .compact-phase {
    padding: 1.2rem 1rem !important;
  }
}



/* INTEGRATED: persona1_quotes.html */
.iw-p1 {
  padding: 80px 7vw 72px;
  background: #f4f1eb;
}

.iw-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: #b8933e; margin-bottom: 16px;
}

.iw-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 400; line-height: 1.05;
  color: #1a2e2a; margin-bottom: 52px;
}
.iw-title em {
  font-style: italic; font-weight: 300;
  color: #b8933e; display: block;
}

/* ── FOR WHO: horizontal scroll strip ── */
.iw-quotes-wrap {
  position: relative;
}

/* Right-edge fade/shadow to signal more content */
.iw-quotes-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 28px; /* leave room for dots */
  width: 80px;
  background: linear-gradient(to right, transparent, #FFFFFF);
  pointer-events: none;
  z-index: 2;
  border-radius: 0 16px 16px 0;
}

.iw-quotes {
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0 16px;
  /* peek: ensure last visible card is always cut off */
  padding-right: 60px;
  cursor: grab;
}
.iw-quotes::-webkit-scrollbar { display: none; }
.iw-quotes.is-dragging { cursor: grabbing; }

/* Individual quote - no card, pure text */
.q {
  flex: 0 0 auto;
  width: clamp(200px, 30vw, 300px);
  scroll-snap-align: start;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 2rem 0 0;
  display: flex;
  align-items: center;
  box-shadow: none;
  position: relative;
}
.q:hover { transform: none; box-shadow: none; }
.q::before { display: none; }

.q-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.35;
  color: #1a2e2a;
  font-weight: 400;
  font-style: italic;
  margin: 0;
}

/* Size variants - scatter rhythm lives in font-size */
.q.sm  .q-text { font-size: clamp(1rem,   1.6vw, 1.25rem); font-style: normal; font-weight: 300; color: #7a9490; }
.q.md  .q-text { font-size: clamp(1.2rem, 2vw,   1.55rem); }
.q.lg  .q-text { font-size: clamp(1.5rem, 2.8vw, 2.1rem);  font-weight: 300; }
.q.xl  .q-text { font-size: clamp(1.7rem, 3.2vw, 2.5rem);  font-weight: 300; color: var(--teal); }

/* Colour variants */
.q.muted .q-text  { color: #7a9490; }
.q.mid   .q-text  { color: #3d5a54; }
.q.gold  .q-text  { color: #b8933e; }

/* Sans variant for contrast */
.q.sans      .q-text { font-family: 'DM Sans', sans-serif; font-style: normal; font-weight: 300; }
.q.sans-bold .q-text { font-family: 'DM Sans', sans-serif; font-style: normal; font-weight: 500; }

/* Width adapts to size so large quotes get more room */
.q.lg  { width: clamp(240px, 38vw, 380px); }
.q.xl  { width: clamp(260px, 42vw, 420px); }
.q.sm  { width: clamp(160px, 22vw, 240px); }

/* Dot indicators */
.iw-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
}
.iw-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(17,57,66,0.15);
  transition: background 0.3s, transform 0.3s;
  cursor: pointer;
}
.iw-dot.active {
  background: var(--gold);
  transform: scale(1.3);
}

/* Swipe hint */
.iw-swipe-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(181,156,109,0.7);
  margin-top: 14px;
  justify-content: flex-end;
  transition: opacity 0.5s;
}
.iw-swipe-hint.hidden { opacity: 0; pointer-events: none; }
.iw-swipe-hint img:where(.vector-image) { animation: swipe-nudge 1.6s ease-in-out infinite; }
@keyframes swipe-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* INTEGRATED: persona2_journey_text.html */
.section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0 5vw;
  padding: 80px 7vw 100px;
  background: #f4f1eb;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

/* Same canvas as step3 (140% tall, wide zigzag) - figures just smaller */
.journey {
  position: relative;
  width: 100%;
  padding-bottom: 140%;
}

.journey-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.fig {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fig canvas {
  display: block;
  width: 100%;
  height: auto;
}

.fig-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a7355;
  margin-bottom: 3px;
  white-space: nowrap;
}

/* Same positions as step3, figures shrunk from ~32% to ~16% wide */
.f1 { left: 2%;  top: 0%;  width: 16%; }
.f2 { left: 28%; top: 20%; width: 18%; }
.f3 { left: 56%; top: 37%; width: 16%; }
.f4 { left: 26%; top: 58%; width: 17%; }
.f5 { left: 2%;  top: 78%; width: 15%; }

.text-col h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 300;
  font-style: italic;
  color: #1a2e2a;
  line-height: 1.2;
  margin-bottom: 32px;
}
.text-col h2 strong {
  font-style: normal;
  font-weight: 400;
  display: block;
}
.text-col p {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #3d5550;
  margin-bottom: 20px;
}
.text-col p:last-child { margin-bottom: 0; }
.text-col strong { color: #1a2e2a; font-weight: 600; }

@media (max-width: 720px) {
  .section { grid-template-columns: 1fr; padding: 60px 6vw 80px; }
  .journey { margin-bottom: 60px; }
}

/* ═══════════════════════════════════════════════════
   UNIFIED DESIGN SYSTEM - overrides patchwork styles
   ═══════════════════════════════════════════════════ */

/* ── WHITE sections */
section.team,
section.screens,
section.iw-p1 {
  background: #FFFFFF !important;
}

/* ── GREY sections */
section.integrated-persona2-journey,
section.usp {
  background: #F2F2F2 !important;
}

/* hide duplicate hr dividers */
hr.rule + hr.rule {
  display: none;
}
hr.rule {
  display: none;
}

/* Personas-sec (used inside integrated-persona2-journey) inherits grey */
.personas-sec {
  background: transparent !important;
}

/* ── 2. UNIFIED SECTION HEADING SIZE ── */
/* Every light-section h2 (and equivalent sec-title) gets the same size */
section.iw-p1 .iw-title,
section.integrated-persona2-journey .text-col h2,
section.screens .screens-header h2,
section.usp .usp-header h2,
section.team h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(2.2rem, 3.5vw, 3.2rem) !important;
  line-height: 1.12 !important;
  font-weight: 600 !important;
  color: var(--teal) !important;
  margin-bottom: 1rem !important;
  font-style: normal !important;
}

/* How it works heading - dark section, white + lime */
section.journey-compact-sec .sec-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(2.2rem, 3.5vw, 3.2rem) !important;
  line-height: 1.12 !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin-bottom: 1rem !important;
  font-style: normal !important;
}

section.journey-compact-sec .sec-title em {
  color: var(--lime) !important;
  font-style: italic !important;
}

/* Line 1 stays dark teal upright (inherited from h3) */
/* Line 2 via <em>: gold italic - matches iw-title em pattern */
section.integrated-persona2-journey .text-col h2 em {
  color: var(--gold) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  display: inline !important;
}

/* iw-title italic line keeps gold accent */
section.iw-p1 .iw-title em {
  color: var(--gold) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  display: inline !important;
}

/* Teal-background sections already have white headings - keep them */
section.cta-section h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(2.2rem, 3.5vw, 3.2rem) !important;
  line-height: 1.12 !important;
  font-weight: 600 !important;
}

/* ── 3. EYEBROW LABEL CONSISTENCY ── */
section.iw-p1 .iw-eyebrow,
section.integrated-persona2-journey .iw-eyebrow,
section.integrated-persona2-journey .text-col p.iw-eyebrow {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  font-weight: 500 !important;
  margin-bottom: 1rem !important;
  display: block !important;
  line-height: 1.5 !important;
}

/* ── 4. iw-p1 background - quote strip gets extra breathing room ── */
section.iw-p1 {
  padding: 7rem 0rem 5rem !important;
}
section.iw-p1 .iw-eyebrow,
section.iw-p1 .iw-title,
section.iw-p1 .iw-swipe-hint,
section.iw-p1 .iw-dots {
  padding-left: 6rem;
  padding-right: 6rem;
}
section.iw-p1 .iw-title {
  padding-left: 6rem;
  padding-right: 6rem;
}
section.iw-p1 .iw-quotes-wrap {
  padding-left: 6rem;
}
@media (max-width: 900px) {
  section.iw-p1 .iw-eyebrow,
  section.iw-p1 .iw-title,
  section.iw-p1 .iw-swipe-hint,
  section.iw-p1 .iw-dots {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  section.iw-p1 .iw-quotes-wrap {
    padding-left: 2rem;
  }
}

/* speech bubbles adapt to the grey bg */
section.integrated-persona2-journey .speech-bubble,
section.iw-p1 + section .speech-bubble {
  background: #FFFFFF !important;
}
section.integrated-persona2-journey .speech-bubble::before {
  background: #FFFFFF !important;
}

/* ── 5. Persona section inside grey ── */
section.integrated-persona2-journey {
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

section.integrated-persona2-journey .section {
  background: transparent !important;
  max-width: 1200px;
  margin: 0 auto;
  padding: 7rem 6rem !important;
  grid-template-columns: 1fr 2fr !important;
}

@media (max-width: 900px) {
  section.integrated-persona2-journey,
  section.usp,
  section.journey-compact-sec,
  section.team,
  section.screens {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* MOBILE FIX - WHAT IT IS SECTION
   Keeps the desktop two-column composition, but turns the mobile view into
   a readable content-first stack with a compact horizontal life-stage strip. */
@media (max-width: 760px) {
  section#what-it-is.integrated-persona2-journey {
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  section#what-it-is.integrated-persona2-journey .section {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 2.4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4.25rem 1.25rem 4.75rem !important;
  }

  section#what-it-is .text-col {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  section#what-it-is .text-col h2 {
    font-size: clamp(2.15rem, 11vw, 3rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 1.35rem !important;
  }

  section#what-it-is .text-col p:not(.iw-eyebrow) {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.98rem !important;
    line-height: 1.78 !important;
    color: #3d5550 !important;
    margin-bottom: 1.05rem !important;
  }

  section#what-it-is .text-col p:last-child {
    margin-bottom: 0 !important;
  }

  section#what-it-is .journey {
    order: 2 !important;
    position: relative !important;
    width: calc(100% + 1.25rem) !important;
    padding-bottom: 0 !important;
    margin: 0 -1.25rem 0 0 !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(116px, 34vw) !important;
    gap: 0.85rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.25rem 1.25rem 0.9rem 0 !important;
    scrollbar-width: none !important;
  }

  section#what-it-is .journey::-webkit-scrollbar {
    display: none !important;
  }

  section#what-it-is .journey-svg {
    display: none !important;
  }

  section#what-it-is .fig {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 150px !important;
    scroll-snap-align: start !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0.95rem 0.75rem 0.85rem !important;
    border: 1px solid rgba(181,156,109,0.28) !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    box-shadow: 0 10px 28px rgba(17,57,66,0.07) !important;
  }

  section#what-it-is .fig-label {
    order: 2 !important;
    margin: 0.7rem 0 0 !important;
    white-space: normal !important;
    text-align: center !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
    letter-spacing: 0.16em !important;
    color: #B59C6D !important;
  }

  section#what-it-is .fig canvas {
    order: 1 !important;
    width: auto !important;
    max-width: 84px !important;
    max-height: 92px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 420px) {
  section#what-it-is.integrated-persona2-journey .section {
    padding: 3.75rem 1rem 4.25rem !important;
  }

  section#what-it-is .journey {
    width: calc(100% + 1rem) !important;
    margin-right: -1rem !important;
    grid-auto-columns: minmax(108px, 38vw) !important;
    gap: 0.75rem !important;
  }

  section#what-it-is .fig {
    height: 140px !important;
    padding: 0.85rem 0.65rem 0.75rem !important;
  }

  section#what-it-is .fig canvas {
    max-width: 76px !important;
    max-height: 84px !important;
  }
}



/* FINAL INTEGRATION - WHAT IT IS EXTERNAL GRAPHIC
   Desktop keeps the intended 1/3 graphic + 2/3 text relationship.
   Mobile places the same graphic above the text and removes the former beneath-text graphic treatment. */
section#what-it-is.integrated-persona2-journey .section {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
  gap: clamp(3rem, 5vw, 5rem) !important;
  align-items: center !important;
}

section#what-it-is .what-is-graphic {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

section#what-it-is .what-is-graphic .journey-container {
  position: relative !important;
  width: 100% !important;
  max-width: 360px !important;
  height: auto !important;
  aspect-ratio: 560 / 960 !important;
  margin: 0 auto !important;
  background: transparent !important;
  overflow: visible !important;
}

section#what-it-is .what-is-graphic .path-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

section#what-it-is .what-is-graphic .stage {
  position: absolute !important;
  width: 27% !important;
  text-align: center !important;
}

section#what-it-is .what-is-graphic .stage img {
  width: 70% !important;
  min-width: 44px !important;
  max-width: 90px !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

section#what-it-is .what-is-graphic .stage-label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: clamp(0.55rem, 0.78vw, 0.69rem) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.18em !important;
  font-weight: 700 !important;
  color: #8B7355 !important;
  text-transform: uppercase !important;
  margin-bottom: 0.25rem !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  section#what-it-is.integrated-persona2-journey .section {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  section#what-it-is .what-is-graphic .journey-container {
    max-width: 320px !important;
  }
}

@media (max-width: 760px) {
  section#what-it-is.integrated-persona2-journey {
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  section#what-it-is.integrated-persona2-journey .section {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4rem 1.25rem 4.5rem !important;
    background: transparent !important;
  }

  section#what-it-is .what-is-graphic {
    order: 1 !important;
    width: 100% !important;
    margin: 0 auto 2.5rem !important;
  }

  section#what-it-is .text-col {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  section#what-it-is .what-is-graphic .journey-container {
    width: min(100%, 360px) !important;
    max-width: 360px !important;
  }

  section#what-it-is .what-is-graphic .stage-label {
    font-size: 0.62rem !important;
    letter-spacing: 0.16em !important;
  }
}

@media (max-width: 420px) {
  section#what-it-is.integrated-persona2-journey .section {
    padding: 3.75rem 1rem 4.25rem !important;
  }

  section#what-it-is .what-is-graphic .journey-container {
    width: min(100%, 330px) !important;
    max-width: 330px !important;
  }

  section#what-it-is .what-is-graphic .stage-label {
    font-size: 0.56rem !important;
  }
}



/* FINAL: WHY IDRAK JOURNEY - editorial belief section */
section#why-idrak.usp {
  background: #F2F2F2 !important;
  padding: 7rem 6rem !important;
  border-top: 1px solid rgba(181,156,109,0.16);
  border-bottom: 1px solid rgba(181,156,109,0.16);
}

section#why-idrak .usp-layout {
  max-width: 1180px;
  margin: 0 auto;
}

section#why-idrak .usp-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.15rem;
  font-weight: 500;
}

section#why-idrak .usp-statement h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1.03;
  font-weight: 600;
  color: var(--teal);
  margin: 0;
  max-width: 1120px;
  letter-spacing: -0.025em;
}

section#why-idrak .usp-subline {
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.7;
  color: #3d5550;
  font-weight: 300;
  text-align: center;
  max-width: 820px;
  margin: 2.8rem auto 2.7rem;
}

section#why-idrak .usp-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

section#why-idrak .usp-logo img:where(.vector-image),
section#why-idrak .usp-logo .idrak-full-logo {
  width: min(215px, 55vw);
  height: auto;
  display: block;
}

@media (max-width: 900px) {
  section#why-idrak.usp {
    padding: 5rem 2rem !important;
  }

  section#why-idrak .usp-statement h2 {
    font-size: clamp(2.45rem, 9vw, 4rem);
  }

  section#why-idrak .usp-subline {
    margin-top: 2.2rem;
  }
}

@media (max-width: 580px) {
  section#why-idrak.usp {
    padding: 4rem 1.25rem !important;
  }

  section#why-idrak .usp-statement h2 {
    font-size: clamp(2.25rem, 12vw, 3.15rem);
    line-height: 1.08;
  }

  section#why-idrak .usp-subline {
    text-align: center;
    margin: 1.9rem auto 2.2rem;
  }

  section#why-idrak .usp-logo img:where(.vector-image),
  section#why-idrak .usp-logo .idrak-full-logo {
    width: min(190px, 62vw);
  }
}
/* FINAL MOBILE FIX - WHAT IT IS: keep the original desktop graphic intact under the text */
@media (max-width: 760px) {
  section#what-it-is.integrated-persona2-journey {
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  section#what-it-is.integrated-persona2-journey .section {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 2.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4.25rem 1.35rem 4.75rem !important;
    background: transparent !important;
  }

  section#what-it-is .text-col {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  section#what-it-is .text-col .iw-eyebrow,
  section#what-it-is .text-col p.iw-eyebrow {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.7rem !important;
    line-height: 1.5 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--gold) !important;
    font-weight: 500 !important;
    margin: 0 0 1rem !important;
  }

  section#what-it-is .text-col h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(2.15rem, 11vw, 3rem) !important;
    line-height: 1.08 !important;
    font-weight: 600 !important;
    color: var(--teal) !important;
    margin: 0 0 1.35rem !important;
  }

  section#what-it-is .text-col h2 em {
    font-family: inherit !important;
    color: var(--gold) !important;
    font-style: italic !important;
    font-weight: 400 !important;
  }

  section#what-it-is .text-col p:not(.iw-eyebrow) {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.98rem !important;
    line-height: 1.78 !important;
    font-weight: 300 !important;
    color: #3d5550 !important;
    margin: 0 0 1.05rem !important;
  }

  section#what-it-is .text-col p:last-child {
    margin-bottom: 0 !important;
  }

  /* This restores the original desktop visual composition on mobile.
     The figure positions, dotted SVG path and canvas drawings stay intact;
     only the overall scale and placement change. */
  section#what-it-is .journey {
    order: 2 !important;
    position: relative !important;
    display: block !important;
    width: min(100%, 390px) !important;
    max-width: 390px !important;
    padding-bottom: min(140%, 546px) !important;
    margin: 0 auto !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    scroll-snap-type: none !important;
  }

  section#what-it-is .journey-svg {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  section#what-it-is .fig {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scroll-snap-align: none !important;
  }

  section#what-it-is .fig-label {
    order: 0 !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.54rem !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #8a7355 !important;
    margin: 0 0 0.18rem !important;
    white-space: nowrap !important;
    text-align: left !important;
  }

  section#what-it-is .fig canvas {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  section#what-it-is .f1 { left: 2% !important;  top: 0% !important;  width: 16% !important; }
  section#what-it-is .f2 { left: 28% !important; top: 20% !important; width: 18% !important; }
  section#what-it-is .f3 { left: 56% !important; top: 37% !important; width: 16% !important; }
  section#what-it-is .f4 { left: 26% !important; top: 58% !important; width: 17% !important; }
  section#what-it-is .f5 { left: 2% !important;  top: 78% !important; width: 15% !important; }
}

@media (max-width: 420px) {
  section#what-it-is.integrated-persona2-journey .section {
    padding: 3.75rem 1rem 4.25rem !important;
    gap: 2.35rem !important;
  }

  section#what-it-is .journey {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    padding-bottom: min(140%, 476px) !important;
  }

  section#what-it-is .fig-label {
    font-size: 0.5rem !important;
    letter-spacing: 0.14em !important;
  }
}


/* Element-specific presentation, extracted from HTML attributes. */
.vector-image.image-block{display:block;}
.hero-eyebrow.fade-up.fade-up-1.hero-brand{display:block;margin-bottom:1.5rem;}
.hero-float-2.hero-decoration-left{width:160px;position:absolute;left:-5%;bottom:5%;mix-blend-mode:screen;opacity:0.85}
.hero-float-1.hero-decoration-right{width:170px;position:absolute;right:-8%;top:0%;mix-blend-mode:screen;opacity:0.8}
.stage.stage-position-1{left:8.0357%; top:79.1667%;}
.stage.stage-position-2{left:66.0714%; top:61.4583%;}
.stage.stage-position-3{left:8.0357%; top:41.6667%;}
.stage.stage-position-4{left:66.0714%; top:21.8750%;}
.stage.stage-position-5{left:31.2500%; top:4.1667%;}
.phase-bubble.phase-bubble-1{background:#B59C6D}
.phase-label.phase-label-1{color:#B59C6D}
.phase-detail-title.phase-title-1{color:#B59C6D}
.phase-bubble.phase-bubble-2{background:#113942;outline:4px solid #B59C6D;outline-offset:4px}
.phase-label.phase-label-2{color:rgba(255,255,255,0.75)}
.phase-detail-title.phase-title-2{color:#113942}
.phase-bubble.phase-bubble-3{background:#F4D35E}
.phase-label.phase-label-3{color:#b08c00}
.phase-detail-title.phase-title-3{color:#b08c00}
.phase-bubble.phase-bubble-4{background:#689080}
.phase-label.phase-label-4{color:#689080}
.phase-detail-title.phase-title-4{color:#689080}
.phase-bubble.phase-bubble-5{background:#50164A}
.phase-label.phase-label-5{color:#50164A}
.phase-detail-title.phase-title-5{color:#50164A}
.btn-primary.download-cta{font-size:1.05rem;padding:1rem 3rem}
.cta-illus.cta-artwork{mix-blend-mode:screen}

.journey-compact-wrap .compact-line{object-fit:fill}
/* The plum phase-5 label is illegible on the teal journey band; use the same white treatment as the dark Define bubble. Mobile keeps plum on its white cards. */
@media(min-width:761px){.compact-phase .phase-label-5{color:rgba(255,255,255,0.75)}}