/* =====================================================================
   HOME — the trust band
   =====================================================================
   A strip of paper between the hero and "What We Actually Do": heading on
   the left, a thin rule, eight platform wordmarks in one row, and a torn
   scrap on the right carrying a handwritten note. Measured off the owner's
   comp at 3x (1670px wide), then given a little more air top and bottom and
   turned from cream to white at the owner's request.

   Its foot needs no tear of its own: the slate section below draws a torn
   edge down over itself (.bld__tear), in this band's colour.

   Scoped to .trs: nothing here reaches any other section or page.
   ===================================================================== */

.trs{
	--trs-ink:#16181C;
	--trs-mark:#2B2A28;
	--trs-orange:#F2600C;
	--trs-display:'Archivo','Space Grotesk','Inter',system-ui,sans-serif;
	--trs-body:'DM Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
	--trs-hand:'Caveat','Segoe Script',cursive;
	--trs-scrap-w:clamp(170px,12.2vw,230px);
	/* The scrap's torn edge — generated by _scrap.py (fixed seed). */
	--trs-scrap:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M14.0 2.4 L21.9 1.8 L28.5 1.4 L37.5 1.0 L42.2 0.9 L47.5 1.1 L52.8 0.4 L58.5 1.1 L65.3 0.2 L69.7 0.2 L76.4 0.4 L84.1 0.8 L90.1 0.1 L97.8 0.8 L100.0 0.0 L100.0 100.0 L100.0 98.4 L93.5 97.7 L84.3 98.0 L74.6 99.4 L66.8 98.2 L57.8 99.0 L52.1 98.4 L46.6 98.2 L41.6 98.9 L34.2 99.7 L26.8 98.7 L19.9 97.8 L10.6 97.8 L2.3 100.0 L1.7 98.3 L4.9 90.8 L3.0 88.8 L10.1 83.3 L9.9 81.4 L2.5 74.3 L1.0 71.8 L3.1 64.8 L0.9 62.5 L2.2 55.8 L1.9 53.9 L3.9 50.3 L2.8 48.1 L8.8 44.6 L10.7 42.1 L9.1 39.2 L9.8 37.7 L9.2 31.9 L11.4 29.0 L8.5 23.5 L10.8 21.7 L2.7 15.5 L4.0 13.0 L4.2 9.2 L4.3 6.6 L10.0 2.0 Z' fill='black'/></svg>");

	position:relative;
	z-index:4;                  /* the scrap hangs down over the slate below */
	isolation:isolate;
	color:var(--trs-ink);
	/* White, with the faintest trace of the paper texture left in it so it
	   still reads as a sheet rather than a fill. Its base matches the torn
	   edge the slate section draws below it. */
	background-color:#FFFFFF;
	background-image:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)),var(--trs-paper, none);
	background-size:auto,620px auto;
	padding:clamp(30px,2.3vw,42px) 0 clamp(20px,1.5vw,28px);
}

/* Layout, from the comp: 100px margin, the heading, a rule at 381px, the
   marks from 428px to 1411px, the scrap from ~1470px to the edge. */
.trs__inner{
	position:relative;
	z-index:2;
	max-width:1680px;
	margin-inline:auto;
	padding-left:clamp(20px,6vw,104px);
	/* the scrap's room: its own width plus a gap, so the marks never run under it */
	padding-right:calc(var(--trs-scrap-w) + clamp(24px,3vw,56px));
	display:grid;
	grid-template-columns:auto auto minmax(0,1fr);
	align-items:center;
	column-gap:clamp(20px,2.8vw,48px);
}

/* ---- heading ---- */

.trs__label{
	display:flex;
	align-items:center;
	gap:clamp(12px,.95vw,16px);
	margin:0 0 clamp(6px,.42vw,8px);
	font-family:var(--trs-body);
	font-size:clamp(9.5px,.63vw,11.5px);
	font-weight:500;
	letter-spacing:.27em;
	text-transform:uppercase;
	color:#2E2D2A;
}
.trs__label::before{
	content:"";
	width:clamp(22px,1.85vw,32px);
	height:2px;
	background:var(--trs-orange);
	flex:none;
}

.trs__title{
	margin:0;
	font-family:var(--trs-display);
	font-size:clamp(26px,2.25vw,40px);  /* 37.5px at 1670: the comp's 25px cap */
	font-weight:800;
	line-height:.96;
	letter-spacing:-.03em;
	color:var(--trs-ink);
	white-space:nowrap;
}
.trs__title em{font-style:normal;color:var(--trs-orange)}

/* the thin vertical rule between the heading and the marks */
.trs__rule{
	width:1.5px;
	height:clamp(32px,2.7vw,46px);
	background:#3A3833;
	opacity:.85;
	margin-top:clamp(6px,.5vw,10px);
}

/* ---- the marks ----
   One row, spread across the space like the comp. Each mark keeps the width
   measured off the comp (--w, px at 1670 wide), scaled with the viewport. */
.trs__marks{
	list-style:none;
	margin:clamp(6px,.5vw,10px) 0 0;
	padding:0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:clamp(14px,1.6vw,30px);
}
.trs__marks li{flex:none;display:flex;align-items:center}
.trs__marks img{
	display:block;
	width:calc(var(--w) / 1670 * 100vw);
	min-width:calc(var(--w) * .55px);
	max-width:calc(var(--w) * 1.1px);
	height:auto;
	opacity:.92;
	transition:opacity .2s ease;
}
.trs__marks li:hover img{opacity:1}
/* shown only until a mark has been fetched and cached (see the template) */
.trs__name{
	font-family:var(--trs-display);
	font-size:clamp(14px,1.05vw,18px);
	font-weight:800;
	letter-spacing:-.02em;
	color:var(--trs-mark);
	white-space:nowrap;
}

/* ---- the scrap of paper on the right ----
   Torn along its left edge, running off the page on the right, with a soft
   shadow where it lifts off the band. */
.trs__scrap{
	position:absolute;
	z-index:3;
	top:clamp(6px,.6vw,12px);
	bottom:calc(-1 * clamp(14px,1.5vw,28px));   /* hangs ~25px into the slate, as in the comp */
	right:0;
	width:var(--trs-scrap-w);
	filter:drop-shadow(-.35vw .2vw .55vw rgba(30,30,30,.18));
	pointer-events:none;
}
.trs__scrap::before{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(105deg,#FFFFFF 0%,#FAFAF8 60%,#F4F3F0 100%);
	-webkit-mask:var(--trs-scrap) no-repeat center/100% 100%;
	mask:var(--trs-scrap) no-repeat center/100% 100%;
}
.trs__scrap p{
	position:absolute;
	left:22%;
	top:50%;
	margin:0;
	font-family:var(--trs-hand);
	font-size:clamp(16px,1.2vw,21px);
	font-weight:500;
	line-height:1.02;
	color:#26221E;
	transform:translateY(-52%) rotate(-15deg);
	white-space:nowrap;
}
.trs__scrap span{display:block}
.trs__scrap span:nth-child(2){margin-left:.95em}
.trs__scrap span:nth-child(3){margin-left:.95em}
.trs__scrap span:nth-child(4){margin-left:1.75em}
/* the orange double scribble under "Results." */
.trs__hit{position:relative}
.trs__hit::after{
	content:"";
	position:absolute;
	left:-.1em;
	bottom:-.42em;
	width:4.6em;
	height:.42em;
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M4 18 C 60 12, 120 7, 196 3' fill='none' stroke='%23F2600C' stroke-width='5' stroke-linecap='round'/><path d='M26 22 C 80 17, 130 12, 180 9' fill='none' stroke='%23F2600C' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat center/100% 100%;
}

/* ------------------------------------------------------------ RESPONSIVE */

@media (max-width:1280px){
	/* Eight marks no longer fit one row beside the heading at their comp
	   sizes. Two even rows of four, never a row with one mark left over. */
	.trs__marks{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;align-items:center;column-gap:clamp(18px,2.6vw,36px);row-gap:clamp(18px,1.9vw,26px)}
	.trs__marks img{width:calc(var(--w) * .82px);min-width:0}
}

@media (max-width:900px){
	/* Heading above, the marks below; the scrap goes — at this width it can
	   only sit on top of the marks. */
	.trs{padding-bottom:30px}
	.trs__inner{grid-template-columns:1fr;row-gap:20px;padding-inline:clamp(20px,4vw,48px)}
	.trs__rule{display:none}
	.trs__marks{margin-top:0;max-width:640px}
	.trs__scrap{display:none}
}

@media (max-width:560px){
	.trs__marks{column-gap:14px;row-gap:18px}
	.trs__marks img{width:calc(var(--w) * .7px)}
}

/* ------------------------------------------------- RETIRING THE OLD BAND
   The hero template (template-parts/home-hero-v2.php) still renders the
   previous band, .trust-v2. This one replaces it, so the old one is hidden
   here rather than cut out of the PHP — removing this rule brings it back.
   This stylesheet loads after home-v2.css, which is what lets the rule win. */
.trust-v2{display:none}