:root{--ui-navy:#0d2948;--ui-blue:#2563eb;--ui-paper:#f4f7fb;--ui-line:#dce5ee;--ui-muted:#64748b;--ui-shadow:0 12px 35px rgba(16,44,76,.08)}
html{scroll-behavior:smooth}body{background-color:var(--ui-paper)!important;color:#17283d!important}header,nav{backdrop-filter:saturate(140%) blur(10px)}header .brand,nav .brand{letter-spacing:-.025em}.primary,button.primary,.accept{box-shadow:0 7px 18px rgba(37,99,235,.2);transition:transform .18s,box-shadow .18s,background .18s}.primary:hover,button.primary:hover,.accept:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(37,99,235,.27)}
.order-card{overflow:hidden;background:#fff url('/assets/ca-consultation-hero-v1.png') center 30%/cover no-repeat!important;padding:290px 0 0!important;border:0!important;box-shadow:0 24px 60px rgba(16,44,76,.18)!important}.order-card:before{display:none!important}.order-card .card-content{background:linear-gradient(180deg,rgba(255,255,255,.97),#fff);padding:22px 24px}.order-card .select-field{display:none}.order-card .mini-service{margin-top:15px}.hero{background:radial-gradient(circle at 5% 0,#dcecff 0,transparent 27%),linear-gradient(115deg,#f4f8ff,#fff 58%,#edf8f3)!important}.service{box-shadow:0 4px 16px rgba(16,44,76,.04)}.service .icon{font-size:22px}.trust-band{box-shadow:0 5px 22px rgba(16,44,76,.04)}
.story-section{padding:78px 0!important;background:#fff}.story-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:25px}.story-heading h2{margin:8px 0 6px;color:var(--ui-navy);font-size:clamp(28px,4vw,40px);letter-spacing:-.04em}.story-heading p{margin:0;color:var(--ui-muted);font-size:16px}.story-arrows{display:flex;gap:9px}.story-arrows button{display:grid;place-items:center;width:43px;height:43px;border:1px solid var(--ui-line);border-radius:50%;background:#fff;color:var(--ui-navy);font-size:20px;box-shadow:0 4px 12px rgba(16,44,76,.07)}.story-carousel{position:relative;overflow:hidden;border-radius:22px;background:#102c4c;box-shadow:0 22px 52px rgba(16,44,76,.16)}.story-track{display:flex;transition:transform .65s cubic-bezier(.22,.8,.25,1)}.story-slide{position:relative;flex:0 0 100%;min-height:440px;overflow:hidden}.story-slide img{display:block;width:100%;height:440px;object-fit:cover}.story-slide:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,25,45,.9),rgba(6,25,45,.7) 34%,rgba(6,25,45,.08) 70%,transparent)}.story-copy{position:absolute;z-index:2;left:clamp(25px,5vw,65px);top:50%;transform:translateY(-50%);width:min(410px,45%);color:#fff}.story-copy span{display:inline-block;margin-bottom:12px;color:#9bc8ff;font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.story-copy h3{margin:0 0 12px;font-size:clamp(26px,4vw,42px);line-height:1.05;letter-spacing:-.045em}.story-copy p{margin:0;color:#d8e5f2;font-size:16px;line-height:1.6}.story-dots{position:absolute;z-index:3;left:clamp(25px,5vw,65px);bottom:24px;display:flex;gap:8px}.story-dots button{width:8px;height:8px;padding:0;border:0;border-radius:8px;background:#ffffff73;transition:width .25s,background .25s}.story-dots button.active{width:28px;background:#fff}.story-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body.ui-portal main.wrap{max-width:1120px}.ui-portal h1,.ui-document h1{color:var(--ui-navy);letter-spacing:-.04em}.ui-portal .card{box-shadow:0 4px 18px rgba(16,44,76,.055);border-color:var(--ui-line)}.ui-portal .empty{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='70' viewBox='0 0 90 70'%3E%3Crect x='15' y='12' width='60' height='45' rx='8' fill='%23eef4ff'/%3E%3Cpath d='M28 28h34M28 37h24M28 46h17' stroke='%2398b8e8' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center 18px/78px auto no-repeat;padding-top:92px!important}.ui-portal header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94)!important}.ui-portal header .bar>div:last-child,.ui-portal header .bar>a:last-child{display:inline-flex;align-items:center;gap:6px}
body.ui-document{background:linear-gradient(130deg,#edf4ff 0,#f7f9fc 42%,#eef8f3 100%)!important}.ui-document .wrap{max-width:900px!important}.ui-document article{border:1px solid var(--ui-line)!important;border-radius:18px!important;box-shadow:var(--ui-shadow);padding:clamp(24px,5vw,48px)!important;background:#fff!important}.ui-document article:before{content:'CA SAHAB · TRUST CENTRE';display:block;margin-bottom:15px;color:var(--ui-blue);font-size:11px;font-weight:850;letter-spacing:.12em}.ui-document h2{margin-top:30px;color:var(--ui-navy);font-size:20px}.ui-document p{color:#475569}.ui-document article>p:last-child{padding-top:20px;border-top:1px solid var(--ui-line)}
#professional{margin:24px 0;padding:20px;border:1px solid var(--ui-line);border-radius:12px;background:#f8fbff}.ui-portal form label{color:#334155}.ui-portal form input,.ui-portal form select,.ui-portal form textarea{background:#fff;border-color:#cfdbe8!important;transition:border-color .2s,box-shadow .2s}.ui-portal form input:focus,.ui-portal form select:focus,.ui-portal form textarea:focus{border-color:#6ea0ef!important;box-shadow:0 0 0 3px rgba(37,99,235,.11);outline:0}
.ui-ca-dashboard main>h2,.ui-admin main>h2{margin:30px 0 12px;color:var(--ui-navy);font-size:18px;letter-spacing:-.015em}.ui-ca-dashboard .profile{background:linear-gradient(120deg,#0d2948,#174a7d)!important;box-shadow:0 14px 34px rgba(13,41,72,.2)}.ui-ca-dashboard #active,.ui-ca-dashboard #completed,.ui-ca-dashboard #inbox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ui-ca-dashboard #active .card,.ui-ca-dashboard #completed .card,.ui-ca-dashboard #inbox .card{margin:0}.ui-ca-dashboard .fee{padding-top:5px}.ui-workroom #app{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;max-width:1080px}.ui-workroom #app>.card{margin:0}.ui-workroom #app>.card:first-child,.ui-workroom #app>.card:nth-child(2){grid-column:1/-1}.ui-workroom .contact{background:linear-gradient(145deg,#f8fbff,#f2f7fd)!important}.ui-workroom .addon{background:#f8fafc;border:1px solid var(--ui-line);border-radius:9px;margin-top:8px;padding:12px!important}.ui-profile main{max-width:820px!important}.ui-profile main>.card{box-shadow:var(--ui-shadow)!important;padding:clamp(22px,4vw,36px)!important}.ui-profile #roleStatus{display:inline-flex;padding:6px 10px;border-radius:999px;background:#edf4ff;color:var(--ui-blue);font-size:12px;font-weight:800}.ui-admin .stats{gap:14px}.ui-admin .stat{position:relative;overflow:hidden;box-shadow:0 4px 18px rgba(16,44,76,.05)}.ui-admin .stat:after{content:'';position:absolute;width:55px;height:55px;border-radius:50%;right:-18px;top:-18px;background:#e8f1ff}.ui-admin #pending .card{border-left:4px solid #f59e0b}.ui-admin #activity{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ui-admin #activity .card{margin:0}
@media(max-width:780px){.order-card{padding-top:230px!important}.order-card .card-content{padding:19px}.ui-document article{border-radius:14px!important}.ui-portal header .bar{gap:10px}.story-section{padding:52px 0!important}.story-heading{align-items:flex-start}.story-heading p{font-size:14px}.story-slide,.story-slide img{height:500px;min-height:500px}.story-slide img{object-position:65% center}.story-slide:after{background:linear-gradient(180deg,rgba(6,25,45,.08) 28%,rgba(6,25,45,.93) 76%)}.story-copy{left:22px;right:22px;top:auto;bottom:58px;transform:none;width:auto}.story-copy p{font-size:14px}.story-dots{left:22px;bottom:22px}}
@media(max-width:720px){.ui-ca-dashboard #active,.ui-ca-dashboard #completed,.ui-ca-dashboard #inbox,.ui-workroom #app,.ui-admin #activity{grid-template-columns:1fr}.ui-workroom #app>.card{grid-column:1!important}}
@media(prefers-reduced-motion:reduce){.story-track{transition:none}}

/* Keep every carousel frame constrained to the visible viewport. */
.story-carousel{width:100%;max-width:100%}
.story-track{width:100%;max-width:100%;will-change:transform}
.story-slide{width:100%;min-width:100%;max-width:100%}
.story-slide img{max-width:100%}

/* The hero booking card is intentionally graphic-free for a compact layout. */
.hero .order-card{background:#fff!important;padding:26px!important;border:1px solid #e5edf5!important}
.hero .order-card .card-content{background:#fff;padding:0}
.hero .order-card:after{content:'';position:absolute;z-index:2;top:22px;right:22px;width:112px;height:78px;border-radius:12px;background:url('/assets/stories/02-client-call.webp') 66% center/cover no-repeat;box-shadow:0 7px 18px rgba(16,44,76,.14)}
.hero .order-card .card-content>h3,.hero .order-card .card-content>.small{margin-right:130px}
@media(max-width:460px){.hero .order-card:after{width:82px;height:62px;top:20px;right:20px}.hero .order-card .card-content>h3,.hero .order-card .card-content>.small{margin-right:96px}}

/* Keep the visual story close to the surrounding sections. */
.story-section{padding:36px 0!important}
@media(max-width:780px){.story-section{padding:30px 0!important}}

/* Balance the booking column with the hero copy instead of leaving dead space. */
.hero .order-card{height:100%}
.hero .order-card .card-content{height:100%;display:flex;flex-direction:column}
.hero .order-card .mini-service{margin-top:24px}
.hero .order-card .wide{margin-top:24px}
.hero .order-card .card-content>p:last-child{margin-top:auto!important;padding-top:22px}
@media(max-width:780px){.hero .order-card{height:auto}.hero .order-card .card-content{display:block}.hero .order-card .card-content>p:last-child{margin-top:12px!important;padding-top:0}}

/* Distribute booking details evenly through the balanced desktop card. */
@media(min-width:781px){.hero .order-card .card-content{display:grid;grid-template-rows:auto auto auto auto auto;align-content:space-between}.hero .order-card .mini-service,.hero .order-card .wide{margin-top:0}.hero .order-card .card-content>p:last-child{margin-top:0!important;padding-top:0}}

/* Give the consultation photo enough presence without dominating the card. */
.hero .order-card:after{width:156px;height:104px}
.hero .order-card .card-content>h3,.hero .order-card .card-content>.small{margin-right:174px}
@media(max-width:460px){.hero .order-card:after{width:108px;height:76px}.hero .order-card .card-content>h3,.hero .order-card .card-content>.small{margin-right:122px}}

/* Prominent consultation visual requested for the desktop booking card. */
@media(min-width:781px){.hero .order-card:after{width:200px;height:126px}.hero .order-card .card-content>h3,.hero .order-card .card-content>.small{margin-right:218px}.hero .order-card .mini-service{margin-top:16px}}