/* ===========================================================================
 * Reusable page sections (the "Add Section" builder content blocks).
 * Loaded site-wide so any page can use them. Uses the site design tokens.
 * ========================================================================= */

.sec{padding:45px 0}
.sec--cta,.sec--co,.sec--img{padding:27px 0}
/* Buy section: centre the heading, buttons and disclosure. */
.sec--buy .wrap{text-align:center}
.sec--buy .psf-buy{justify-content:center}
/* Pull the "Other makers" block up close under the Buy section. */
.sec--buy{padding-bottom:12px}
.sec--buy + .sec{padding-top:12px}
.sec--buy + .sec .psf-concepts{margin-top:0}
.sec-h,.psf .sec-h{font-weight:800;font-size:26px;line-height:1.15;color:var(--ink,#1f1e1b);margin:0 0 .6rem}
.sec-intro{font-size:18px;color:var(--ink-2);max-width:none;margin:0 0 .9rem;line-height:1.6}

/* Rich text */
.sec-rt{font-size:18px;line-height:1.7;color:#34322c;max-width:none}
.sec-rt p{margin:0 0 1rem}
.sec-rt p:last-child{margin:0}
.sec-rt b{color:var(--ink)}
.sec-rt a{color:var(--accent,#E30022);font-weight:600;text-decoration:none}
.sec-rt a:hover{text-decoration:underline}
.sec-rt ul,.sec-rt ol{margin:.4rem 0 1rem;padding-left:1.2rem}
.sec-rt li{margin:0 0 .5rem}

/* Callout */
.sec-callout{background:#fff;border:1px solid var(--line,#e7e3da);border-left:4px solid var(--blue,#304452);border-radius:0 8px 8px 0;padding:14px 18px;font-size:15px;color:var(--ink-2);line-height:1.65;max-width:none}
.sec-callout b{color:var(--ink)}
.sec-callout a{color:var(--accent,#E30022);font-weight:600;text-decoration:none}
.sec-callout a:hover{text-decoration:underline}

/* Image */
.sec-figure{margin:0}
.sec-figure--normal{max-width:760px}
.sec-figure--wide,.sec-figure--full{max-width:100%}
.sec-figure img,.sec-img{width:100%;height:auto;display:block;border-radius:14px}
.sec-figure--full img{border-radius:0}
.sec-cap{font-size:12.5px;color:var(--ink-3);margin-top:8px;text-align:center}

/* CTA banner */
.sec-cta{background:#fff;border:1px solid var(--line,#e7e3da);border-radius:16px;padding:24px 26px;box-shadow:0 12px 30px -14px rgba(40,40,40,.2),0 2px 6px rgba(40,40,40,.06)}
.sec-cta__h{font-weight:800;font-size:21px;color:var(--ink);line-height:1.2;margin-bottom:6px}
.sec-cta__t{font-size:18px;color:var(--ink-2);line-height:1.6;margin:0;max-width:640px}
.sec-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.sec-btn{font-size:13px;font-weight:700;letter-spacing:.04em;text-decoration:none;padding:13px 22px;border-radius:8px}
.sec-btn--primary{background:var(--rust,#a8552a);color:#fff}
.sec-btn--primary:hover{background:#8f461f}
.sec-btn--alt{background:#fff;color:var(--blue,#304452);border:1px solid var(--blue,#304452)}
.sec-btn--alt:hover{background:rgba(48,68,82,.07)}
/* Support banner: a warm, deep panel so the ask stands apart from content. */
.sec--support .sec-cta{background:var(--slate,#304452);box-shadow:0 18px 40px -18px rgba(31,30,27,.5);padding:44px 48px 46px;text-align:center}
.sec--support .sec-cta__t{margin-left:auto;margin-right:auto}
.sec--support .sec-btns{justify-content:center;margin-top:22px}
.sec--support .sec-cta__h{color:#fff}
.sec--support .sec-cta__t{color:rgba(255,255,255,.86)}
.sec--support .sec-btn--alt{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.sec--support .sec-btn--alt:hover{background:rgba(255,255,255,.12)}

/* Card row */
.sec-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:26px}
.sec-card{background:#fff;border:1px solid var(--line,#e7e3da);border-radius:8px;padding:30px 28px;min-height:210px;box-shadow:0 12px 30px -14px rgba(40,40,40,.2),0 2px 6px rgba(40,40,40,.06);display:flex;flex-direction:column}
.sec-card__t{font-weight:800;font-size:19px;color:var(--ink);line-height:1.22}
.sec-card__tag{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--rust);margin:6px 0 9px}
.sec-card__b{font-size:18px;color:var(--ink-2);line-height:1.6;flex:1;margin-top:8px}
.sec-card__more{font-size:13px;font-weight:700;color:var(--accent,#E30022);text-decoration:none;margin-top:12px}
.sec-card__more:hover{text-decoration:underline}
/* Optional card thumbnail (e.g. the bird on a reference-pack card). Bleeds to the
   card edges, whole subject shown on white, no shadow. */
.sec-card__img{margin:-30px -28px 18px;border-radius:8px 8px 0 0;border-bottom:1px solid var(--line,#e7e3da);background:#fff;overflow:hidden}
.sec-card__img img{display:block;width:100%;height:150px;object-fit:contain;object-position:center}
.sec--cards-tight .sec-card__img{margin:-24px -24px 16px}
.sec--cards-tight .sec-card__img img{height:120px}
/* Paint-along guide (buy) section: rich slate panel, light text, rust button. */
.sec--paidguide{background:var(--slate,#304452);padding:48px 0}
.pg__eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin:0 0 10px}
.pg__h{font-family:var(--sans);font-weight:800;font-size:30px;line-height:1.15;color:#fff;margin:0 0 12px}
.pg__b{font-size:18px;line-height:1.6;color:rgba(255,255,255,.92);max-width:60ch;margin:0 0 22px}
.pg__b p{margin:0 0 .8rem}
.pg__cta{margin:0}
.pg__btn{display:inline-block;background:var(--rust,#A8552A);color:#fff;font-weight:700;font-size:16px;padding:14px 22px;border-radius:8px;text-decoration:none}
.pg__btn:hover{background:#8f461f}
/* Reference library index: searchable, category-grouped grid of pack cards. */
.sec--refindex .refidx-search{margin:6px 0 28px}
.refidx-input{width:100%;max-width:520px;padding:12px 16px;font-size:16px;border:1px solid var(--line,#e7e3da);border-radius:8px;background:#fff;color:var(--ink)}
.refidx-nomatch{display:block;margin-top:12px;color:var(--ink-2)}
.refidx-nomatch[hidden]{display:none}
.refidx-cat{margin:0 0 42px}
.refidx-cat__h{font-family:var(--sans);font-weight:800;font-size:24px;color:var(--ink);margin:0 0 4px;display:flex;align-items:baseline;gap:10px}
.refidx-cat__n{font-size:14px;font-weight:700;color:var(--ink-2)}
.refidx-cat__i{font-size:17px;color:var(--ink-2);margin:0 0 18px;max-width:62ch}
.refidx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.refidx-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#e7e3da);border-radius:8px;overflow:hidden;text-decoration:none;transition:box-shadow .15s ease,transform .15s ease}
.refidx-card:hover{box-shadow:0 10px 24px -12px rgba(40,40,40,.28);transform:translateY(-2px)}
.refidx-card__img{display:block;background:#fff;border-bottom:1px solid var(--line,#e7e3da)}
.refidx-card__img img{display:block;width:100%;height:120px;object-fit:contain}
.refidx-card__ph{display:flex;align-items:center;justify-content:center;height:120px;font-size:30px}
.refidx-card__t{padding:10px 12px;font-weight:700;font-size:15px;color:var(--ink);line-height:1.25}
@media(max-width:520px){.refidx-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
/* Contained variant: card grid sits centred and does not stretch the full section width. */
.sec--cards-tight .sec-cards{max-width:920px;margin-left:0;margin-right:auto;grid-template-columns:repeat(3,minmax(0,1fr))}
.sec--cards-tight .sec-card{min-height:0;padding:24px 24px}
@media(max-width:820px){.sec--cards-tight .sec-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.sec--cards-tight .sec-cards{grid-template-columns:1fr}}

/* Numbered steps — red number circles, matches the .usecard pattern */
.sec-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,380px));justify-content:center;gap:16px;margin-top:8px}
.sec-stepcard{background:#fff;border:1px solid var(--line,#e7e3da);border-radius:16px;padding:24px;box-shadow:0 12px 30px -14px rgba(40,40,40,.2),0 2px 6px rgba(40,40,40,.06);display:flex;flex-direction:column}
.sec-stepcard__head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.sec-stepcard__num{width:46px;height:46px;border-radius:50%;background:var(--accent,#E30022);color:#fff;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.sec-stepcard__t{font-weight:800;font-size:18px;color:var(--ink);line-height:1.2}
.sec-stepcard__b{font-size:18px;color:var(--ink-2);line-height:1.6}

/* ===== Split: text + image, 50/50 ===== */
.sec--split .sec-split__row{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
/* Colour lists inside a split flow into two tidy columns so a long palette
   doesn't tower over its image. */
.sec-split__text ul{columns:2;column-gap:34px;margin:.5rem 0 0;padding-left:1.1rem}
.sec-split__text li{break-inside:avoid;margin:0 0 .4rem}
@media(max-width:760px){.sec-split__text ul{columns:1}}
/* Palette colour table: zebra-striped name + code, slightly smaller. */
.pal-table{width:100%;border-collapse:collapse;margin:.5rem 0 0;font-size:14.5px}
.pal-table td{padding:7px 12px;line-height:1.35;color:var(--ink-2,#5b5f66)}
.pal-table td:first-child{color:var(--ink,#2b2b2b)}
.pal-table td:last-child{text-align:right;white-space:nowrap;font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--slate,#304452)}
.pal-table tr:nth-child(odd){background:#f1efeb}
.sec--split-rev .sec-split__media{order:-1}
.sec-split__text .sec-h{margin-top:0}
.sec-split__media{margin:0}
.sec-split__media img{width:100%;object-fit:cover;border-radius:14px;display:block}
.sec-split__ph{aspect-ratio:4/3;width:100%;min-height:300px;border:2px dashed #d9dbe0;background:#fff;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center}
.sec-split__ph-mark{font-size:32px;line-height:1;color:var(--rust,#a8552a);opacity:.55}
.sec-split__ph-note{font-size:13px;font-weight:600;letter-spacing:.02em;color:#8a8f98}
/* Image size beside text (editable per block). Narrows the image column; text keeps the rest. */
.sec--split-img-s .sec-split__row{grid-template-columns:1fr 240px}
.sec--split-img-m .sec-split__row{grid-template-columns:1fr 340px}
.sec--split-img-l .sec-split__row{grid-template-columns:1fr 460px}
.sec--split-rev.sec--split-img-s .sec-split__row{grid-template-columns:240px 1fr}
.sec--split-rev.sec--split-img-m .sec-split__row{grid-template-columns:340px 1fr}
.sec--split-rev.sec--split-img-l .sec-split__row{grid-template-columns:460px 1fr}
.sec--split-img-s .sec-split__media img,.sec--split-img-m .sec-split__media img,.sec--split-img-l .sec-split__media img{object-fit:contain}
@media(max-width:760px){.sec--split .sec-split__row{grid-template-columns:1fr;gap:22px}.sec--split-rev .sec-split__media{order:0}}

/* ===== Intro + (list | image): description spans the width, then list beside image ===== */
.sec--isplit .sec-isplit__intro{max-width:none;margin:0 0 26px}
.sec--isplit .sec-isplit__row{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.sec--isplit-rev .sec-isplit__media{order:-1}
.sec--isplit .sec-h{margin-top:0}
.sec-isplit__text{min-width:0}
.sec-isplit__text .sec-rt{max-width:none}
.sec-isplit__media{margin:0}
.sec-isplit__media img{width:100%;object-fit:cover;border-radius:14px;display:block}
.sec-isplit__media .sec-split__ph{aspect-ratio:4/3;width:100%;min-height:300px}
@media(max-width:760px){.sec--isplit .sec-isplit__row{grid-template-columns:1fr;gap:22px}.sec--isplit-rev .sec-isplit__media{order:0}}

/* ===== Big text over a full-width background video (adjustable dark overlay) ===== */
.sec--bigvideo{position:relative;overflow:hidden;padding:0;width:100vw;margin-left:calc(50% - 50vw)}
.sec-bv__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sec-bv__scrim{position:absolute;inset:0;background:#0d1a24;z-index:1}
.sec-bv__inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:clamp(80px,13vw,180px) clamp(24px,4vw,56px)}
.sec-bv__eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82);margin:0 0 20px}
.sec-bv__body{font-size:clamp(26px,3.4vw,42px);line-height:1.3;font-weight:600;color:#fff;max-width:900px;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.sec-bv__body p{margin:0 0 .5em;max-width:none}
.sec-bv__body p:last-child{margin-bottom:0}
.sec-bv__body em{font-style:normal;color:#e7b48f}
@media(max-width:760px){.sec-bv__body{font-size:24px}}

/* ===== Big statement + <em> rust highlight ===== */
/* Panel spans full width (via bg_color); the text sits in a padded box that is
   held to the section-width column. */
.sec--bigem .wrap.sec-bigem{max-width:1180px;padding:clamp(38px,6vw,72px) clamp(24px,4vw,56px)}
.sec-bigem__eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rust,#a8552a);margin:0 0 18px}
.sec-bigem__body{font-size:34px;line-height:1.32;font-weight:600;color:var(--ink,#2b2b2b);max-width:none}
.sec-bigem__body p{margin:0 0 .5em;max-width:none}
.sec-bigem__body p:last-child{margin-bottom:0}
.sec-bigem__body em{font-style:normal;color:var(--rust,#a8552a)}
@media(max-width:760px){.sec-bigem__body{font-size:25px}}

/* ===== Big quote: large testimonial on the dark-blue (slate) panel ===== */
.sec--bigquote{background:var(--slate,#304452);margin-top:36px}
.sec--bigquote .wrap.sec-bq{max-width:1180px;padding:clamp(40px,5vw,60px) clamp(28px,4vw,64px);color:#fff}
.sec-bq__head{display:flex;align-items:center;gap:16px;margin:0 0 14px}
.sec-bq__mark{font-family:Georgia,'Times New Roman',serif;font-size:44px;line-height:.7;color:rgba(255,255,255,.55);display:block}
.sec-bq__eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.sec-bq__body{margin:0;border:0;padding:0;font-size:30px;line-height:1.42;font-weight:500;color:#fff;max-width:none}
.sec-bq__body p{margin:0 0 .5em;max-width:none;color:#fff}
.sec-bq__body p:last-child{margin-bottom:0}
.sec-bq__body em{font-style:normal;color:var(--rust,#c47a4f)}
.sec-bq__by{display:flex;align-items:center;gap:16px;margin:34px 0 0}
.sec-bq__avatar img{width:54px;height:54px;border-radius:50%;object-fit:cover;display:block;background:#fff}
.sec-bq__name{font-size:15px;font-weight:600;color:rgba(255,255,255,.82)}
@media(max-width:760px){.sec-bq__body{font-size:22px}}

/* ===== Banner: full section-width image ===== */
.sec--banner .sec-banner{margin:0}
.sec-banner img{width:100%;height:auto;border-radius:14px;display:block}
.sec-banner__ph{width:100%;aspect-ratio:16/5;min-height:180px;border:2px dashed #d9dbe0;background:#fff;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center}
.sec-banner__ph-mark{font-size:30px;line-height:1;color:var(--rust,#a8552a);opacity:.55}
.sec-banner__ph-note{font-size:13px;font-weight:600;letter-spacing:.02em;color:#8a8f98}
.sec-banner__cap{margin-top:12px;font-size:14px;color:var(--ink-2,#5b5f66);font-style:italic;text-align:center}

/* ===== FAQ accordion ===== */
.sec--faq .sec-faq{max-width:none}
.sec-faq__item{border-bottom:1px solid var(--line,#e4e6e9)}
.sec-faq__item summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:700;font-size:17px;color:var(--ink,#2b2b2b);display:flex;justify-content:space-between;align-items:center;gap:16px}
.sec-faq__item summary::-webkit-details-marker{display:none}
.sec-faq__item summary::after{content:"+";font-weight:600;font-size:22px;color:var(--rust,#a8552a);line-height:1}
.sec-faq__item[open] summary::after{content:"\2212"}
.sec-faq__a{padding:0 0 16px;font-size:15.5px;line-height:1.65;color:var(--ink-2,#5b5f66);max-width:720px}
.sec-faq__a p{margin:0 0 .8rem}
.sec-faq__a p:last-child{margin:0}
.sec-faq__a a{color:var(--accent,#E30022);font-weight:600;text-decoration:none}
.sec-faq__a a:hover{text-decoration:underline}

/* ===== Colour mix recipes ===== */
.mix-grid{display:grid;grid-template-columns:1fr;gap:34px;margin-top:14px}
.mix{background:#fff;border:1px solid var(--line,#e7e3da);border-radius:14px;padding:24px 28px;box-shadow:0 12px 30px -14px rgba(40,40,40,.2),0 2px 6px rgba(40,40,40,.06)}
.mix__name{font-weight:800;font-size:17px;color:var(--ink,#2b2b2b);margin-bottom:14px;text-align:center}
.mix__row{display:flex;align-items:flex-start;gap:8px;justify-content:center;flex-wrap:nowrap}
.mix__op{font-size:26px;font-weight:700;color:var(--ink-3,#8a8f98);line-height:1;padding-top:52px;flex:0 0 auto}
.mix__chip{flex:1 1 0;min-width:0;max-width:210px;text-align:center}
.mix__swatch{width:130px;height:130px;border-radius:12px;overflow:hidden;border:1px solid rgba(0,0,0,.08);background:#e7eaed;display:block;margin:0 auto}
.mix__chip--result .mix__swatch{width:144px;height:144px;box-shadow:0 6px 16px rgba(30,40,50,.28)}
.mix__swatch img{width:100%;height:100%;object-fit:cover;display:block}
.mix__label{font-size:13px;color:var(--ink-2,#5b5f66);margin-top:10px;line-height:1.35}
.mix__note{font-size:14px;color:var(--ink-2,#5b5f66);line-height:1.6;margin-top:18px}
@media(max-width:680px){
	.mix__swatch{width:84px;height:84px}
	.mix__chip--result .mix__swatch{width:92px;height:92px}
	.mix__op{padding-top:32px;font-size:20px}
}

.mix__swatch--ph{display:flex;align-items:center;justify-content:center;border:2px dashed rgba(0,0,0,.22)}
.mix__ph-mark{font-size:20px;line-height:1;color:#fff;opacity:.92;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.mix__swatch--img{border:1px solid rgba(0,0,0,.08)}

/* ===== Feature / grey-card (.story) component — used by the universal "Add
   Section" builder, so its CSS must load site-wide (not only on paper pages).
   Mirrors paper.css; on paper pages paper.css loads after and matches. ===== */
.fullbleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.story{background:#fff;overflow:hidden;padding:45px 0;margin:0}
/* Guide feature rows (three-washes etc.) stack tightly: less air after the intro
   band and between consecutive feature rows. */
.story--fill{padding:26px 0}
.pg-band + .story--fill{padding-top:0;margin-top:-14px}
.story--fill + .story--fill{padding-top:0}
.story__row{max-width:1180px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.story__media{margin:0;display:flex;flex-direction:column;width:100%}
.story__media img{width:100%;height:auto;object-fit:cover;border-radius:12px}
.story__media figcaption{margin-top:14px;font-size:15px;color:var(--ink-2);font-style:italic}
.story__media .pg-figure__ph{width:100%;min-height:360px}
/* Matched-height variant: brand/guide feature sections opt in via .story--fill */
.story--fill .story__row{align-items:stretch}
.story--fill .story__media img{height:100%;flex:1 1 auto;min-height:0}
.story--fill .story__media .pg-figure__ph{height:100%;min-height:0}
.story__card{background:#fff;border:1px solid var(--line,#e7e3da);border-radius:12px;padding:44px 48px;margin:0;box-shadow:0 18px 40px -26px rgba(30,40,50,.4);display:flex;flex-direction:column;justify-content:center}
.story__cardin{max-width:none;width:100%}
.story__title{font-weight:800;font-size:34px;letter-spacing:-.01em;color:var(--ink);margin:0 0 18px;line-height:1.12}
.story__card p{font-size:18px;line-height:1.7;color:var(--ink-2);margin:0 0 1.1rem}
.story__card p:last-of-type{margin-bottom:0}
.story__card p strong,.story__card p b{color:var(--ink)}
.story__body{font-size:18px;line-height:1.7;color:var(--ink-2)}
.story__more{display:inline-block;margin-top:4px;color:var(--accent,#E30022);font-weight:700;font-size:16.5px;text-decoration:none}
.story__more:hover{color:var(--accent-dark,#b00018);text-decoration:none}
.feature__eyebrow{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:0 0 18px}
.feature__rule{display:inline-block;width:34px;height:2px;background:var(--rust)}
.story--rev .story__row{grid-template-columns:1fr 1fr;padding:0 40px}
.story--rev .story__card{order:1;margin:0;padding:44px 48px}
.story--rev .story__cardin{margin-left:0;max-width:none;width:100%}
.story--rev .story__media{order:2}
.story__media .pg-figure__ph,.sec .pg-figure__ph{aspect-ratio:4/5;border:2px dashed var(--line);background:#fff;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:20px}
.pg-figure__ph-mark{font-size:32px;line-height:1;color:var(--rust);opacity:.55}
.pg-figure__ph-note{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-3);max-width:420px;line-height:1.5}
@media(max-width:900px){
	.story__row,.story--rev .story__row{grid-template-columns:1fr;gap:24px;padding:0 22px}
	.story__card,.story--rev .story__card{margin-right:0;margin-left:0;padding:32px 26px;border-radius:12px}
	.story__cardin,.story--rev .story__cardin{max-width:none}
	.story__media,.story--rev .story__media{order:0;max-width:380px;justify-self:center}
}

/* Numbered feature stages (numfeature) — reuses .story, adds a rust step badge */
.story--num .story__num{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rust,#a8552a);margin:0 0 16px}
.story--num .story__num span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--rust,#a8552a);color:#fff;font-size:16px;font-weight:800;letter-spacing:0;flex:0 0 auto}
.pg-numf__head h2{margin-top:0}

/* Pull quote (universal, so it renders styled on every page, not just guides) */
.sec--pullq{padding:34px 0}
.pullq{margin:0 auto;width:80%;max-width:80%}
.pullq__eyebrow{display:flex;align-items:flex-start;gap:12px;text-align:left;margin:0 0 26px;font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--rust,#a8552a)}
.pullq__mark{font-family:Georgia,'Times New Roman',serif;font-size:46px;line-height:.7;color:var(--rust,#a8552a);margin-top:2px}
.pullq__eyebrow-t{padding-top:8px}
.pullq__body{text-align:center;margin:0 auto 22px;max-width:none;font-weight:800;font-size:clamp(34px,6vw,64px);line-height:1.05;letter-spacing:-.02em;color:var(--ink,#1f1e1b)}
.pullq__attr{text-align:right;margin:0;font-weight:700;font-size:19px;color:var(--rust,#a8552a)}
.pullq__attr a{color:var(--rust,#a8552a);text-decoration:underline;text-underline-offset:3px}
.pullq__attr a:hover{color:var(--slate,#304452)}
@media(max-width:640px){.pullq{width:92%;max-width:92%}.pullq__body{font-size:clamp(28px,9vw,40px);max-width:none}}

/* ---- Universal render parts for the remaining builder blocks (clean, no off-white) ---- */
.sec--list .sec-list{font-size:18px;line-height:1.7;color:#34322c;max-width:none;margin:0;padding-left:1.3rem}
.sec--list .sec-list li{margin:0 0 .7rem}
.sec--list .sec-list--check{list-style:none;padding-left:0}
.sec--list .sec-list--check li{position:relative;padding-left:30px}
.sec--list .sec-list--check li:before{content:"\2713";position:absolute;left:0;top:0;color:var(--rust,#a8552a);font-weight:800}
.sec-pc__pros,.sec-pc__cons{list-style:none;margin:12px 0 0;padding:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.sec-pc__pros li,.sec-pc__cons li{position:relative;padding-left:24px;margin:0 0 6px}
.sec-pc__pros li:before{content:"\2713";position:absolute;left:0;color:#2f7a58;font-weight:800}
.sec-pc__cons li:before{content:"\2013";position:absolute;left:0;color:var(--rust,#a8552a);font-weight:800}
.sec-numf__row{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;margin:0 0 34px}
.sec-numf__row:nth-child(even){direction:rtl}
.sec-numf__row:nth-child(even) > *{direction:ltr}
.sec-numf__n{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;background:var(--slate,#304452);color:#fff;border-radius:50%;font-weight:800;font-size:18px;margin:0 0 14px}
.sec-numf__h{font-weight:800;font-size:22px;color:var(--ink);margin:0 0 10px}
@media(max-width:720px){.sec-numf__row{grid-template-columns:1fr}.sec-numf__row:nth-child(even){direction:ltr}}
.sec--overlay{position:relative;background-size:cover;background-position:center;min-height:420px;display:flex;align-items:center;border-radius:0;overflow:hidden;margin:34px 0}
.sec--overlay__scrim{position:absolute;inset:0}
.sec--overlay__in{position:relative;z-index:2;padding:60px 0}
.sec--overlay__eye{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.85;margin:0 0 16px}
.sec--overlay__body{color:#fff;font-weight:800;font-size:clamp(28px,4.5vw,52px);line-height:1.1;max-width:20ch}
.sec--overlay__body p{margin:0}
.sec--lead .sec-lead{background:var(--slate,#304452);color:#fff;border-radius:16px;padding:44px 48px;text-align:center}
.sec-lead__eye{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold,#e7c79c);margin:0 0 12px}
.sec-lead__h{font-weight:800;font-size:clamp(24px,3.4vw,34px);color:#fff;margin:0 0 12px}
.sec-lead__sub{color:rgba(255,255,255,.86);font-size:17px;line-height:1.6;max-width:60ch;margin:0 auto 18px}
.sec-lead__list{list-style:none;padding:0;margin:0 auto 22px;max-width:44ch;text-align:left;display:inline-block}
.sec-lead__list li{position:relative;padding-left:26px;margin:0 0 8px;color:rgba(255,255,255,.92)}
.sec-lead__list li:before{content:"\2713";position:absolute;left:0;color:var(--gold,#e7c79c);font-weight:800}
.sec-lead__note{color:rgba(255,255,255,.72);font-size:14px;margin:8px 0 0}

/* "Legend or fact?" callout inside long-read rich text (History of Colour etc.) */
.sec-rt .lf{background:#fff;border:1px solid var(--line,#e7e3da);border-left:4px solid var(--rust,#a8552a);border-radius:0 10px 10px 0;padding:15px 20px;margin:20px 0;font-size:16.5px;line-height:1.6;color:var(--ink-2,#5c5b55)}
.sec-rt .lf__tag{display:inline-block;font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:11.5px;color:var(--rust,#a8552a);margin-right:8px}
.sec-rt .lf a{color:var(--rust,#a8552a)}
/* comfortable reading measure for the history long-read headings */
.sec--rt .sec-rt h3{margin-top:1.6rem}
.sec--rt .sec-rt h4{margin-top:1.2rem;font-size:18px;color:var(--ink)}

/* "At a glance" fact panel used as a builder section (historical pigments etc.),
   styled to match the pigment Quick Facts look, scoped so it never touches the
   mill/brand hero version. */
.sec--glance .mill-glance{max-width:640px;background:#fff;border:1px solid var(--line,#e7e3da);border-radius:14px;padding:26px 30px;box-shadow:0 12px 30px -20px rgba(40,40,40,.18)}
.sec--glance .mill-glance__l{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink,#1f1e1b);margin:0 0 16px}
.sec--glance .mill-glance__grid{display:block}
.sec--glance .mill-fact{display:grid;grid-template-columns:150px 1fr;gap:6px 24px;font-size:17px;line-height:1.4;padding:9px 0;border-bottom:1px solid var(--line,#e7e3da)}
.sec--glance .mill-fact:last-child{border-bottom:0}
.sec--glance .mill-fact span:first-child{color:var(--ink-2,#5c5b55);font-weight:400}
.sec--glance .mill-fact span:last-child{color:var(--ink,#1f1e1b);font-weight:600}
@media(max-width:520px){.sec--glance .mill-fact{grid-template-columns:1fr;gap:2px;padding:8px 0}}

/* Empty image slots show nothing (no placeholder box); text runs full width. */
.pg-figure__ph,.sec-split__ph,.sec-banner__ph,.pg-ovl__ph{display:none!important}
.sec-split__media:not(:has(img)){display:none}
.sec-split__row:not(:has(img)){grid-template-columns:1fr}
.story__media:not(:has(img)){display:none}
.story__row:not(:has(img)){display:block}
.pg-rt-split__media:not(:has(img)){display:none}
.pg-rt-split:not(:has(img)){display:block}

/* Timeline + at-a-glance components, so they render on standard builder pages too. */
.sec--tl h2{text-align:center}
.mill-tl{margin:.7rem auto 1.5rem;max-width:840px}
.mill-tl__row{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:13px 0;border-top:1px solid var(--line,#e6e3dc)}
.mill-tl__row:first-child{border-top:none}
.mill-tl__y{font-weight:800;color:var(--rust,#a8552a);font-size:15px}
.mill-tl__t{font-size:18px;color:var(--ink-2,#3d3b37);line-height:1.55}
@media(max-width:560px){.mill-tl__row{grid-template-columns:1fr;gap:2px}}
.sec--glance{padding:6px 0 22px}
.mill-glance__l{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rust,#a8552a);display:block;margin-bottom:12px}
.mill-glance__grid{display:flex;flex-wrap:wrap;gap:16px 0}
.mill-fact{flex:1 1 30%;min-width:180px;display:flex;flex-direction:column;gap:3px;padding:2px 26px;border-left:1px solid var(--line,#e6e3dc)}
.mill-fact:nth-child(3n+1){border-left:0;padding-left:0}
.mill-fact span:first-child{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3,#8a887f)}
.mill-fact span:last-child{font-size:16px;font-weight:700;color:var(--ink,#211f1c)}
@media(max-width:640px){.mill-fact{flex:1 1 100%;border-left:0;padding-left:0}}


/* Native WP [gallery] inside a rich-text section: tidy responsive grid. */
.sec-rt .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:1.3rem 0 0}
.sec-rt .gallery br{display:none}
.sec-rt .gallery-item{width:auto!important;margin:0!important;float:none!important;padding:0!important}
.sec-rt .gallery-icon{margin:0}
.sec-rt .gallery-icon img{width:100%;height:auto;border:0!important;border-radius:10px;display:block}
@media(max-width:700px){.sec-rt .gallery{grid-template-columns:repeat(2,1fr)}}

/* ===== Reference gallery: responsive grid + lightbox ===== */
.sec--refgal .refgal{display:grid;gap:12px;margin-top:1.3rem;grid-template-columns:repeat(4,1fr)}
.refgal[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
.refgal[data-cols="5"]{grid-template-columns:repeat(5,1fr)}
.refgal__cell{padding:0;border:1px solid var(--line,#e7e3da);border-radius:12px;overflow:hidden;background:#fff;cursor:zoom-in;line-height:0;transition:transform .15s ease,box-shadow .15s ease}
.refgal__cell:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(20,24,28,.5)}
.refgal__cell img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.refgal__cell:focus-visible{outline:2px solid var(--rust,#a8552a);outline-offset:2px}
@media(max-width:900px){.sec--refgal .refgal{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:560px){.sec--refgal .refgal{grid-template-columns:repeat(2,1fr)!important}}
.refgal-lb{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:rgba(15,18,22,.92);padding:24px}
.refgal-lb[hidden]{display:none}
.refgal-lb__stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.refgal-lb__img{max-width:92vw;max-height:82vh;width:auto;height:auto;border-radius:10px;box-shadow:0 20px 60px -20px rgba(0,0,0,.8)}
.refgal-lb__cap{color:rgba(255,255,255,.85);font-size:14px;text-align:center;max-width:60ch}
.refgal-lb__x{position:absolute;top:14px;right:20px;background:none;border:0;color:#fff;font-size:36px;line-height:1;cursor:pointer}
.refgal-lb__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;color:#fff;font-size:32px;width:52px;height:52px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.refgal-lb__nav:hover{background:rgba(255,255,255,.22)}
.refgal-lb__prev{left:16px}.refgal-lb__next{right:16px}
@media(max-width:560px){.refgal-lb__nav{width:44px;height:44px;font-size:26px}}

/* Reference gallery PAIR mode: photo stacked directly over its outline. */
.sec--refgal .refgal--pairs{grid-template-columns:repeat(4,1fr)}
.refgal--pairs[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
.refgal--pairs[data-cols="5"]{grid-template-columns:repeat(5,1fr)}
.refgal__pair{display:flex;flex-direction:column;gap:12px;min-width:0}
@media(max-width:900px){.sec--refgal .refgal--pairs{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:520px){.sec--refgal .refgal--pairs{grid-template-columns:1fr!important}}