/* Collection styles are isolated. Existing cw-heading / cw-text fonts are reused. */
.cwup-page { --cwup-navy:#122d43; --cwup-blue:#156bd2; --cwup-ink:#17364b; --cwup-muted:#617383; --cwup-line:#dce5ec; --cwup-ice:#f2f7fb; color:var(--cwup-ink); background:#fff; font-size:16px; line-height:1.8; }
.cwup-page *, .cwup-page *::before, .cwup-page *::after { box-sizing:border-box; }
.cwup-page .cwup-container { width:min(1280px,calc(100% - 80px)); max-width:none; padding:0; margin-inline:auto; }
.cwup-page a { color:inherit; text-decoration:none; }
.cwup-page img { display:block; max-width:100%; height:auto; }
.cwup-page figure { margin:0; }
.cwup-page button { font:inherit; cursor:pointer; }
.cwup-page [hidden] { display:none!important; }
.cwup-page .cw-heading { margin:0; color:var(--cwup-ink); font-size:clamp(29px,3vw,44px); font-weight:600; line-height:1.16; letter-spacing:-.035em; text-transform:none; overflow-wrap:anywhere; }
.cwup-page .cw-heading--small { font-size:21px; line-height:1.3; letter-spacing:-.025em; }
.cwup-page .cw-text { color:var(--cwup-muted); font-size:16px; line-height:1.85; margin:0 0 18px; text-align:left; word-spacing:normal; white-space:normal; }
.cwup-page .cwup-eyebrow { display:block; color:var(--cwup-blue); font-size:11px; font-weight:700; letter-spacing:.17em; line-height:1.6; margin-bottom:16px; text-transform:uppercase; }
.cwup-page .cwup-mini { display:block; color:var(--cwup-muted); font-size:10px; font-weight:600; line-height:1.6; letter-spacing:.12em; text-transform:uppercase; }
.cwup-page .cwup-hero { position:relative; overflow:hidden; background:var(--cwup-navy); padding:24px 0 72px; isolation:isolate; }
.cwup-page .cwup-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:12px; color:#c0cfdb; font-size:12px; margin-bottom:42px; }
.cwup-page .cwup-hero-grid { display:grid; grid-template-columns:.95fr 1.05fr; align-items:center; gap:72px; position:relative; z-index:1; }
.cwup-page .cwup-hero .cwup-eyebrow { color:#8ebcff; }
.cwup-page .cwup-hero .cw-heading { color:#fff; font-size:clamp(46px,6.1vw,82px); line-height:1.02; letter-spacing:-.05em; max-width:600px; }
.cwup-page .cwup-hero .cw-text { color:#c2d0dc; margin:26px 0 30px; max-width:480px; }
.cwup-page .cwup-hero-photo { position:relative; padding:0 0 24px 24px; }
.cwup-page .cwup-hero-photo::before { content:''; position:absolute; inset:40px 25px 0 0; background:var(--cwup-blue); }
.cwup-page .cwup-hero-photo>img { position:relative; width:100%; aspect-ratio:1.2; object-fit:cover; border-radius:4px 62px 4px 4px; }
.cwup-page .cwup-hero-photo figcaption { position:relative; display:flex; gap:24px; align-items:center; justify-content:space-between; margin:-16px 30px 0 0; padding:18px 24px; background:#fff; color:var(--cwup-navy); font-size:12px; line-height:1.5; }
.cwup-page .cwup-hero-photo figcaption>span:first-child { font-weight:700; letter-spacing:.16em; }
.cwup-page .cwup-hero-word { position:absolute; left:-12px; bottom:-75px; color:rgba(255,255,255,.035); font-size:260px; font-weight:700; line-height:1; letter-spacing:-.07em; z-index:0; pointer-events:none; }
.cwup-page .cwup-button { display:inline-flex; align-items:center; justify-content:space-between; gap:35px; padding:15px 23px; color:#fff; background:var(--cwup-blue); border:1px solid transparent; border-radius:3px; font-size:13px; font-weight:600; line-height:1.5; }
.cwup-page .cwup-button--light { background:#fff; color:var(--cwup-navy); }
.cwup-page .cwup-section-nav { background:#fff; border-bottom:1px solid var(--cwup-line); }
.cwup-page .cwup-section-nav>.cwup-container { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.cwup-page .cwup-section-nav a { display:flex; align-items:center; gap:14px; padding:24px 12px; color:#8696a5; font-size:10px; border-right:1px solid var(--cwup-line); }
.cwup-page .cwup-section-nav a:first-child { border-left:1px solid var(--cwup-line); }
.cwup-page .cwup-section-nav a span { color:var(--cwup-ink); font-size:13px; font-weight:600; }
.cwup-page .cwup-section-nav a:hover { background:var(--cwup-ice); }
.cwup-page .cwup-section { padding:80px 0; scroll-margin-top:90px; }
.cwup-page .cwup-section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:34px; }
.cwup-page .cwup-section-head .cw-heading { max-width:780px; }
.cwup-page .cwup-tabs { display:flex; flex-shrink:0; gap:6px; padding:5px; border:1px solid #d5e0e8; border-radius:6px; background:#fff; }
.cwup-page .cwup-tabs button { display:flex; gap:26px; align-items:center; border:0; background:transparent; color:var(--cwup-muted); padding:10px 17px; border-radius:3px; font-size:13px; line-height:1.5; }
.cwup-page .cwup-tabs button[aria-selected="true"] { background:var(--cwup-blue); color:#fff; }
.cwup-page [role="tabpanel"]:focus-visible { outline:2px solid var(--cwup-blue); outline-offset:8px; }
.cwup-page .cwup-model-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:20px; }
.cwup-page .cwup-model-card { min-width:0; background:#fff; border:1px solid var(--cwup-line); border-radius:8px; overflow:hidden; transition:box-shadow .25s; }
.cwup-page .cwup-model-card:hover { box-shadow:0 14px 35px rgba(18,45,67,.09); }
.cwup-page .cwup-image-button { display:block; position:relative; border:0; background:transparent; padding:0; width:100%; color:inherit; text-align:inherit; overflow:hidden; }
.cwup-page .cwup-model-card img { width:100%; aspect-ratio:.93; object-fit:cover; transition:transform .5s; }
.cwup-page .cwup-model-card:hover img { transform:scale(1.035); }
.cwup-page .cwup-model-number { position:absolute; top:14px; left:14px; display:grid; place-items:center; width:31px; height:31px; background:rgba(255,255,255,.94); color:var(--cwup-navy); border-radius:50%; font-size:10px; }
.cwup-page .cwup-image-arrow { position:absolute; bottom:12px; right:12px; display:grid; place-items:center; background:#fff; width:32px; height:32px; border-radius:50%; font-size:18px; }
.cwup-page .cwup-model-body { padding:20px; }
.cwup-page .cwup-model-body .cwup-mini { margin-bottom:7px; font-size:9px; }
.cwup-page .cwup-benefits { background:var(--cwup-ice); }
.cwup-page .cwup-benefit-intro { display:grid; grid-template-columns:.9fr 1.1fr; gap:58px; align-items:center; margin-bottom:34px; }
.cwup-page .cwup-benefit-intro figure { position:relative; }
.cwup-page .cwup-benefit-intro img { width:100%; aspect-ratio:1.65; max-height:350px; object-fit:cover; border-radius:8px; }
.cwup-page .cwup-benefit-intro .cw-heading { font-size:34px; margin:12px 0 20px; }
.cwup-page .cwup-photo-tag { position:absolute; left:16px; bottom:16px; color:#fff; background:var(--cwup-blue); padding:6px 14px; font-size:10px; letter-spacing:.13em; border-radius:3px; }
.cwup-page .cwup-benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.cwup-page .cwup-benefit-card { min-width:0; padding:27px; border:1px solid #d8e3ec; background:#fff; border-radius:8px; }
.cwup-page .cwup-card-number { display:inline-flex; align-items:center; gap:10px; font-size:11px; color:var(--cwup-blue); margin-bottom:28px; }
.cwup-page .cwup-card-number::after { content:''; width:25px; height:1px; background:#8bb7e8; }
.cwup-page .cwup-benefit-card .cw-heading { margin-bottom:13px; }
.cwup-page .cwup-benefit-card .cw-text { margin:0; font-size:14px; line-height:1.85; }
.cwup-page .cwup-closing { margin-top:26px; margin-bottom:0; }
.cwup-page .cwup-outline-label { display:inline-block; font-size:10px; letter-spacing:.12em; color:var(--cwup-blue); border:1px solid #cbddee; padding:8px 13px; white-space:nowrap; border-radius:3px; }
.cwup-page .cwup-colour-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px; }
.cwup-page .cwup-colour-grid figure { padding:9px; border:1px solid var(--cwup-line); border-radius:8px; }
.cwup-page .cwup-colour-grid img { width:100%; aspect-ratio:1.25; object-fit:cover; border-radius:4px; }
.cwup-page .cwup-colour-grid figcaption { text-align:center; font-size:12px; padding:13px 0 5px; color:var(--cwup-muted); }
.cwup-page .cwup-guide { border-top:1px solid var(--cwup-line); background:#fafcfe; }
.cwup-page .cwup-fact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); align-items:stretch; gap:22px; }
.cwup-page .cwup-fact-card { border:1px solid var(--cwup-line); padding:25px; border-radius:8px; background:#fff; min-width:0; }
.cwup-page .cwup-fact-top { display:flex; justify-content:space-between; color:var(--cwup-blue); font-size:12px; padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid var(--cwup-line); }
.cwup-page .cwup-fact-image { background:#f5f8fa; padding:10px; margin-bottom:20px; border-radius:5px; }
.cwup-page .cwup-fact-image img { width:100%; height:130px; object-fit:contain; }
.cwup-page .cwup-fact-card .cw-heading { margin-bottom:14px; font-size:20px; }
.cwup-page .cwup-fact-card .cw-text { font-size:14px; margin:0; }
.cwup-page .cwup-profile { padding:44px 0; border-top:1px solid var(--cwup-line); }
.cwup-page .cwup-profile:last-child { padding-bottom:0; }
.cwup-page .cwup-profile-intro { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:56px; }
.cwup-page .cwup-profile-copy .cw-heading { margin:14px 0 23px; font-size:36px; }
.cwup-page .cwup-profile-photo { border:1px solid var(--cwup-line); padding:28px; background:#f8fafc; border-radius:8px; }
.cwup-page .cwup-profile-photo img { width:100%; height:340px; object-fit:contain; }
.cwup-page .cwup-richtext p { margin:0 0 17px; }
.cwup-page .cwup-series-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:34px 0; }
.cwup-page .cwup-series-grid figure { border:1px solid var(--cwup-line); border-radius:8px; padding:22px; background:#fff; }
.cwup-page .cwup-series-grid img { width:100%; height:220px; object-fit:contain; }
.cwup-page .cwup-series-grid figcaption { font-size:14px; font-weight:600; border-top:1px solid var(--cwup-line); padding-top:18px; margin-top:18px; line-height:1.6; }
.cwup-page .cwup-design-head { display:flex; justify-content:space-between; align-items:center; margin:34px 0 20px; gap:20px; }
.cwup-page .cwup-design-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.cwup-page .cwup-design-grid figure { min-width:0; border:1px solid var(--cwup-line); padding:16px; border-radius:6px; }
.cwup-page .cwup-design-grid img { width:100%; height:180px; object-fit:contain; }
.cwup-page .cwup-design-grid figcaption { display:flex; align-items:center; gap:10px; color:var(--cwup-muted); font-size:11px; line-height:1.6; padding-top:14px; }
.cwup-page .cwup-design-grid figcaption>span { color:var(--cwup-blue); font-size:10px; }
.cwup-page .cwup-cta { background:var(--cwup-blue); padding:48px 0; }
.cwup-page .cwup-cta>.cwup-container { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.cwup-page .cwup-cta .cwup-eyebrow { color:#d2e4ff; }
.cwup-page .cwup-cta .cw-heading { color:#fff; }
.cwup-page .cwup-dialog { border:0; border-radius:8px; padding:0; width:min(1000px,calc(100% - 32px)); max-width:none; max-height:90vh; background:#fff; color:var(--cwup-navy); }
.cwup-page .cwup-dialog::backdrop { background:rgba(7,22,35,.82); }
.cwup-page .cwup-dialog-bar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:12px 20px; border-bottom:1px solid var(--cwup-line); font-size:14px; line-height:1.5; }
.cwup-page .cwup-dialog-bar button { border:0; background:#edf4fb; width:36px; height:36px; border-radius:50%; font-size:25px; line-height:1; flex-shrink:0; }
.cwup-page .cwup-dialog-image { max-width:100%; width:auto; height:auto; max-height:calc(90vh - 65px); margin:auto; object-fit:contain; padding:15px; }
.cwup-page :is(a,button):focus-visible { outline:3px solid #55a7ff; outline-offset:5px; }
@media(max-width:1100px) { .cwup-page .cwup-container { width:calc(100% - 48px); } .cwup-page .cwup-hero-grid { gap:40px; } .cwup-page .cwup-section-head { align-items:start; } .cwup-page .cwup-fact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .cwup-page .cwup-colour-grid { gap:15px; } .cwup-page .cwup-benefit-card { padding:23px; } }
@media(max-width:991px) { .cwup-page .cwup-section { padding:60px 0; } .cwup-page .cwup-section-head { flex-direction:column; gap:22px; } .cwup-page .cwup-hero { padding-bottom:50px; } .cwup-page .cwup-hero .cw-heading { font-size:55px; } .cwup-page .cwup-hero-photo>img { aspect-ratio:.85; } .cwup-page .cwup-benefit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .cwup-page .cwup-benefit-intro { gap:30px; } .cwup-page .cwup-profile-intro { gap:30px; } .cwup-page .cwup-design-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .cwup-page .cwup-colour-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:767px) { .cwup-page .cwup-hero-grid { grid-template-columns:1fr; gap:34px; } .cwup-page .cwup-hero .cw-heading { font-size:clamp(43px,8vw,60px); max-width:550px; } .cwup-page .cwup-hero-photo>img { aspect-ratio:1.5; border-top-right-radius:40px; } .cwup-page .cwup-hero-photo { max-width:600px; } .cwup-page .cwup-hero-word { display:none; } .cwup-page .cwup-section-nav>.cwup-container { display:flex; overflow-x:auto; } .cwup-page .cwup-section-nav a { flex:0 0 auto; padding:19px 16px; } .cwup-page .cwup-benefit-intro, .cwup-page .cwup-profile-intro { grid-template-columns:1fr; gap:26px; } .cwup-page .cwup-benefit-intro .cw-heading { font-size:29px; } .cwup-page .cwup-profile-copy .cw-heading { font-size:31px; } .cwup-page .cwup-profile-photo img { height:280px; } .cwup-page .cwup-design-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .cwup-page .cwup-cta>.cwup-container { align-items:start; flex-direction:column; } }
@media(max-width:575px) { .cwup-page .cwup-container { width:calc(100% - 32px); } .cwup-page .cwup-breadcrumb { margin-bottom:30px; } .cwup-page .cwup-hero { padding-bottom:36px; } .cwup-page .cwup-hero .cw-heading { font-size:45px; } .cwup-page .cwup-hero .cw-text { font-size:15px; } .cwup-page .cwup-section { padding:46px 0; } .cwup-page .cwup-section-head { margin-bottom:25px; } .cwup-page .cwup-model-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .cwup-page .cwup-model-body { padding:15px 12px; } .cwup-page .cwup-model-body .cw-heading { font-size:18px; } .cwup-page .cwup-model-number { top:9px; left:9px; width:25px; height:25px; } .cwup-page .cwup-model-card img { aspect-ratio:.88; } .cwup-page .cwup-benefit-grid, .cwup-page .cwup-fact-grid, .cwup-page .cwup-series-grid { grid-template-columns:1fr; gap:16px; } .cwup-page .cwup-card-number { margin-bottom:18px; } .cwup-page .cwup-colour-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .cwup-page .cwup-colour-grid img { aspect-ratio:1.5; } .cwup-page .cwup-design-grid { gap:12px; } .cwup-page .cwup-design-grid figure { padding:12px; } .cwup-page .cwup-design-grid img { height:130px; } .cwup-page .cwup-design-head { align-items:start; flex-direction:column; gap:8px; } .cwup-page .cwup-tabs { max-width:100%; flex-wrap:wrap; } .cwup-page .cwup-tabs button { gap:25px; padding:9px 16px; } .cwup-page .cwup-fact-image img { height:150px; } .cwup-page .cwup-series-grid img { height:200px; } .cwup-page .cwup-hero-photo figcaption { padding:14px 16px; margin-right:16px; font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .cwup-page *, .cwup-page *::before, .cwup-page *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }