/* Finecolour custom colour-chart hub. No page-builder markup or page-level CSS. */
.fc-colour-hub { --fc-ink:#1d2939; --fc-muted:#5b6676; --fc-paper:#fffdf8; --fc-wash:#f5f0e6; --fc-line:#e6ded1; --fc-red:#ce4f57; color:var(--fc-ink); font-size:16px; line-height:1.6; overflow:hidden; -webkit-font-smoothing:antialiased; }
.fc-colour-hub *, .fc-colour-hub *::before, .fc-colour-hub *::after { box-sizing:border-box; }
.fc-colour-hub .container { max-width:none; padding-left:80px; padding-right:80px; width:100%; }
.fc-colour-hub h1, .fc-colour-hub h2, .fc-colour-hub p { margin-top:0; }
.fc-colour-hub h1, .fc-colour-hub h2 { font-family:Georgia, 'Times New Roman', serif; text-wrap:balance; }
.fc-colour-hub p { text-wrap:pretty; }
.fc-colour-hub__hero { background:var(--fc-paper); padding:56px 0 112px; }
.fc-colour-hub__breadcrumbs { display:flex; gap:10px; color:var(--fc-muted); font-size:.875em; margin-bottom:72px; }
.fc-colour-hub__breadcrumbs a { color:inherit; text-decoration:none; }
.fc-colour-hub__breadcrumbs a:hover { color:var(--fc-red); }
.fc-colour-hub__hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:64px; align-items:end; }
.fc-colour-hub__hero-copy { max-width:720px; }
.fc-colour-hub__eyebrow { color:var(--fc-red); font-size:.8em; font-weight:700; letter-spacing:.12em; margin-bottom:18px; text-transform:uppercase; }
.fc-colour-hub h1 { font-size:clamp(2.75em,5vw,5.25em); letter-spacing:-.045em; line-height:.98; margin-bottom:28px; }
.fc-colour-hub__lede { color:var(--fc-muted); font-size:1.1875em; line-height:1.65; max-width:650px; margin-bottom:34px; }
.fc-colour-hub__button { align-items:center; background:var(--fc-ink); border-radius:8px; color:#fff; display:inline-flex; font-size:.94em; font-weight:700; justify-content:center; min-height:46px; padding:12px 22px; text-decoration:none; transition:transform .2s ease-out, box-shadow .2s ease-out; }
.fc-colour-hub__button:hover { box-shadow:0 8px 16px rgba(29,41,57,.18),0 2px 4px rgba(29,41,57,.14); color:#fff; text-decoration:none; transform:translateY(-2px); }
.fc-colour-hub__button:active { transform:scale(.96); }
.fc-colour-hub__swatches { display:grid; gap:14px; grid-template-columns:repeat(3,1fr); padding:20px 0 10px; transform:rotate(-5deg); }
.fc-colour-hub__swatches span { aspect-ratio:1; background:var(--fc-swatch); border-radius:16px; box-shadow:0 18px 28px rgba(29,41,57,.12),0 3px 6px rgba(29,41,57,.08); }
.fc-colour-hub__swatches span:nth-child(2), .fc-colour-hub__swatches span:nth-child(5) { transform:translateY(28px); }
.fc-colour-hub__ranges { background:var(--fc-wash); padding:120px 0 140px; }
.fc-colour-hub__section-heading { display:grid; gap:34px; grid-template-columns:minmax(0,1fr) minmax(300px,.65fr); margin-bottom:54px; }
.fc-colour-hub h2 { font-size:clamp(2em,3.4vw,3.8em); letter-spacing:-.035em; line-height:1.04; margin-bottom:0; }
.fc-colour-hub__section-heading p { color:var(--fc-muted); margin-bottom:0; max-width:590px; }
.fc-colour-hub__cards { display:grid; gap:18px; grid-template-columns:repeat(12,minmax(0,1fr)); }
.fc-colour-hub__range { background:#fff; border-radius:16px; color:var(--fc-ink); display:flex; flex-direction:column; min-height:240px; padding:30px; position:relative; text-decoration:none; transition:transform .2s ease-out, box-shadow .2s ease-out; }
.fc-colour-hub__range:hover { box-shadow:0 20px 30px rgba(29,41,57,.10),0 4px 8px rgba(29,41,57,.07); color:var(--fc-ink); text-decoration:none; transform:translateY(-4px); }
.fc-colour-hub__range--brush { background:var(--fc-ink); color:#fff; grid-column:span 12; min-height:200px; }
.fc-colour-hub__range--sketch { grid-column:span 5; }
.fc-colour-hub__range--junior { grid-column:span 3; }
.fc-colour-hub__range--fineliner { grid-column:span 4; }
.fc-colour-hub__range-label { color:var(--fc-red); font-size:.8em; font-weight:700; letter-spacing:.11em; margin-bottom:14px; text-transform:uppercase; }
.fc-colour-hub__range--brush .fc-colour-hub__range-label { color:#f4c14e; }
.fc-colour-hub__range-title { font-family:Georgia,'Times New Roman',serif; font-size:1.7em; font-weight:700; letter-spacing:-.025em; line-height:1.08; }
.fc-colour-hub__range-description { color:var(--fc-muted); margin-top:12px; max-width:36ch; }
.fc-colour-hub__range--brush .fc-colour-hub__range-description { color:#d6dde6; max-width:58ch; }
.fc-colour-hub__range-arrow { font-size:1.55em; line-height:1; margin-top:auto; padding-top:22px; }
.fc-colour-hub__guide { background:#fff; padding:104px 0 124px; }
.fc-colour-hub__guide-grid { display:grid; gap:70px; grid-template-columns:minmax(240px,.8fr) minmax(360px,1.2fr); }
.fc-colour-hub__steps { counter-reset:step; list-style:none; margin:0; padding:0; max-width:760px; }
.fc-colour-hub__steps li { border-top:1px solid var(--fc-line); counter-increment:step; padding:20px 0 20px 56px; position:relative; }
.fc-colour-hub__steps li:last-child { border-bottom:1px solid var(--fc-line); }
.fc-colour-hub__steps li::before { color:var(--fc-red); content:'0' counter(step); font-size:.82em; font-weight:700; left:0; letter-spacing:.08em; position:absolute; top:22px; }
.fc-colour-hub__notice { color:var(--fc-muted); font-size:.92em; margin:54px 0 0; max-width:680px; }
.fc-colour-hub__faq { background:var(--fc-wash); padding:126px 0 146px; }
.fc-colour-hub__faq-inner { max-width:860px; }
.fc-colour-hub__faq h2 { margin-bottom:48px; }
.fc-colour-hub__faq-list details { border-top:1px solid var(--fc-line); padding:22px 0; }
.fc-colour-hub__faq-list details:last-child { border-bottom:1px solid var(--fc-line); }
.fc-colour-hub__faq-list summary { cursor:pointer; font-size:1.1em; font-weight:700; list-style:none; padding-right:34px; position:relative; }
.fc-colour-hub__faq-list summary::-webkit-details-marker { display:none; }
.fc-colour-hub__faq-list summary::after { color:var(--fc-red); content:'+'; font-size:1.45em; font-weight:400; line-height:1; position:absolute; right:0; top:-3px; transition:transform .2s ease-out; }
.fc-colour-hub__faq-list details[open] summary::after { transform:rotate(45deg); }
.fc-colour-hub__faq-list p { color:var(--fc-muted); margin:16px 0 0; max-width:680px; }
.fc-colour-hub__disclaimer { background:var(--fc-ink); color:#c9d1dc; padding:30px 0; }
.fc-colour-hub__disclaimer p { font-size:.86em; margin-bottom:0; max-width:750px; }
@media (min-width:1600px) { .fc-colour-hub__hero { padding-bottom:142px; padding-top:68px; } .fc-colour-hub__hero-grid { gap:84px; } .fc-colour-hub__swatches { gap:18px; } .fc-colour-hub__ranges { padding-bottom:164px; padding-top:140px; } }
@media (min-width:1800px) { .fc-colour-hub__hero-grid { gap:104px; } .fc-colour-hub__lede { font-size:1.3em; max-width:710px; } .fc-colour-hub__range { min-height:270px; padding:38px; } }
@media (max-width:1024px) { .fc-colour-hub .container { padding-left:48px; padding-right:48px; } .fc-colour-hub__hero { padding:44px 0 88px; } .fc-colour-hub__breadcrumbs { margin-bottom:52px; } .fc-colour-hub__hero-grid, .fc-colour-hub__section-heading, .fc-colour-hub__guide-grid { gap:40px; grid-template-columns:1fr; } .fc-colour-hub__hero-copy { max-width:680px; } .fc-colour-hub__swatches { max-width:480px; } .fc-colour-hub__ranges { padding:88px 0 104px; } .fc-colour-hub__range--sketch, .fc-colour-hub__range--junior, .fc-colour-hub__range--fineliner { grid-column:span 4; } .fc-colour-hub__guide { padding:76px 0 88px; } .fc-colour-hub__faq { padding:92px 0 104px; } }
@media (max-width:640px) { .fc-colour-hub { font-size:15px; } .fc-colour-hub .container { padding-left:20px; padding-right:20px; } .fc-colour-hub__hero { padding:30px 0 72px; } .fc-colour-hub__breadcrumbs { margin-bottom:42px; } .fc-colour-hub h1 { font-size:clamp(2.35em,11vw,3.25em); } .fc-colour-hub__lede { font-size:1.07em; } .fc-colour-hub__button { width:100%; } .fc-colour-hub__swatches { gap:10px; max-width:100%; padding-top:16px; } .fc-colour-hub__swatches span { border-radius:11px; } .fc-colour-hub__ranges { padding:64px 0 78px; } .fc-colour-hub__section-heading { gap:20px; margin-bottom:34px; } .fc-colour-hub h2 { font-size:2.2em; } .fc-colour-hub__cards { gap:14px; grid-template-columns:1fr; } .fc-colour-hub__range, .fc-colour-hub__range--brush, .fc-colour-hub__range--sketch, .fc-colour-hub__range--junior, .fc-colour-hub__range--fineliner { grid-column:1; min-height:210px; padding:24px; } .fc-colour-hub__guide { padding:64px 0 72px; } .fc-colour-hub__guide-grid { gap:32px; } .fc-colour-hub__notice { margin-top:40px; } .fc-colour-hub__faq { padding:80px 0; } .fc-colour-hub__faq h2 { margin-bottom:34px; } }