/* Family collections: real product media, RTL, progressive navigation. */
.rokn-pe-family-page #content>.ast-container { max-width:none; width:100%; padding:0; display:block; }
.rokn-pe-family-page #primary { width:100%; margin:0; padding:0; border:0; }
.rokn-pe-family-page #secondary { display:none; }
.rokn-pe-family-page .site-main>.ast-article-single { padding:0; background:transparent; }
.rokn-pe-family-page .entry-content>.elementor>.e-con { --container-max-width:100%; --padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px; padding:0; }
.rokn-pe-family-page .entry-content>.elementor>.e-con>.e-con-inner { max-width:none; padding:0; }
.rokn-pe-family-page .entry-header { display:none; }
.rokn-pe-family-landing { width:100%; background:#f8fafb; font-size:15px; line-height:1.8; overflow:clip; }
.rokn-pe-family-landing h1, .rokn-pe-family-landing h2, .rokn-pe-family-landing h3, .rokn-pe-family-landing p { font-family:inherit; }
.rokn-pe-family-landing a { text-decoration:none; }
.rokn-pe-family-landing svg { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.rokn-family-wrap { width:min(1320px,calc(100% - 80px)); margin-inline:auto; }
.rokn-family-hero { position:relative; overflow:hidden; background:#14232d; color:#f7fafc; }
.rokn-family-hero::before { content:""; position:absolute; inset:0; opacity:.32; background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px); background-size:48px 48px; pointer-events:none; }
.rokn-family-hero__layout { position:relative; display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(32px,5vw,76px); align-items:center; padding-block:48px 60px; }
.rokn-family-breadcrumb { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:32px; color:#a2b6c4; font-size:11px; }
.rokn-family-breadcrumb a { color:#e2eaf0; }
.rokn-family-hero .rokn-family-eyebrow { color:#ff9f57; }
.rokn-family-hero h1 { color:#fff; font-weight:800; font-size:clamp(32px,3.5vw,50px); line-height:1.6; margin:0 0 20px; letter-spacing:-1px; text-wrap:balance; }
.rokn-family-hero__copy>p { font-size:15px; line-height:2.15; color:#c5d1da; margin:0 0 28px; max-width:650px; }
.rokn-family-hero__caption { display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:32px; color:#9cb1bf; font-size:11px; }
.rokn-family-hero__caption span:first-child { color:#e5edf1; padding-inline-end:22px; border-inline-end:1px solid #ffffff30; }
.rokn-family-hero__visual { align-self:stretch; min-height:380px; max-height:580px; display:flex; flex-direction:column; position:relative; overflow:hidden; background:#f5f6f6; border-radius:16px 64px 16px 16px; padding:22px; margin-top:15px; color:#203947; box-shadow:0 20px 55px #0003; }
.rokn-family-visual-label { font-size:9px; font-family:Arial,sans-serif; letter-spacing:2px; color:#687c88; text-align:left; z-index:1; }
.rokn-family-hero__visual>img { position:absolute; inset:44px 20px 84px; width:calc(100% - 40px); height:calc(100% - 128px); object-fit:contain; object-position:center; background:transparent; }
.rokn-family-visual-caption { display:flex; gap:14px; justify-content:space-between; align-items:center; color:#243e4e; font-size:12px; font-weight:700; border-top:1px solid #d7e0e5; padding-top:14px; margin-top:auto; z-index:1; }
.rokn-family-visual-caption span { font-size:22px; }
.rokn-family-hero__visual--symbol { min-height:380px; background:linear-gradient(125deg,#213844,#0c1a23); color:#ff9140; border:1px solid #ffffff18; }
.rokn-family-hero__visual--symbol .rokn-family-visual-caption { color:#d1dfe7; border-top-color:#ffffff20; }
.rokn-family-symbol { margin:auto; width:160px; height:160px; display:grid; place-items:center; border:1px solid #ffffff15; border-radius:28px; transform:rotate(-6deg); }
.rokn-family-symbol svg { width:92px; height:92px; }
.rokn-family-nav { background:#fff; border-bottom:1px solid #dfe5e8; }
.rokn-family-nav>.rokn-family-wrap { display:flex; gap:26px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; align-items:center; }
.rokn-family-nav a { flex-shrink:0; font-size:12px; color:#62737e; padding:22px 0 18px; border-bottom:3px solid transparent; }
.rokn-family-nav a[aria-current] { color:#a34200; font-weight:700; border-bottom-color:#fb7818; }
.rokn-family-nav a:hover { color:#a34200; }
.rokn-family-products { padding-block:62px 50px; scroll-margin-top:var(--rokn-header-offset); }
.rokn-family-section-head { display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:22px; }
.rokn-family-section-head h2, .rokn-family-guide h2 { margin:0; color:#172d3a; font-size:clamp(26px,2.6vw,36px); line-height:1.6; font-weight:800; letter-spacing:-.6px; }
.rokn-family-section-head .rokn-family-eyebrow { margin-bottom:4px; }
.rokn-family-search { width:300px; max-width:100%; }
.rokn-family-search>span { display:block; font-size:11px; color:#667781; margin-bottom:8px; }
.rokn-family-search input { display:block; width:100%; background:#fff; border:1px solid #ccd7de; border-radius:8px; padding:12px 16px; height:48px; font-family:inherit; font-size:13px; color:#263e4d; }
.rokn-family-result { margin:20px 0; color:#60747f; font-size:12px; }
.rokn-family-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.rokn-family-grid--few { grid-template-columns:repeat(2,minmax(0,1fr)); }
.rokn-family-grid--few:has(>.rokn-family-card:only-child) { grid-template-columns:1fr; }
.rokn-family-grid--few>.rokn-family-card:only-child .rokn-family-card__link { display:grid; grid-template-columns:1fr 1fr; align-items:center; }
.rokn-family-card { min-width:0; overflow:hidden; background:#fff; border:1px solid #dce4e9; border-radius:14px; transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease; }
.rokn-family-card:hover { border-color:#e99961; box-shadow:0 14px 30px #18344610; transform:translateY(-5px); }
.rokn-family-card__link { display:flex; flex-direction:column; height:100%; color:inherit; }
.rokn-family-card__media { position:relative; display:grid; place-items:center; aspect-ratio:1.6; background:#f0f3f4; overflow:hidden; border-bottom:1px solid #e4eaed; }
.rokn-family-card__media>img { width:100%; height:100%; min-height:0; position:absolute; inset:0; padding:18px; object-fit:contain; object-position:center; }
.rokn-family-card__arrow { position:absolute; bottom:16px; inset-inline-end:16px; width:34px; height:34px; border-radius:50%; background:#ffffffdf; color:#183746; display:grid; place-items:center; font-size:21px; border:1px solid #dde4e6; }
.rokn-family-card__media--symbol { background:linear-gradient(130deg,#e8eef1,#f7f9fa); color:#678796; gap:12px; align-content:center; }
.rokn-family-card__media--symbol>span:not(.rokn-family-card__arrow) { width:80px; height:80px; display:grid; place-items:center; background:#ffffff88; border-radius:20px; }
.rokn-family-card__media--symbol svg { width:44px; height:44px; }
.rokn-family-card__media--symbol small { color:#637985; font-size:10px; }
.rokn-family-card__body { display:flex; flex:1; flex-direction:column; padding:25px 26px; }
.rokn-family-card__body h3 { font-size:19px; font-weight:800; line-height:1.9; margin:0 0 10px; color:#203847; }
.rokn-family-card__body p { color:#697983; font-size:13px; line-height:2; margin:0 0 24px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.rokn-family-card__more { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #e8edf0; padding-top:16px; margin-top:auto; color:#a64100; font-size:12px; font-weight:700; }
.rokn-family-card__more>span { font-size:22px; }
.rokn-family-empty { text-align:center; padding:40px; border:1px dashed #c8d4dc; border-radius:12px; background:white; }
.rokn-family-empty h3 { color:#375362; font-size:18px; }
.rokn-family-empty button { background:#fff; color:#993e00; border:1px solid #f3ae7d; font-family:inherit; padding:10px 16px; border-radius:6px; cursor:pointer; }
.rokn-family-guide { display:grid; grid-template-columns:1fr 2fr; gap:40px; padding-block:42px; border-block:1px solid #dde5e9; }
.rokn-family-guide ol { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; counter-reset:guide; }
.rokn-family-guide li { counter-increment:guide; }
.rokn-family-guide li::before { content:"0" counter(guide); display:block; font:700 13px/1.5 Arial,sans-serif; color:#b34c00; margin:0 0 16px; }
.rokn-family-guide b { display:block; color:#243c4b; font-size:15px; margin-bottom:8px; }
.rokn-family-guide p { font-size:12px; color:#627883; line-height:2; margin:0; }
.rokn-family-project { padding-block:55px 65px; scroll-margin-top:var(--rokn-header-offset); }
@media(max-width:1024px) { .rokn-family-wrap { width:calc(100% - 48px); } .rokn-family-hero__layout { gap:28px; } .rokn-family-hero h1 { font-size:34px; } .rokn-family-hero__visual { min-height:350px; } .rokn-family-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .rokn-family-guide { grid-template-columns:1fr; gap:24px; } }
@media(max-width:767px) { .rokn-family-wrap { width:calc(100% - 32px); } .rokn-family-hero__layout { grid-template-columns:1fr; padding-block:28px 32px; gap:28px; } .rokn-family-breadcrumb { margin-bottom:24px; font-size:10px; } .rokn-family-hero h1 { font-size:32px; line-height:1.65; } .rokn-family-hero__copy>p { font-size:13px; margin-bottom:22px; } .rokn-family-hero__visual { min-height:290px; margin-top:0; border-radius:12px 40px 12px 12px; } .rokn-family-hero__caption { margin-top:22px; gap:12px; } .rokn-family-hero__caption span:first-child { padding-inline-end:12px; } .rokn-family-hero .rokn-experience-button { font-size:12px !important; padding:11px 14px !important; gap:12px; min-height:46px; } .rokn-family-nav>.rokn-family-wrap { gap:22px; } .rokn-family-nav a { padding-block:17px 14px; font-size:11px; } .rokn-family-products { padding-block:38px; } .rokn-family-section-head { align-items:stretch; } .rokn-family-search { width:100%; } .rokn-family-search input { font-size:16px; } .rokn-family-grid { gap:16px; } .rokn-family-card__body { padding:20px; } .rokn-family-guide ol { gap:22px; } .rokn-family-project { padding-block:36px 40px; } }
@media(max-width:600px) { .rokn-family-grid, .rokn-family-grid--few, .rokn-family-grid--few>.rokn-family-card:only-child .rokn-family-card__link { grid-template-columns:1fr; } .rokn-family-guide ol { grid-template-columns:1fr; gap:20px; } .rokn-family-guide li { position:relative; padding-inline-start:38px; } .rokn-family-guide li::before { position:absolute; inset-inline-start:0; top:4px; } }
@media(prefers-reduced-motion:reduce) { .rokn-family-card { transition:none; } .rokn-family-card:hover { transform:none; } }