/* Home gateways: expand within the row and reveal a short explanation. */
#top .hero-caps { transition:grid-template-columns .4s cubic-bezier(.2,.65,.3,1); }
#top .hcap { transition:transform .3s,filter .3s,box-shadow .3s!important; }
#top .hcap .home-card-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; filter:saturate(.75) brightness(.88); }
#top .hcap:before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg,rgba(3,19,30,.86),rgba(3,19,30,.15) 75%); pointer-events:none; }
#top .hcap>b,#top .hcap>span,#top .hcap>p,#top .hcap>i { position:relative; z-index:2; }
#top .hcap>i { position:absolute; }
#top .home-card-detail { color:#fff; font-size:14px; line-height:1.8; max-width:38ch; margin:0; max-height:0; opacity:0; overflow:hidden; transition:max-height .3s,opacity .3s,margin .3s; text-shadow:0 1px 5px #000; }
@media(min-width:701px) and (hover:hover) {
 #top .hero-caps:has(.hcap:first-child:hover),#top .hero-caps:has(.hcap:first-child:focus-visible) { grid-template-columns:3.6fr 2fr; }
 #top .hero-caps:has(.hcap:nth-child(2):hover),#top .hero-caps:has(.hcap:nth-child(2):focus-visible) { grid-template-columns:3fr 3fr; }
 #top .hcap:hover,#top .hcap:focus-visible { transform:scale(1.015)!important; z-index:2; }
 #top .hcap:hover .home-card-detail,#top .hcap:focus-visible .home-card-detail { max-height:80px; opacity:1; margin-top:10px; }
}
.content-mosaic-card { cursor:pointer; transition:transform .3s,box-shadow .3s; outline-offset:4px; }
#content-capabilities .content-mosaic-card[role="button"] { border-radius:16px!important; }
#content-capabilities .service-card-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; filter:saturate(.85) brightness(.9); }
#content-capabilities .content-mosaic-card>div { z-index:1; }
#content-capabilities .mosaic-detail-hint { z-index:2; }
.content-mosaic-card .mosaic-detail-hint { position:absolute; right:18px; bottom:16px; padding:7px 13px; border:1px solid #ffffff60; background:#09212b99; backdrop-filter:blur(10px); color:#fff; border-radius:999px; font-size:12px; opacity:0; translate:0 6px; transition:opacity .2s,translate .2s; }
@media(hover:hover) {
 .content-mosaic-card:hover,.content-mosaic-card:focus-visible { transform:scale(1.025); z-index:5; box-shadow:0 16px 32px #0b2f3c33; }
 .content-mosaic-card:hover .mosaic-detail-hint,.content-mosaic-card:focus-visible .mosaic-detail-hint { opacity:1; translate:0 0; }
}
.service-detail-dialog { margin:auto; border:1px solid #e2eced; padding:0; width:min(680px,calc(100% - 36px)); max-height:calc(100dvh - 48px); overflow:auto; overscroll-behavior:contain; border-radius:28px; color:#19333d; background:linear-gradient(145deg,#f4faf9,#fff 55%); box-shadow:0 30px 100px #001f3c38; }
.service-detail-dialog::backdrop { background:#061a2d99; backdrop-filter:blur(8px); }
.service-detail-inner { position:relative; padding:42px; }
.service-detail-close { position:sticky; float:right; top:0; z-index:3; display:grid; place-items:center; width:40px; height:40px; margin:-20px -20px 0 8px; border:1px solid #dae6e8; background:#fff; border-radius:50%; font-size:25px; color:#19333d; }
.detail-kicker { display:block; color:#007d8a; font-size:12px; letter-spacing:.08em; margin-bottom:14px; }
.service-detail-dialog h2 { font-size:32px; line-height:1.35; margin:0 0 16px; }
.detail-lead { color:#147080; font-size:18px; font-weight:650; margin:0 0 16px; line-height:1.7; }
.detail-body { color:#556971; font-size:15px; line-height:1.9; margin:0 0 24px; }
.detail-points { display:grid; gap:16px; margin:0 0 28px; }
.detail-points>div { border-left:3px solid #8ed7d8; padding-left:15px; }
.detail-points dt { font-size:14px; font-weight:700; margin-bottom:5px; }
.detail-points dd { font-size:14px; color:#61717a; line-height:1.8; margin:0; }
/* Reuse the established gradient Bento system for the new service story. */
.ai-section-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:-28px auto 55px; }
.ai-section-nav a { padding:9px 17px; border:1px solid #dfe9e9; border-radius:999px; font-size:13px; color:#45636c; background:#f7fbfa; }
.ai-section-nav a:hover { color:#006f7e; background:#e2f4f3; }
#cc-ai-page .ai-category-grid .ai-hero { min-height:485px; }
.smart-visual { position:relative; margin:28px 0 0; min-width:0; }
.smart-window { border:1px solid #ffffff70; padding:18px; border-radius:18px; background:linear-gradient(135deg,#ffffffed,#ecf7f7dd); color:#2d5660; box-shadow:0 18px 35px #082a3e24; }
.smart-window-top { display:flex; align-items:center; gap:7px; margin-bottom:18px; font-size:12px; }
.smart-window-top i { width:6px; height:6px; border-radius:50%; background:#00ae9d; }
.smart-window-top small { margin-left:auto; font-size:10px; opacity:.7; }
.slot-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.slot-grid>span { padding:10px; background:#e4f0ef; border-radius:9px; font-size:12px; text-align:center; }
.slot-grid b { font-size:10px; font-weight:500; }
.slot-grid .selected { background:#208a88; color:#fff; }
.mock-field { display:flex; justify-content:space-between; font-size:10px; padding:11px 0; border-bottom:1px solid #bed6d64d; }
.mock-field b { font-weight:500; }
.mock-action { margin-top:13px; padding:10px; background:#217c7f; color:#fff; border-radius:9px; text-align:center; font-size:11px; }
.invite-visual { width:85%; transform:rotate(-3deg); margin-bottom:12px; }
.floating-note { position:absolute; right:-65px; bottom:8px; padding:17px; background:linear-gradient(120deg,#fff,#e9eee0); border:1px solid #fff; border-radius:15px; box-shadow:0 12px 25px #21443f20; color:#355e54; transform:rotate(6deg); }
.floating-note span,.floating-note small { display:block; font-size:9px; }
.floating-note strong { display:block; margin:7px 0; font-size:13px; }
.curation-visual { display:grid; grid-template-columns:.8fr .65fr 1.8fr; gap:12px; align-items:center; margin-top:auto; padding-top:30px; }
.curation-inputs { display:grid; gap:8px; transform:rotate(-5deg); }
.curation-inputs span { background:#ffffff1a; border:1px solid #ffffff40; border-radius:8px; padding:12px 8px; font-size:10px; text-align:center; }
.curation-engine { border:1px solid #ffffff60; border-radius:18px; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:32px; background:radial-gradient(circle,#a69bc9,#5b557c); box-shadow:0 0 40px #c7b5f333; }
.curation-engine b { font-size:9px; }
.curation-result { transform:rotate(3deg); padding:15px; }
.curation-result ol { list-style:none; display:grid; gap:12px; padding:0; font-size:11px; }
.curation-result li b { display:block; font-size:9px; opacity:.6; font-weight:500; margin-top:3px; }
.curation-result .mock-action { background:#716390; font-size:9px; }
.control-visual { transform:perspective(900px) rotateX(6deg) rotate(-3deg); }
.control-visual .smart-window { background:linear-gradient(125deg,#203d50,#142934); color:#d4ecef; border:4px solid #6094a1; }
.control-screens { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.control-screens span { padding:28px 8px; border-radius:9px; text-align:center; background:linear-gradient(135deg,#85ced075,#10445b); font-size:11px; border:1px solid #c9faff26; }
.control-screens b { font-size:9px; font-weight:400; opacity:.7; }
.control-scenes { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; font-size:9px; }
.control-scenes span { background:#ffffff10; padding:7px 10px; border-radius:99px; }
.control-scenes .selected { background:#a1e1dd; color:#164957; }
.control-line { display:flex; justify-content:space-between; font-size:10px; margin-top:16px; }
.control-line b { color:#a1e1dd; font-weight:500; }
.chat-visual { display:grid; gap:12px; margin-top:auto; padding-top:26px; }
.chat-bubble { border:1px solid #ffffff33; padding:16px; border-radius:16px; background:#ffffff13; font-size:12px; line-height:1.8; }
.chat-bubble.user { justify-self:end; background:#bce4de; color:#174d51; border-bottom-right-radius:3px; }
.chat-bubble.assistant { border-bottom-left-radius:3px; max-width:95%; }
.chat-bubble span { display:block; margin-bottom:9px; color:#b6f3eb; font-size:11px; }
.chat-bubble small { display:block; opacity:.6; font-size:9px; margin-top:12px; }
.chat-input { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-radius:99px; background:#ffffff12; color:#d3e5e4; font-size:10px; }
.chat-input span { display:grid; place-items:center; border-radius:50%; width:25px; height:25px; background:#b8e6df; color:#1c4b50; font-size:18px; }
.case-metrics { display:flex; flex-direction:column; justify-content:center; }
.metric-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:22px 0 14px; }
.metric-pair strong { display:block; font-size:36px; font-weight:650; line-height:1.3; letter-spacing:-.05em; }
.metric-pair strong small { font-size:13px; margin-left:5px; letter-spacing:0; }
.metric-pair span { display:block; margin-top:9px; font-size:12px; opacity:.8; }
#cc-ai-page .case-metrics p.metric-note { font-size:11px; opacity:.65; }
.case-loop { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:42px; }
.case-loop span { padding:15px 12px; border:1px solid #ffffff40; border-radius:12px; font-size:12px; background:#ffffff0d; }
.case-loop i { font-style:normal; font-size:22px; color:#b3e5e6; }
@media(max-width:1000px) {
 .smart-visual { max-width:540px; }
 .invite-visual { max-width:410px; margin-left:auto; margin-right:35px; }
 #cc-ai-page .ai-category-grid .ai-hero { min-height:0; }
 .ai-category-grid .ai-hero { padding-bottom:32px; }
 .curation-visual,.chat-visual { margin-top:10px; }
 .ai-category-grid .ai-process { grid-column:1/-1; }
}
@media(max-width:600px) {
 #top .home-card-detail { max-height:none; opacity:1; font-size:11px; line-height:1.65; margin-top:8px; max-width:30ch; }
 #top .hcap { height:180px!important; }
 .content-mosaic-card .mosaic-detail-hint { opacity:1; translate:0 0; padding:5px 10px; font-size:10px; }
 .service-detail-dialog { border-radius:22px; width:calc(100% - 24px); max-height:calc(100dvh - 32px); }
 .service-detail-inner { padding:28px 24px; }
 .service-detail-close { margin:-12px -8px 0 8px; }
 .service-detail-dialog h2 { font-size:26px; }
 .detail-lead { font-size:16px; }
 .detail-body,.detail-points dd { font-size:13px; }
 .ai-section-nav { justify-content:flex-start; gap:7px; margin:-14px 0 32px; }
 .ai-section-nav a { padding:8px 12px; font-size:11px; }
 .ai-desktop-break { display:none; }
 #cc-ai-page .ai-category-grid .ai-hero { padding-bottom:24px; }
 .smart-visual { margin-top:25px; }
 .invite-visual { width:94%; margin-right:6%; transform:none; padding-bottom:32px; }
 .floating-note { right:-15px; bottom:-2px; padding:12px; transform:rotate(3deg); }
 .floating-note strong { font-size:11px; }
 .floating-note small { font-size:8px; }
 .curation-visual { grid-template-columns:.8fr .65fr 1.8fr; gap:8px; padding-top:0; }
 .curation-inputs span { font-size:8px; padding:10px 5px; }
 .curation-engine { font-size:24px; border-radius:12px; }
 .curation-engine b { font-size:7px; }
 .curation-result { padding:12px; }
 .curation-result .smart-window-top { font-size:9px; display:block; }
 .curation-result .smart-window-top small { display:block; margin-top:4px; }
 .curation-result ol { font-size:10px; }
 .curation-result .mock-action { font-size:8px; padding:8px 4px; }
 .control-visual { transform:none; }
 .control-screens { gap:6px; }
 .control-screens span { font-size:9px; padding:24px 4px; }
 .control-scenes { gap:4px; }
 .control-scenes span { padding:6px 7px; font-size:8px; }
 .metric-pair strong { font-size:29px; }
 .metric-pair strong small { font-size:11px; }
 .metric-pair { gap:14px; }
 .metric-pair span { font-size:11px; }
 .case-loop { gap:5px; padding-top:28px; }
 .case-loop span { padding:11px 8px; font-size:10px; }
 .case-loop i { font-size:15px; }
}
@media(prefers-reduced-motion:reduce) {
 #top .hero-caps,#top .hcap,#top .home-card-detail,.content-mosaic-card,.mosaic-detail-hint { transition:none!important; }
 .content-mosaic-card:hover,#top .hcap:hover { transform:none!important; }
}