/* Front page — generated from AI/05-design-prototype/concept-homepage.html */

  :root{
    --paper:#FBFAF8; --white:#fff; --ink:#1A1714; --ink-2:#3D3833; --muted:#7A736A;
    --line:#ECE8E1; --line-2:#DDD7CC; --brass:#9A7B3F; --brass-tint:#F6F1E6;
    --teal:#2E5D57; --teal-tint:#EAF1EF; --cream:#F4EEE4; --accent:#2A332E;
    --r:4px; --r-lg:10px; --maxw:1240px;
    --shadow-sm:0 1px 2px rgba(26,23,20,.05); --shadow:0 18px 44px rgba(26,23,20,.13);
    --shadow-hero:0 26px 70px rgba(0,0,0,.32);
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--white);color:var(--ink);font-family:"Manrope",system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
  h1,h2,h3,.disp{font-family:"Fraunces",Georgia,serif;font-weight:500;letter-spacing:-.015em;line-height:1.08;margin:0}
  img{max-width:100%;display:block}
  button{font-family:inherit;cursor:pointer}
  a{color:inherit}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:700;margin:0 0 10px}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
  .sec-head h2{font-size:32px}
  .sec-head .more{font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap;border-bottom:1.5px solid var(--line-2);padding-bottom:2px}
  .sec-head .more:hover{border-color:var(--ink)}

  /* ---------- hero (photoreal, rotating rooms) ---------- */
  .hero{position:relative;min-height:86vh;overflow:hidden;background:#15110c;color:var(--cream)}
  .stage{position:absolute;inset:0;z-index:0}
  .face{position:absolute;inset:0;background-size:cover;background-position:center}
  .face.anim{transition:clip-path .85s cubic-bezier(.62,0,.25,1)}
  .accentbg{position:absolute;inset:0;z-index:1;background:var(--accent);transition:background-color 1s ease;clip-path:polygon(0 0, 520px 0, 520px 100%, 0 100%)}
  .panel{position:absolute;left:0;top:0;bottom:0;z-index:4;width:520px;display:flex;flex-direction:column;justify-content:center;padding:50px 34px 56px 50px}
  .brandline{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,238,228,.6);font-weight:700;margin-bottom:20px}
  .hero h1{font-size:clamp(38px,3.7vw,58px);max-width:8ch;font-weight:400;color:var(--cream)}
  .hero h1 em{font-style:italic}
  .sub{font-size:15.5px;line-height:1.55;color:rgba(244,238,228,.8);margin:18px 0 24px;max-width:28ch}
  .ctas{display:flex;gap:11px;flex-wrap:wrap}
  .btn{border:0;border-radius:100px;font-weight:700;font-size:14.5px;padding:14px 23px;display:inline-flex;align-items:center;gap:9px;transition:transform .12s;text-decoration:none}
  .btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}
  .btn-solid{background:var(--cream);color:var(--ink)}.btn-solid:hover{transform:translateY(-1px)}
  .btn-out{background:transparent;color:var(--cream);border:1.5px solid rgba(244,238,228,.45)}.btn-out:hover{border-color:var(--cream)}
  .browse{margin-top:26px}
  .browse .cap{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,238,228,.6);font-weight:700;margin-bottom:11px;display:flex;align-items:center;gap:9px}
  .browse .cap .live{width:7px;height:7px;border-radius:50%;background:#E8C887;animation:live 2s infinite}
  @keyframes live{0%{box-shadow:0 0 0 0 rgba(232,200,135,.5)}70%{box-shadow:0 0 0 7px rgba(232,200,135,0)}100%{box-shadow:0 0 0 0 rgba(232,200,135,0)}}
  .thumbs{display:flex;gap:8px;flex-wrap:wrap;max-width:300px}
  .thumb{width:56px;aspect-ratio:1/1;height:auto;border-radius:4px;overflow:hidden;border:1px solid var(--line-2);padding:0;background:none;box-shadow:0 4px 12px rgba(0,0,0,.34);transition:transform .15s,border-color .2s,box-shadow .2s}
  .thumb img{width:100%;height:100%;object-fit:cover}
  .thumb:hover{transform:translateY(-3px)}.thumb[aria-current="true"]{border-color:var(--cream);box-shadow:0 0 0 1px var(--cream),0 4px 12px rgba(0,0,0,.34)}
  .trust{margin-top:22px;display:flex;gap:15px;flex-wrap:wrap;font-size:12px;color:rgba(244,238,228,.6)}
  .trust span{display:inline-flex;align-items:center;gap:7px}.trust b{color:rgba(244,238,228,.88)}.trust .star{color:#E8C887}
  .progress{position:absolute;left:0;top:0;height:3px;background:#E8C887;z-index:6;width:0}
  .tag{position:absolute;right:24px;bottom:24px;z-index:6;background:rgba(251,247,240,.96);backdrop-filter:blur(8px);border-radius:14px;padding:13px 15px;display:flex;gap:15px;align-items:center;box-shadow:var(--shadow-hero);min-width:228px;text-decoration:none}
  .tag .room{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8a7f6f;font-weight:700}
  .tag .nm{font-family:"Fraunces";font-size:20px;font-weight:500;color:var(--ink);margin-top:1px}
  .tag .pr{font-size:12.5px;color:#5c544a;font-weight:600;margin-top:2px}
  .tag .go{margin-left:auto;width:42px;height:42px;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex:none}
  .tag .go svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.9}.tag:hover .go{background:var(--accent)}

  /* ---------- USP strip ---------- */
  .usps{background:var(--paper);border-bottom:1px solid var(--line)}
  .usps .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:22px 24px}
  .usp{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.45}
  .usp svg{width:20px;height:20px;stroke:var(--brass);fill:none;stroke-width:1.6;flex:none;margin-top:1px}
  .usp b{display:block;color:var(--ink)}

  /* ---------- shop by style tiles ---------- */
  .styles{padding:96px 0 20px}
  .stygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .sty{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;display:block;text-decoration:none;border:1px solid var(--line);background:var(--paper)}
  .sty img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .sty:hover img{transform:scale(1.05)}
  .sty .lb{position:absolute;left:12px;bottom:12px;background:rgba(26,23,20,.82);color:#fff;font-size:13px;font-weight:600;padding:8px 14px;border-radius:100px;backdrop-filter:blur(5px)}
  .sty.all{display:flex;align-items:center;justify-content:center;background:var(--brass-tint);border:1.5px dashed var(--line-2)}
  .sty.all span{font-family:"Fraunces";font-size:20px;color:var(--ink)}

  /* ---------- colour spectrum shelf ---------- */
  .colours{padding:56px 0 96px}
  .shelf{display:flex;gap:6px;height:340px;border-radius:var(--r-lg);overflow:hidden}
  .slat{position:relative;flex:1;min-width:0;background-size:cover;background-position:center;text-decoration:none;transition:flex .5s cubic-bezier(.6,0,.3,1);overflow:hidden}
  .slat:hover,.slat:focus-visible{flex:2.7}
  .slat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,16,12,.72))}
  .slat .cap{position:absolute;left:0;right:0;bottom:14px;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:13px;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.55);white-space:nowrap}
  .slat .cap i{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);flex:none}
  @media (max-width:900px){
    .shelf{flex-wrap:wrap;height:auto;gap:10px;border-radius:0;overflow:visible}
    .slat{flex:0 0 calc(33.33% - 7px);aspect-ratio:3/4;border-radius:var(--r-lg)}
    .slat:hover{flex:0 0 calc(33.33% - 7px)}
  }

  /* ---------- new in ---------- */
  .newin{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:90px 0 96px}
  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 20px}
  .card{text-decoration:none;display:flex;flex-direction:column}
  .card .imgwrap{position:relative;aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
  .card .imgwrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .card:hover .imgwrap img{transform:scale(1.05)}
  .card .nm{font-family:"Fraunces";font-size:18px;font-weight:500;margin-top:12px;color:var(--ink)}
  .card .pr{font-size:14.5px;font-weight:600;color:var(--ink-2);margin-top:3px}
  .card .pr .unit{color:var(--muted);font-weight:500;font-size:12.5px}

  /* ---------- murals band ---------- */
  .murals{background:var(--teal);color:#f0f4f2;overflow:hidden}
  .murals .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center;padding-top:96px;padding-bottom:96px}
  .murals .eyebrow{color:#bcd4cd}
  .murals h2{font-size:36px;color:#fff;max-width:14ch}
  .murals p{color:rgba(240,244,242,.85);max-width:44ch;font-size:15.5px}
  .murals .btn-solid{background:#fff;color:var(--teal)}
  .murimg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .murimg img{border-radius:var(--r-lg);aspect-ratio:3/4;object-fit:cover;width:100%}
  .murimg img:last-child{margin-top:26px}

  /* ---------- calculator promo ---------- */
  .calcpromo{border-bottom:1px solid var(--line)}
  .calcpromo .wrap{display:flex;gap:18px;align-items:center;padding-top:38px;padding-bottom:38px;flex-wrap:wrap}
  .calcpromo .ic{width:44px;height:44px;border-radius:10px;background:var(--ink);display:grid;place-items:center;flex:none}
  .calcpromo .ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.7}
  .calcpromo b{font-family:"Fraunces";font-size:17px;font-weight:600;display:block}
  .calcpromo span{font-size:13.5px;color:var(--muted)}
  .calcpromo a{margin-left:auto;font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap}

  /* ---------- trusted by ---------- */
  .trusted{padding:90px 0 96px;text-align:center}
  .trusted h2{font-size:26px}
  .trusted .revline{font-size:14px;color:var(--muted);margin:10px 0 26px}
  .trusted .revline .star{color:var(--brass)}
  .builders{display:flex;gap:14px 40px;justify-content:center;flex-wrap:wrap;font-family:"Fraunces";font-size:19px;color:var(--muted);letter-spacing:.01em}
  .projects{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:left}
  .proj{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:21/9;display:block;text-decoration:none;background:var(--ink)}
  .proj img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .5s}
  .proj:hover img{transform:scale(1.04)}
  .proj .cap{position:absolute;left:18px;bottom:16px;color:#fff}
  .proj .cap .e{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.8}
  .proj .cap .t{font-family:"Fraunces";font-size:22px;text-shadow:0 1px 10px rgba(0,0,0,.5)}

  /* ---------- advice ---------- */
  .advice{background:var(--paper);border-top:1px solid var(--line);padding:90px 0 96px}
  .advgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .adv{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 24px 22px;text-decoration:none;box-shadow:var(--shadow-sm);transition:box-shadow .2s, transform .2s}
  .adv:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
  .adv .t{font-family:"Fraunces";font-size:20px;font-weight:500;margin:8px 0 8px;color:var(--ink)}
  .adv p{font-size:14px;color:var(--ink-2);margin:0 0 14px}
  .adv .go{font-size:13.5px;font-weight:700;color:var(--brass)}

  /* ---------- newsletter ---------- */
  .news{border-top:1px solid var(--line)}
  .news .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding-top:80px;padding-bottom:84px}
  .news h2{font-size:26px;max-width:18ch}
  .news p{font-size:14px;color:var(--muted);max-width:44ch}
  .newsform{display:flex;gap:10px}
  .newsform input{flex:1;min-height:50px;border:1.5px solid var(--line-2);border-radius:var(--r);padding:0 16px;font-family:inherit;font-size:15px}
  .newsform input:focus{outline:2px solid var(--brass);border-color:var(--brass)}
  .newsform button{background:var(--ink);color:#fff;border:0;border-radius:var(--r);font-weight:700;font-size:15px;padding:0 22px}

  /* footer moved to the theme-wide bsc footer (bsc-product.css) */

  /* ---------- responsive ---------- */
  @media (max-width:1080px){ .hero h1{max-width:10ch}
    .sub{max-width:30ch}
    .stygrid,.grid4{grid-template-columns:repeat(2,1fr)}
    .usps .wrap{grid-template-columns:repeat(2,1fr)}
    .advgrid{grid-template-columns:1fr}
    .murals .wrap,.news .wrap{grid-template-columns:1fr}
    .projects{grid-template-columns:1fr}
  }
  @media (max-width:900px){
    nav.main{display:none}
    .hero{display:flex;flex-direction:column;min-height:0}
    .stage{position:relative;inset:auto;width:100%;height:46vh;min-height:300px}
    .accentbg{display:none}
    .panel{position:relative;inset:auto;width:100%;background:var(--accent);padding:30px 26px 36px;justify-content:flex-start}
    .tag{right:14px;left:auto;bottom:auto;top:calc(46vh + 118px);transform:translateY(-100%)}
  }
  @media (max-width:600px){
    .stage{height:38vh;min-height:240px}
    .hero h1{font-size:clamp(27px,7vw,34px)}
    .sub{font-size:14px}
    .stygrid,.grid4{gap:12px}
    .search{display:none}
  }
  @media (prefers-reduced-motion:reduce){.face.anim{transition:none}.progress,.live{display:none}}

/* Term names come from the DB in mixed case; present them consistently */
.sty .lb, .slat .cap { text-transform: capitalize; }

/* Mobile hero nav (client pass 15/07/2026): keep the "on the wall now"
   chip visible and compact over the photo, and run the square thumbs as
   a horizontally scrollable rail. A phone buyer can see the current
   wallpaper's name and tap through to the product. */
@media (max-width: 700px) {
	.tag {
		left: auto;
		right: 12px;
		top: 204px; /* stage is a fixed 216px below 700px; chip sits 12px above its bottom edge */
		bottom: auto;
		transform: translateY(-100%);
		min-width: 0;
		max-width: calc(100% - 24px);
		padding: 9px 12px;
		gap: 10px;
		border-radius: 10px;
	}
	.tag .room {
		font-size: 9.5px;
	}
	.tag .nm {
		font-size: 16px;
	}
	.tag .pr {
		font-size: 11.5px;
	}
	.tag .go {
		width: 32px;
		height: 32px;
	}
	.tag .go svg {
		width: 15px;
		height: 15px;
	}
	.thumbs {
		flex-wrap: nowrap;
		max-width: none;
		overflow-x: auto;
		gap: 8px;
		padding: 2px 2px 8px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.thumbs::-webkit-scrollbar {
		display: none;
	}
	.thumb {
		width: 48px;
		flex: none;
	}
}

/* ============================================================
   Mobile pass 10/07/2026 — 375x667 (iPhone SE) audit.
   Hero above-the-fold + section rhythm. Overrides only; desktop
   rules above are untouched.
   ============================================================ */
@media (max-width: 700px) {
	/* --- Hero: CTAs must land above the fold (~530px of hero) --- */
	.stage {
		height: 200px; /* fixed px: vh is unreliable on mobile URL-bar chrome */
		min-height: 0;
	}
	.panel {
		padding: 12px 20px 16px;
	}
	.brandline {
		margin-bottom: 6px;
		font-size: 10px;
		letter-spacing: 0.16em; /* one line at 375px */
	}
	/* Wallpaper switcher on the coloured panel (client pass 27/07 v2):
	   single scrollable rail below the CTAs with air around it; the name
	   chip sits low in the photo's corner. */
	.browse {
		margin: 16px 0 2px;
	}
	.browse .cap {
		display: none; /* caption wraps to two lines at 375px; the rail explains itself */
	}
	.sub {
		margin: 10px 0 16px;
	}
	.tag {
		top: 188px; /* 12px above the 200px stage's bottom edge */
	}
	.trust {
		margin-top: 14px;
	}
	.trust span:last-child {
		display: none; /* "Ships Australia-wide" wraps to a lone line here and the USP strip below repeats it */
	}
	.hero h1 {
		font-size: 26px;
	}
	.sub {
		font-size: 14px;
		margin: 10px 0 14px;
		max-width: 32ch;
	}
	.ctas {
		gap: 10px;
	}
	.ctas .btn {
		padding: 12px 19px; /* ~44px tall, still a solid tap target */
	}
	.browse {
		margin-top: 20px;
	}
	.browse .cap {
		margin-bottom: 9px;
	}
	.trust {
		margin-top: 16px;
	}

	/* --- Section rhythm: 90-96px desktop verticals down to 48-64px --- */
	.sec-head {
		margin-bottom: 18px;
	}
	.sec-head h2 {
		font-size: 24px;
	}
	.usps .wrap {
		grid-template-columns: 1fr 1fr;
		gap: 14px 12px;
		padding: 18px 20px;
	}
	.usp {
		font-size: 12.5px;
	}
	.styles {
		padding: 52px 0 10px;
	}
	.colours {
		padding: 32px 0 56px;
	}
	.newin {
		padding: 52px 0 56px;
	}
	.murals .wrap {
		padding-top: 56px;
		padding-bottom: 60px;
		gap: 30px;
	}
	.murals h2 {
		font-size: 26px;
	}
	.murimg {
		gap: 12px;
	}
	.calcpromo .wrap {
		padding-top: 26px;
		padding-bottom: 26px;
		gap: 14px;
	}
	.trusted {
		padding: 52px 0 56px;
	}
	.trusted h2 {
		font-size: 22px;
	}
	.trusted .revline {
		margin: 8px 0 20px;
	}
	.builders {
		font-size: 17px;
		gap: 10px 24px;
	}
	.projects {
		margin-top: 24px;
		gap: 14px;
	}
	.advice {
		padding: 52px 0 56px;
	}
	.advgrid {
		gap: 14px;
	}
	.adv {
		padding: 20px 18px 18px;
	}
	.news .wrap {
		padding-top: 44px;
		padding-bottom: 48px;
		gap: 18px;
	}
	.news h2 {
		font-size: 22px;
	}
}

/* Mobile pass 10/07/2026 (2): starter style.css gives the unclassed
   homepage <main> a 10px gutter at 600px; the bands must run full-bleed.
   Plus small-width content fixes found on the 375px walk. */
@media (max-width: 700px) {
	body.home main,
	body.blog main {
		padding: 0;
	}
	/* newsletter grid: form min-content was forcing the 1fr track wider
	   than the wrap (text clipped at the right edge) */
	.news .wrap > * {
		min-width: 0;
	}
	.newsform input {
		min-width: 0;
	}
	/* colour slat captions: long names ("Off White / White") were clipped
	   by white-space:nowrap on narrow slats */
	.slat .cap {
		white-space: normal;
		text-align: center;
		padding: 0 6px;
		font-size: 12px;
		line-height: 1.25;
	}
	/* project cards: eyebrow and title were flowing on one line */
	.proj .cap {
		left: 14px;
		bottom: 12px;
		right: 14px;
	}
	.proj .cap .e {
		display: block;
	}
	.proj .cap .t {
		font-size: 19px;
	}
}

/* Hero text at phone width: heading flows as natural phrases (no forced
 * break), sub tighter, both CTAs on one line with the shorter labels */
@media (max-width: 700px) {
	.hero .panel h1 br {
		display: none;
	}
	.hero .panel h1 {
		font-size: clamp(15px, 5.2vw, 20px); /* sized so the full line fits 375px */
		letter-spacing: -0.01em;
		white-space: nowrap;
		max-width: none;
	}
	.hero .panel .sub {
		font-size: 14px;
		line-height: 1.5;
	}
	.hero .ctas {
		flex-wrap: nowrap;
		gap: 8px;
	}
	.hero .ctas .btn {
		font-size: 13.5px;
		padding: 12px 14px;
		white-space: nowrap;
		flex: none;
	}
}

/* ---------- Hub guide grid ---------- */
.bsc-postgrid__wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.bsc-postgrid { margin: 10px 0 40px; font-family: "Manrope", system-ui, sans-serif; }
.bsc-postgrid__h { font-size: 28px; margin: 0 0 20px; }
.bsc-postgrid__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bsc-postgrid__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s; }
.bsc-postgrid__card:hover { box-shadow: 0 10px 30px rgba(33,29,24,.12); transform: translateY(-2px); }
.bsc-postgrid__img { display: block; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--line); }
.bsc-postgrid__cat { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); font-weight: 700; padding: 14px 16px 0; }
.bsc-postgrid__t { font-family: "Fraunces", Georgia, serif; font-size: 18px; font-weight: 600; line-height: 1.25; padding: 6px 16px 0; }
.bsc-postgrid__x { font-size: 13.5px; line-height: 1.55; color: var(--muted); padding: 8px 16px 18px; }
.bsc-postgrid__pages { display: flex; justify-content: center; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
.bsc-postgrid__pages .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border: 1.5px solid var(--line-2); border-radius: 4px; font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; }
.bsc-postgrid__pages .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }
.bsc-postgrid__pages a.page-numbers:hover { border-color: var(--ink); }
@media (max-width: 900px) { .bsc-postgrid__grid { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (max-width: 560px) { .bsc-postgrid__grid { grid-template-columns: 1fr; } .bsc-postgrid__wrap { padding: 0 16px; } }

/* ---- Trusted block v2 (client pass 27/07): greyed logo marquee +
   featured-projects sub-section + two-line project captions ---- */
.trusted .logos {
	overflow: hidden;
	margin: 30px auto 8px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trusted .logos__track {
	display: flex;
	align-items: center;
	gap: 58px;
	width: max-content;
	animation: bsc-logo-scroll 45s linear infinite;
}
.trusted .logos:hover .logos__track {
	animation-play-state: paused;
}
.trusted .logos__track img {
	height: 62px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter 0.2s, opacity 0.2s;
}
.trusted .logos__track img:hover {
	filter: none;
	opacity: 1;
}
@keyframes bsc-logo-scroll {
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.trusted .logos__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
	.trusted .logos__track img:nth-child(n+12) { display: none; } /* hide the duplicated run */
}
@media (max-width: 700px) {
	.trusted .logos__track { gap: 34px; }
	.trusted .logos__track img { height: 44px; }
}

/* Featured projects get their own header inside the band */
.trusted .sec-head--feat {
	margin: 44px 0 22px;
	text-align: left;
}
.trusted .sec-head--feat h2 {
	font-size: 28px;
}

/* Project card captions: eyebrow and title on two lines, everywhere */
.trusted .proj .cap .e {
	display: block;
	margin-bottom: 3px;
}