/*
* Twin Creek Media brand stylesheet
*
* Hand-written CSS for the site chrome and brand utility classes.
* Previously stored inside the Bricks theme style in the database; moved to a
* real file so it is diffable, lintable and reviewable in git.
*
* Design tokens (--tcm-*) are NOT here: they stay in Bricks Global Variables so
* they remain pickable in the builder UI. This file consumes them.
*
* NOTE: Bricks sets html{font-size:62.5%}, so 1rem = 10px, not 16px.
*/
/* ---- Fonts: always from the --tcm-font-* tokens ------------------------
Fonts are set HERE, from the three tokens, and nowhere else. Element settings
in Bricks must not name a font: Bricks writes its font field as a quoted
string, so it cannot hold var(--tcm-font-*), and a font named per element is
a font that has to be found and changed element by element. The theme style
carries sizes and weights only.
The defaults cover almost everything - body text is the body face, headings
are the display face, h3 is the script (the Figma type scale), h4 is body.
Where an element needs a different face than it would inherit, give it one
of the Twin Creek global classes in the builder: tcm-font-display,
tcm-font-body or tcm-font-script. The fonts are requested in functions.php. */
body{font-family:var(--tcm-font-body)}
h1,h2,h5,h6{font-family:var(--tcm-font-display)}
h3{font-family:var(--tcm-font-script)}
h4{font-family:var(--tcm-font-body)}
button,input,select,textarea{font-family:inherit}
.tcm-font-display{font-family:var(--tcm-font-display)}
.tcm-font-body{font-family:var(--tcm-font-body)}
.tcm-font-script{font-family:var(--tcm-font-script)}
/* ---- TCM brand utility text styles (Figma Style Guide) ---- */
.tcm-eyebrow{font-family:var(--tcm-font-body);font-size:var(--tcm-eyebrow);letter-spacing:var(--tcm-track-eyebrow);text-transform:uppercase;line-height:1.1;font-weight:400}
/* Section eyebrows in page content (2026-09-24 redesign): a small label
that names the section, 10px above its heading. The 2.4rem Style Guide
size read as a second heading. Each eyebrow and the heading it labels sit
in a "Heading group" div (.tcm-headgroup), so the gap is the same on every
page whatever the spacing of the section around it. Use an eyebrow only
when it says something the heading doesn't. The footer tagline keeps the
Style Guide size (its own rule below). */
#brx-content .tcm-eyebrow{font-size:1.5rem;font-weight:500;letter-spacing:.16em;line-height:1.3;margin:0}
.tcm-headgroup{display:flex;flex-direction:column;gap:10px;width:100%}
.tcm-headgroup > *{margin-top:0 !important;margin-bottom:0 !important}
.tcm-callout{font-family:var(--tcm-font-body);font-size:var(--tcm-callout);letter-spacing:var(--tcm-track-callout);text-transform:uppercase;line-height:1.1;font-weight:600}
.tcm-subtext{font-family:var(--tcm-font-body);font-size:var(--tcm-subtext);line-height:1.71}
.tcm-h7{font-family:var(--tcm-font-body);font-size:var(--tcm-h7);line-height:1.2}
.tcm-script{font-family:var(--tcm-font-script);font-size:var(--tcm-h3-script);line-height:1.1}
.tcm-script-xl{font-family:var(--tcm-font-script);font-size:var(--tcm-h1-script);line-height:1.1}
.tcm-shadow{box-shadow:var(--tcm-shadow)}
.tcm-bg-primary-tint{background-color:var(--tcm-primary-tint)}
.tcm-bg-forest-tint{background-color:var(--tcm-forest-tint)}
/* ---- Paper ---------------------------------------------------------------
One texture, tiled, shared by the map band and the Why grid. The tile is the
Figma parchment mirrored into a 2x2 block: seamless by construction, with no
edge matching to get wrong, and on a grain this fine the symmetry is
invisible. Measured across the join, 0.00 difference against 1.11 between two
random interior columns of the same image.
The tone comes from the colour underneath rather than from the file, so it
can be retuned in one place without re-exporting anything: --tcm-paper,
the ground the texture multiplies into, is a Bricks global variable, so it
is pickable in the builder. Only the tile lives here, because its url() is relative to this
file. */
:root{
--tcm-paper-tile:url("../brand/paper-tile.jpg");
/* The orange brush stroke: the link underline and the headline swoop are the
same mark, so it is defined once. A static tapered path, stretched to fit. */
--tcm-brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 11' preserveAspectRatio='none'%3E%3Cpath d='M1 8.6C26 5 56 2.9 92 2.4c36-.5 71 .5 107 1.7-36 1.5-71 1.2-107 2-36 .8-66 1.8-91 4.3z' fill='%23f8981d'/%3E%3C/svg%3E");
}
.tcm-papered,
.tcm-map-band,
.tcm-paper-band,
.tcm-why{
background-color:var(--tcm-paper);
background-image:var(--tcm-paper-tile);
background-repeat:repeat;
background-blend-mode:multiply;
}
/* ---- Treasure map band ---------------------------------------------------
Three layers instead of one flattened image, so the band works at any width:
the paper tiles, the torn edges repeat, and only the artwork is fixed size.
Figma ships this as a single 4096x2731 PNG with everything baked in, which
cannot scale - stretch it and the tear stretches with it.
The torn strips paint the PAGE colour in the shape OUTSIDE the paper, which
cuts the tear out of the band. They are mirrored horizontally so they repeat
with no seam however wide the viewport gets, and they hold their pixel height
so the tear never stretches. */
.tcm-map-band,
.tcm-paper-band{
position:relative;
padding:110px 24px;
overflow:hidden;
}
/* The strips are masks now, not white pictures (2026-10-14), so the tear takes
the colour of whatever sits next to the band: white by default, or set
--tcm-tear-above / --tcm-tear-below, e.g. with the utility classes below.
.tcm-paper-band is the same band for any content (.tcm-map-band is the
map's, which its script also looks for). */
.tcm-map-band::before,
.tcm-map-band::after,
.tcm-paper-band::before,
.tcm-paper-band::after{
content:"";
position:absolute; left:0; right:0; height:110px;
z-index:1; pointer-events:none;
-webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
-webkit-mask-size:auto 110px; mask-size:auto 110px;
}
.tcm-map-band::before,
.tcm-paper-band::before{top:0; background-color:var(--tcm-tear-above, #fff); -webkit-mask-image:url("../brand/torn-top.png"); mask-image:url("../brand/torn-top.png"); -webkit-mask-position:left top; mask-position:left top}
.tcm-map-band::after,
.tcm-paper-band::after {bottom:0; background-color:var(--tcm-tear-below, #fff); -webkit-mask-image:url("../brand/torn-bottom.png"); mask-image:url("../brand/torn-bottom.png"); -webkit-mask-position:left bottom; mask-position:left bottom}
.tcm-tear-above-mist{--tcm-tear-above:var(--tcm-mist)}
.tcm-tear-above-navy{--tcm-tear-above:var(--tcm-navy)}
.tcm-tear-below-mist{--tcm-tear-below:var(--tcm-mist)}
.tcm-tear-below-navy{--tcm-tear-below:var(--tcm-navy)}
/* Torn over a photo (the client quotes' wood, on the homepage): no colour can
match a photograph, so the band cuts its own bottom edge out instead and the
next section tucks up under it, showing through the rip. The next section
gets the 110px back as extra top padding. */
.tcm-tear-over{
z-index:2; margin-bottom:-110px; padding-bottom:150px;
-webkit-mask:url("../brand/torn-bottom.png") left bottom / auto 110px repeat-x, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask:url("../brand/torn-bottom.png") left bottom / auto 110px repeat-x exclude, linear-gradient(#000 0 0);
}
.tcm-tear-over::after{display:none}
.tcm-tear-over + .tcm-quotes{padding-top:180px}
.tcm-map-art{display:block; width:100%; height:auto}
/* Map Journey (elements/map-journey.php): a 44px button over each green dot
in the artwork, with a soft forest ring that breathes so the stops read as
something to touch; the card is the timeline bubble's (.tcm-paddle__bubble)
white card with its tail, a screen for the clip on top. */
.tcm-mapj{position:relative; width:100%}
.tcm-mapj__art{display:block; width:100%; height:auto}
/* The route layer, in the artwork's own 1700 x 988 units. At rest (and
without script) everything is drawn; initMapJourneys() adds .is-ready to
hide it, then .is-drawn when the map scrolls into view to play it:
--draw is the whole run, and each pin and the X wait for their --at, the
share of the route before them. */
.tcm-mapj{--draw:3.2s}
.tcm-mapj-lede{text-wrap:balance}
.tcm-mapj__route{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:1}
.tcm-mapj__trail{fill:none; stroke:var(--tcm-primary); stroke-width:7; stroke-linecap:round; stroke-dasharray:11 14}
.tcm-mapj__reveal{fill:none; stroke:#fff; stroke-width:24; stroke-linecap:round}
/* the journey so far: solid over the dashes, up to the open stop (--done) */
.tcm-mapj__done{
fill:none; stroke:var(--tcm-primary); stroke-width:7; stroke-linecap:round;
stroke-dasharray:var(--len, 3000) var(--len, 3000);
stroke-dashoffset:calc(var(--len, 3000) * (1 - var(--done, 0)));
opacity:0; transition:stroke-dashoffset .7s cubic-bezier(.45,.05,.35,1), opacity .25s ease .45s;
}
.tcm-mapj.has-done .tcm-mapj__done{opacity:1; transition:stroke-dashoffset .7s cubic-bezier(.45,.05,.35,1), opacity .15s ease}
.tcm-mapj__x path{fill:none; stroke:var(--tcm-primary); stroke-width:13; stroke-linecap:round}
.tcm-mapj__x{transform-box:fill-box; transform-origin:center}
.tcm-mapj__pinbody{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.tcm-mapj__ring{fill:var(--tcm-paper); stroke:var(--tcm-primary); stroke-width:5}
.tcm-mapj__fill{fill:var(--tcm-forest)}
.tcm-mapj__pin.is-on .tcm-mapj__pinbody{transform:scale(1.45)}
.tcm-mapj.is-ready .tcm-mapj__reveal{stroke-dasharray:var(--len) var(--len); stroke-dashoffset:var(--len)}
.tcm-mapj.is-ready .tcm-mapj__pinbody{transform:scale(0)}
.tcm-mapj.is-ready .tcm-mapj__x{opacity:0; transform:scale(1.8) rotate(-12deg)}
.tcm-mapj.is-drawn .tcm-mapj__reveal{stroke-dashoffset:0; transition:stroke-dashoffset var(--draw) cubic-bezier(.45,.05,.35,1)}
.tcm-mapj.is-drawn .tcm-mapj__pinbody{transform:scale(1); transition:transform .5s cubic-bezier(.34,1.56,.64,1) calc(var(--draw) * var(--at, 0))}
.tcm-mapj.is-drawn .tcm-mapj__pin.is-on .tcm-mapj__pinbody{transform:scale(1.45); transition-delay:0s}
.tcm-mapj.is-drawn .tcm-mapj__x{opacity:1; transform:none; transition:opacity .15s ease var(--draw), transform .45s cubic-bezier(.34,1.56,.64,1) var(--draw)}
/* after the first run, hovering answers at once (no waiting for --at) */
.tcm-mapj.is-done .tcm-mapj__pinbody{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.tcm-mapj__stops{margin:0; padding:0; list-style:none}
.tcm-mapj__stop{position:absolute; left:var(--x); top:var(--y); z-index:2; width:0; height:0}
.tcm-mapj.is-ready:not(.is-done) .tcm-mapj__dot::before{animation:none; opacity:0}
.tcm-mapj__stop.is-open{z-index:5}
.tcm-mapj__dot{
position:absolute; left:-22px; top:-22px; width:44px; height:44px; padding:0;
border:0; border-radius:50%; background:transparent; cursor:pointer;
}
.tcm-mapj__dot::before{
content:""; position:absolute; inset:9px; border-radius:50%;
border:3px solid var(--tcm-forest); opacity:0;
animation:tcm-mapj-ring 2.6s ease-out infinite;
}
/* The ping spreads to about twice the hit area (BugHerd #55: easier to spot). */
.tcm-mapj__stop:nth-child(2n) .tcm-mapj__dot::before{animation-delay:.9s}
.tcm-mapj__stop:nth-child(3n) .tcm-mapj__dot::before{animation-delay:1.7s}
.tcm-mapj__stop.is-open .tcm-mapj__dot::before{animation:none; opacity:0} /* the pin grows instead */
.tcm-mapj__dot:focus-visible{outline:2px solid var(--tcm-forest); outline-offset:2px}
@keyframes tcm-mapj-ring{0%{transform:scale(.6); opacity:1} 70%{transform:scale(2.4); opacity:0} 100%{opacity:0}}
/* The card is a Challenge Coaster (.tcm-coaster__face) in forest green: the
site paper multiplied in twice at two scales (as on the team card's back),
a thick card edge, a pressed inner rim, set down at a slight tilt. The clip
sits inside the rim like a print. No tail: the growing pin says which stop. */
.tcm-mapj__card{
position:absolute; left:0; bottom:28px; width:290px; padding:12px 12px 0;
border-radius:22px; color:#fff;
background-color:var(--tcm-forest);
background-image:var(--tcm-paper-tile), var(--tcm-paper-tile);
background-blend-mode:multiply;
background-size:340px auto, 520px auto;
background-position:0 0, 137px 61px;
box-shadow:0 2px 0 #2a4f35, 0 3px 0 #22422c, 0 14px 28px rgba(11,11,11,.26);
rotate:var(--tilt, -2deg);
transform-origin:50% 100%; transform:translateX(calc(-50% + var(--shift, 0px))) scale(.6);
opacity:0; visibility:hidden; pointer-events:none;
transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .2s ease, visibility 0s .35s;
}
.tcm-mapj__card::before{content:""; position:absolute; inset:7px; border-radius:16px; border:1.5px solid rgba(255,255,255,.14); pointer-events:none}
.tcm-mapj__stop:nth-child(4n+2) .tcm-mapj__card{--tilt:1.5deg}
.tcm-mapj__stop:nth-child(4n+3) .tcm-mapj__card{--tilt:-.8deg}
.tcm-mapj__stop:nth-child(4n) .tcm-mapj__card{--tilt:2.2deg}
.tcm-mapj__stop.is-open .tcm-mapj__card{
opacity:1; visibility:visible; pointer-events:auto;
transform:translateX(calc(-50% + var(--shift, 0px))) scale(1);
transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.tcm-mapj__stop.is-below .tcm-mapj__card{bottom:auto; top:28px; transform-origin:50% 0}
.tcm-mapj__screen{display:block; position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:var(--tcm-navy); box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.tcm-mapj__clip{display:block; width:100%; height:100%; object-fit:cover}
.tcm-mapj__soon{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:rgba(255,255,255,.75); font-size:1.1rem; letter-spacing:.14em; text-transform:uppercase}
.tcm-mapj__soon i{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--tcm-forest); color:#fff; font-size:1.3rem; padding-left:3px}
.tcm-mapj__text{display:block; padding:14px 10px 20px}
.tcm-mapj__title{display:block; font-family:var(--tcm-font-display); font-weight:600; font-size:2.1rem; line-height:1.2; text-wrap:balance}
.tcm-mapj__cap{display:block; margin-top:6px; font-size:1.4rem; line-height:1.5; color:rgba(255,255,255,.86)}
/* The watch card: a bigger stop card (same green coaster) holding a still
of the video and a play button, set down in the empty lower-left of the
map. It pops in after the route has drawn, and steps aside (shrinks and
fades) while a stop is open, popping back when it closes. */
.tcm-mapj__watch{
position:absolute; left:2.5%; top:54%; z-index:4; width:clamp(300px, 34%, 460px);
display:block; padding:12px 12px 16px; border:0; border-radius:22px; text-align:left; cursor:pointer;
color:#fff; font:inherit;
background-color:var(--tcm-forest);
background-image:var(--tcm-paper-tile), var(--tcm-paper-tile);
background-blend-mode:multiply;
background-size:340px auto, 520px auto;
background-position:0 0, 137px 61px;
box-shadow:0 2px 0 #2a4f35, 0 3px 0 #22422c, 0 18px 34px rgba(11,11,11,.3);
rotate:-3deg; transform-origin:30% 100%;
transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .25s ease, rotate .45s ease;
}
.tcm-mapj__watch::before{content:""; position:absolute; inset:7px; border-radius:16px; border:1.5px solid rgba(255,255,255,.14); pointer-events:none}
.tcm-mapj__watchshot{position:relative; display:block; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:var(--tcm-navy) center/cover no-repeat}
.tcm-mapj__watchshot::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.35), transparent 60%)}
.tcm-mapj__watchplay{
position:absolute; left:4%; bottom:7%; z-index:1; width:clamp(52px, 5vw, 72px); height:clamp(52px, 5vw, 72px); /* in the corner, clear of the title card */
display:grid; place-items:center; border-radius:50%; padding-left:6px;
background:var(--tcm-primary); color:#fff; font-size:clamp(18px, 1.7vw, 24px);
box-shadow:0 0 0 8px rgba(248,152,29,.3);
transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.tcm-mapj__watch:hover{rotate:-1.5deg}
.tcm-mapj__watch:hover .tcm-mapj__watchplay{transform:scale(1.08); box-shadow:0 0 0 14px rgba(248,152,29,.25)}
.tcm-mapj__watch:focus-visible{outline:3px solid var(--tcm-primary); outline-offset:4px}
.tcm-mapj__watchtext{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 8px 0}
.tcm-mapj__watchtext b{font-family:var(--tcm-font-display); font-weight:600; font-size:clamp(2.2rem, 2vw, 2.8rem); line-height:1.1}
.tcm-mapj__watchtext > span{flex:none; font-size:1.2rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8}
.tcm-mapj.is-ready .tcm-mapj__watch{transform:translateY(24px) scale(.55); opacity:0}
.tcm-mapj.is-drawn .tcm-mapj__watch{transform:none; opacity:1; transition:transform .55s cubic-bezier(.34,1.56,.64,1) calc(var(--draw) + .3s), opacity .25s ease calc(var(--draw) + .3s)}
.tcm-mapj.is-done .tcm-mapj__watch{transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .25s ease, rotate .45s ease}
/* once someone has opened a stop the card's intro is over: it answers at
once, even if the route is still drawing */
.tcm-mapj.tcm-mapj.is-met .tcm-mapj__watch{transform:none; opacity:1; transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .25s ease, rotate .45s ease}
/* while a stop is open the card steps aside, whatever state the draw is in
(the doubled class outranks the rules above) */
.tcm-mapj.tcm-mapj.is-exploring .tcm-mapj__watch{transform:translateY(24px) scale(.55); opacity:0; pointer-events:none; transition:transform .3s ease, opacity .2s ease}
/* Video player (initVideoBoxes()): the lightbox's dark dialog with a 16:9 frame. */
.tcm-videobox__frame{position:relative; width:min(1200px, calc(100vw - 48px), calc((100vh - 140px) * 16 / 9)); aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#000; box-shadow:0 10px 40px rgba(0,0,0,.4)}
.tcm-videobox__frame video, .tcm-videobox__frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.tcm-videobox .tcm-lightbox__fig{padding:64px 24px}
@media (max-width:700px){
.tcm-mapj__dot::before{inset:14px} /* the dots sit close together: a smaller ring, same target */
/* the art is drawn at a third of its size here: heavier line and pins */
.tcm-mapj__trail{stroke-width:11; stroke-dasharray:16 20}
.tcm-mapj__done{stroke-width:11}
.tcm-mapj__ring{r:23px; stroke-width:7}
.tcm-mapj__fill{r:13px}
.tcm-mapj__card, .tcm-mapj__stop.is-below .tcm-mapj__card{
position:fixed; left:16px; right:16px; top:auto; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); width:auto;
display:grid; grid-template-columns:44% minmax(0, 1fr); align-items:stretch; gap:0; padding:10px;
rotate:0deg; transform-origin:50% 100%; transform:translateY(24px); z-index:50;
}
.tcm-mapj__stop.is-open .tcm-mapj__card{transform:none}
.tcm-mapj__screen{aspect-ratio:auto; min-height:104px}
.tcm-mapj__clip{position:absolute; inset:0}
.tcm-mapj__text{padding:4px 6px 4px 14px; display:flex; flex-direction:column; justify-content:center}
.tcm-mapj__soon{gap:6px; font-size:1rem}
.tcm-mapj__soon i{width:32px; height:32px; font-size:1.1rem}
.tcm-mapj__title{font-size:1.7rem}
.tcm-mapj__cap{font-size:1.3rem}
/* On a phone the map is too small to explore: the band holds only the
watch card, centred, and the stops (and their cards) are not shown. */
.tcm-mapj__art, .tcm-mapj__route, .tcm-mapj__stops{display:none}
.tcm-mapj{padding-block:8px 40px} /* clear of the torn edge */
.tcm-mapj-lede{display:none} /* there are no stops to hover on a phone */
.tcm-mapj__watchplay{left:10px; bottom:10px; width:52px; height:52px; font-size:18px; padding-left:4px; box-shadow:0 0 0 6px rgba(248,152,29,.3)}
.tcm-mapj__watch, .tcm-mapj.is-ready .tcm-mapj__watch, .tcm-mapj.is-drawn .tcm-mapj__watch{position:relative; left:auto; top:auto; width:100%; max-width:440px; margin:0 auto; rotate:-1.5deg; transform:none; opacity:1}
}
@media (prefers-reduced-motion:reduce){
.tcm-mapj__dot::before{animation:none; opacity:.8; inset:9px}
.tcm-mapj__pinbody, .tcm-mapj__done{transition:none !important}
.tcm-mapj__card, .tcm-mapj__stop.is-open .tcm-mapj__card{transition:none}
}
@media (max-width:767px){
/* the tear keeps its pixel height; the band just needs less air on a phone */
.tcm-map-band, .tcm-paper-band{padding:86px 18px}
}
/* ---- Paddle 1: Map, detail ---------------------------------------------- */
/* Long-form copy. Bricks' rich text leaves paragraph margins to the theme, so
the rhythm is set here rather than with empty paragraphs in the content. */
.tcm-prose p{margin:0 0 1.35em}
.tcm-prose p:last-child{margin-bottom:0}
/* The bold lead-ins step back up to heading ink, which is what separates them
from the body copy around them as much as the weight does. */
.tcm-prose strong{font-weight:500;color:var(--tcm-ink)}
/* A designed photo frame: 16px radius, the TCM drop shadow, the 610x665 ratio.
Put it on a Bricks Image element and whatever image goes in is cropped to
the frame, so swapping the photo is a single pick in the Image control.
The element currently holds tcm-placeholder-photo.jpg, a real image that is
visibly a stand-in (see TODO.md). Placeholders are always real elements
like this one, never a styled div, so they can be filled in the builder. */
.tcm-photo{
display:block;
aspect-ratio:610/665;
height:auto;
object-fit:cover;
border-radius:16px;
box-shadow:var(--tcm-shadow);
}
/* Taller, for a photo that runs beside long copy (the homepage's whiteboard). */
.tcm-photo.tcm-photo--tall{aspect-ratio:61/78}
/* Two IDs, for the same reason as the map CTA: Bricks emits its own
#brxe-pd1row rule later in the document, and a single-ID media query here
would tie and lose. */
@media (max-width:991px){
#brxe-pd1sec #brxe-pd1row{flex-direction:column}
#brxe-pd1sec #brxe-pd1left,
#brxe-pd1sec #brxe-pd1photo{width:100%}
/* the ratio is a portrait crop; full width at tablet makes it enormous */
#brxe-pd1sec #brxe-pd1photo{aspect-ratio:16/10;max-width:610px;margin-inline:auto}
}
/* ---- Success stories ---------------------------------------------------- */
/* Heading on the left, "see all" on the right; stacks rather than squeezing
the 48px serif heading on narrow screens. */
.tcm-section-head{flex-wrap:wrap}
.tcm-case-row{flex-wrap:wrap}
.tcm-case{
/* 1 1 0 with min-width:0 so four cards share the row evenly and the long
stat labels inside can wrap instead of forcing the card wider */
flex:1 1 0; min-width:0;
display:flex; flex-direction:column;
background:var(--tcm-mist);
border-radius:15px;
overflow:hidden;
/* the card's own shadow in Figma is 7.5px, half the global --tcm-shadow */
box-shadow:0 0 7.5px rgba(11,11,11,.2);
}
/* Photo half. The logo sits at the top and the CTA at the bottom, both over
the image, so this is a flex column with the two pushed apart. */
.tcm-case__media{
position:relative;
aspect-ratio:313/240;
display:flex; flex-direction:column; align-items:flex-start;
justify-content:space-between;
padding:20px 19px;
}
.tcm-case__photo{
position:absolute; inset:0; z-index:0;
width:100%; height:100%; object-fit:cover;
}
/* Dark from the left, clear at the right, multiplied into the photograph -
it darkens without flattening, so the white logo holds on a bright frame
like the ski shot while the image still reads. */
.tcm-case__media::after{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(to left, rgba(255,255,255,0) 4%, rgba(11,11,11,.83) 96%);
mix-blend-mode:multiply;
}
/* The left-to-right gradient alone is photo-dependent. Measured against the
backdrop actually behind each logo, FH&P came in at 2.43:1 - its logo lands
on a bright office window - against a 3:1 minimum. This top scrim darkens
the band the logo sits in whatever the photograph does underneath. */
.tcm-case__media::before{
content:""; position:absolute; left:0; right:0; top:0; height:58%;
z-index:1; pointer-events:none;
background:linear-gradient(to bottom, rgba(11,11,11,.62), rgba(11,11,11,0));
}
.tcm-case__logo{
position:relative; z-index:2;
width:auto; max-width:68%; max-height:80px; height:auto;
object-fit:contain; object-position:left center;
}
.tcm-case__cta{position:relative; z-index:2}
.tcm-case__body{
display:flex; flex-direction:column; gap:12px;
padding:20px 19px 22px;
flex:1;
}
/* Pushes the stats to the bottom so the rows line up across cards whose
blurbs run to different lengths. */
.tcm-case__statswrap{margin-top:auto; container-type:inline-size}
/* The figures as a small ledger (2026-09-25): one figure per row with its
label beside it. Every figure is the same fixed size on every card, so a
long one (500,000+, 40k/month, Happier) never shrinks the others. The
figure column is as wide as the card's widest figure, so the labels line
up. The .tcm-stat wrappers step aside (display:contents) so figure and
label are cells of one grid. */
.tcm-case__stats{display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:14px}
.tcm-case__stats .tcm-stat{display:contents}
/* Figures are set in the body face, bold - Thomas' rule for every number on
the site, so results read as data rather than as headline type. */
.tcm-stat__v,
.tcm-stat__l{display:flex; align-items:center; padding:9px 0; border-top:1px solid rgba(11,11,11,.12)}
.tcm-stat__v{
font-family:var(--tcm-font-body); font-weight:700; font-size:2.6rem;
line-height:1; letter-spacing:-.01em; color:var(--tcm-ink); white-space:nowrap;
}
.tcm-stat__l{
min-width:0; font-size:1.25rem; line-height:1.25; text-transform:uppercase;
color:var(--tcm-ink); opacity:.7;
}
/* A card too narrow for figure and label side by side puts each label under
its figure instead of squeezing it. */
@container (max-width:250px){
.tcm-case__stats{grid-template-columns:minmax(0, 1fr)}
.tcm-stat__l{padding-top:0; border-top:0}
}
@media (max-width:991px){
/* two up below 991px */
#brxe-sssec #brxe-ssrow .tcm-case{flex:1 1 calc(50% - 9px)}
}
@media (max-width:575px){
#brxe-sssec #brxe-ssrow .tcm-case{flex:1 1 100%}
}
/* ---- Clients & Results: case grid, industry chips, logo grid ------------- */
/* The case query loop. Four across like the homepage row, but a grid, so a
filtered set of two or three keeps the card width instead of stretching. */
.tcm-case-grid{
display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
gap:20px; width:100%;
}
.tcm-case-grid .tcm-case{flex:none}
/* Three across below 1200px: at four, a card is too narrow for 500,000+ or
40k/month even with the figures shrunk. */
@media (max-width:1199px){ .tcm-case-grid{grid-template-columns:repeat(3, minmax(0, 1fr))} }
@media (max-width:899px){ .tcm-case-grid{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width:639px){ .tcm-case-grid{grid-template-columns:1fr} }
/* .tcm-case and the tiles set their own display, which beats the UA's
[hidden] rule; the filter relies on [hidden] actually hiding. */
.tcm-case[hidden], .tcm-ltile[hidden], .tcm-fchip[hidden], .tcm-filter-empty[hidden], .tcm-lgrid__foot[hidden]{display:none !important}
/* One filter bar over both grids (Industry Filter element). Sticky, so it
stays in view from the case studies down through the client logos. */
.tcm-filterbar{
display:flex; flex-direction:column; align-items:center; gap:12px;
width:100%; padding:18px 40px;
background:rgba(255,255,255,.96);
}
.tcm-filterbar.is-sticky{position:sticky; top:var(--wp-admin--admin-bar--height, 0px); z-index:30}
@supports (backdrop-filter:blur(6px)){ .tcm-filterbar{background:rgba(255,255,255,.88); backdrop-filter:blur(8px)} }
.tcm-filterbar.is-stuck{box-shadow:0 6px 18px rgba(11,11,11,.08)}
.tcm-filterbar__label{
margin:0; font-size:1.3rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tcm-ink-muted);
}
.tcm-filter-count{margin:0; font-size:1.5rem; color:var(--tcm-ink-muted); text-align:center}
.tcm-filter-empty{margin:0; padding:28px 20px; border-radius:12px; background:var(--tcm-mist); font-size:1.6rem; text-align:center; width:100%}
@media (max-width:767px){ .tcm-filterbar{padding:12px 16px} }
/* Filter chips. Active = Forest, per the Figma page. */
.tcm-fchips{
display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
}
.tcm-fchip{
font-family:var(--tcm-font-body); font-weight:500;
font-size:1.25rem; line-height:1; letter-spacing:.08em; text-transform:uppercase;
padding:9px 13px; border-radius:99px;
border:1.5px solid rgba(11,11,11,.16);
background:var(--tcm-white); color:var(--tcm-ink);
cursor:pointer;
transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}
.tcm-fchip:hover{border-color:var(--tcm-forest)}
.tcm-fchip[aria-pressed="true"]{background:var(--tcm-forest); border-color:var(--tcm-forest); color:#fff}
.tcm-fchip:focus-visible{outline:2px solid var(--tcm-primary); outline-offset:2px}
/* Phones: ten wrapped chips fill a screen before the first card, so they
become one row that scrolls sideways, running to the screen edges. */
@media (max-width:767px){
.tcm-fchips{
flex-wrap:nowrap; justify-content:flex-start;
overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
width:calc(100% + 32px); margin-inline:-16px; padding:4px 16px;
scroll-padding-inline:16px;
}
.tcm-fchips::-webkit-scrollbar{display:none}
.tcm-fchip{flex:none}
}
/* Logo grid */
.tcm-lgrid-wrap{display:flex; flex-direction:column; align-items:center; gap:24px; width:100%}
/* Four across. The logo files are trimmed of their built-in margin, so at
this size a logo is still well over twice what the old six-across grid
showed. Two across on tablets and phones. */
.tcm-lgrid{
list-style:none; margin:0; padding:0; width:100%;
display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px;
}
.tcm-ltile{position:relative; aspect-ratio:3/2}
.tcm-lgrid:not(.is-all):not(.is-filtered) .tcm-ltile.is-more{display:none}
/* White cards on the section's paper (option A, chosen 2026-09-23): the
review-card look, lifting on hover to say the logo is a link. */
.tcm-ltile__in{
position:absolute; inset:0;
display:grid; place-items:center;
padding:20px;
border-radius:12px;
background:var(--tcm-white);
box-shadow:0 1px 2px rgba(11,11,11,.06), 0 6px 18px rgba(11,11,11,.07);
transition:box-shadow .25s ease, transform .25s ease;
}
.tcm-ltile__img{
max-width:86%; max-height:66%; width:auto; height:auto; object-fit:contain;
filter:grayscale(1); opacity:.7;
transition:filter .3s ease, opacity .3s ease;
}
.tcm-ltile:hover .tcm-ltile__img, .tcm-ltile__in:focus-visible .tcm-ltile__img{filter:none; opacity:1}
a.tcm-ltile__in:hover{transform:translateY(-3px); box-shadow:0 2px 4px rgba(11,11,11,.06), 0 12px 28px rgba(11,11,11,.12)}
@media (prefers-reduced-motion:reduce){ a.tcm-ltile__in:hover{transform:none} }
a.tcm-ltile__in:focus-visible{outline:2px solid var(--tcm-primary); outline-offset:2px}
.tcm-ltile__wm{
font-family:var(--tcm-font-display); font-weight:600;
font-size:2.2rem; line-height:1.2; text-align:center; color:#7a7a7a;
}
.tcm-lgrid__foot{display:flex; flex-direction:column; align-items:center; gap:14px}
.tcm-lgrid__count{font-size:1.4rem; color:var(--tcm-ink-muted)}
/* Same values as the homepage "see all" button, which Bricks writes per id. */
.tcm-lgrid__more{
font-family:var(--tcm-font-body); font-weight:400;
font-size:var(--tcm-chrome-micro); letter-spacing:var(--tcm-track-button);
text-transform:uppercase; line-height:1.1;
color:#fff; background-color:var(--tcm-primary);
border:0; border-radius:10px; padding:11px 21px; cursor:pointer;
}
@media (max-width:991px){ .tcm-lgrid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px} }
/* ---- Client quotes slider ------------------------------------------------
Figma node `testimonial-slider` (285:6739). Markup comes from the registered
Bricks element in elements/testimonial-slider.php, so the quotes are a
repeater in the builder rather than a hand-built stack of divs.
The backdrop is two layers, not one. Figma puts an 80% slate fill in
multiply over the photograph, and background-blend-mode cannot do that: it
blends an image into the element's OWN background colour, not into a colour
painted above it. So the photo is an and the veil is a sibling with
mix-blend-mode. `isolation:isolate` keeps that multiply inside the section -
without it the veil would reach through and darken the page behind. */
.tcm-quotes{
position:relative;
isolation:isolate;
overflow:hidden;
display:flex;
flex-direction:column;
align-items:center;
gap:32px;
padding:70px 80px;
}
.tcm-quotes__bg{
position:absolute; inset:0; z-index:0;
width:100%; height:100%;
object-fit:cover; object-position:center;
pointer-events:none;
}
.tcm-quotes__veil{
position:absolute; inset:0; z-index:1;
background-color:rgba(11,11,11,.66); /* same darkness as the old 80% slate */
mix-blend-mode:multiply;
pointer-events:none;
}
/* Every quote sits in the same grid cell, so the section is as tall as the
longest one and nothing jumps as they change. A slider that resizes itself
mid-transition is the thing that makes these feel cheap. */
.tcm-quotes__stage{
position:relative; z-index:2;
display:grid;
width:100%;
max-width:1126px; /* Figma quote measure */
}
.tcm-quote{
grid-area:1/1;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:32px;
margin:0;
text-align:center;
opacity:0;
visibility:hidden;
translate:var(--tcm-quote-off,40px) 0;
/* Leaving: go quickly. The two quotes overlap for as long as both are part
way through their fade, and superimposed text is unreadable, so the one on
its way out clears before the one arriving is dense enough to read. */
transition:opacity .26s ease, translate .55s cubic-bezier(.22,.61,.36,1),
visibility 0s linear .55s;
}
.tcm-quote.is-current{
opacity:1;
visibility:visible;
translate:0 0;
transition:opacity .42s ease .14s, translate .55s cubic-bezier(.22,.61,.36,1),
visibility 0s;
}
.tcm-quote__who{
display:flex; flex-direction:column; align-items:center;
gap:8px;
margin:0;
}
.tcm-quote__name{
font-family:var(--tcm-font-body);
font-size:var(--tcm-button);
letter-spacing:var(--tcm-track-button);
text-transform:uppercase;
color:var(--tcm-primary);
}
.tcm-quote__role{
font-family:var(--tcm-font-body);
font-size:var(--tcm-body);
line-height:1.34;
color:#fff;
opacity:.7;
}
/* Bricks' own stylesheet gives every blockquote a 4px keyline, 30px of indent
and 1.3em type. None of that belongs here - the quote marks are the quoting
device in this design. */
.tcm-quote__body{
margin:0;
padding:0;
border:0;
font-size:inherit;
}
.tcm-quote__body p{
margin:0;
font-family:var(--tcm-font-display);
font-weight:600; /* the headline weight */
font-size:var(--tcm-h2);
line-height:1.24;
color:#fff;
}
.tcm-quote__hl{color:var(--tcm-primary)}
/* The quote marks belong to the design rather than to the copy, so they are
generated here and the builder field stays clean text. Set in the quote's
own face (Fraunces) and size, in orange; Water Brush marks read oddly and
were dropped on 2026-09-24. */
.tcm-quote__body p::before,
.tcm-quote__body p::after{color:var(--tcm-primary)}
.tcm-quote__body p::before{content:"\201C"; margin-right:.04em}
.tcm-quote__body p::after{content:"\201D"; margin-left:.02em}
/* Matches the outlined button in the footer CTA (#brxe-ctabtn2), which Bricks
writes as an #id rule. This one has no Bricks settings behind it, so the
values live here. The ripple and the orange hover keyline come from the
shared .tcm-btn-ghost rules further down. */
.tcm-quote__cta{
font-family:var(--tcm-font-body);
font-size:var(--tcm-button);
letter-spacing:var(--tcm-track-button);
text-transform:uppercase;
line-height:1.1;
color:#fff;
border:2px solid #fff;
border-radius:10px;
padding:9px 17px;
}
.tcm-quotes__nav{
position:relative; z-index:2;
display:flex; align-items:center; gap:4px;
}
.tcm-quotes__dot,
.tcm-quotes__pause{
width:24px; height:24px; /* 24px target, per WCAG 2.5.8 */
display:grid; place-items:center;
padding:0; border:0;
background:none;
color:#fff;
cursor:pointer;
}
.tcm-quotes__dot::before{
content:"";
width:10px; height:10px;
border-radius:50%;
border:1px solid rgba(255,255,255,.8);
transition:background-color .3s ease, border-color .3s ease;
}
.tcm-quotes__dot:hover::before{border-color:#fff; background-color:rgba(255,255,255,.35)}
.tcm-quotes__dot.is-current::before{
background-color:var(--tcm-primary);
border-color:var(--tcm-primary);
}
.tcm-quotes__dot:focus-visible,
.tcm-quotes__pause:focus-visible{
outline:2px solid #fff;
outline-offset:2px;
border-radius:4px;
}
.tcm-quotes__pause{margin-left:6px}
/* display:grid above outranks the UA's [hidden] rule, so restate it. The
script hides the button when reduced motion means nothing will advance. */
.tcm-quotes__pause[hidden]{display:none}
.tcm-quotes__pause-icon{
width:9px; height:11px;
background:linear-gradient(to right,
currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px);
opacity:.8;
transition:opacity .3s ease;
}
.tcm-quotes__pause:hover .tcm-quotes__pause-icon{opacity:1}
/* Paused: the control now offers to start it again, so it shows a play glyph. */
.tcm-quotes.is-paused .tcm-quotes__pause-icon{
width:0; height:0;
background:none;
border-left:10px solid currentColor;
border-top:6px solid transparent;
border-bottom:6px solid transparent;
}
/* Previous / next: Figma's "hand-drawn-arrow 1" and "2" (323:6955, 234:5377),
loose layers over the Homepage slider. A textured white chevron and nothing
else - no circle, no fill - so the artwork is the button. Its 141px Figma box
is mostly empty margin; the glyph is about 43x55, set here at that size from
a 2x crop of the 2048px source. Figma puts the glyphs ~52px in from each
edge and level with the middle line of the quote, which sits about 39px
below the section's centre because the name block is above it.
The button is larger than the glyph so it is a comfortable target. */
.tcm-quotes__arrow{
position:absolute; z-index:3;
top:calc(50% + 39px); translate:0 -50%;
width:72px; height:88px;
padding:0; border:0;
background:url("../brand/quote-arrow.png") center / 44px 55px no-repeat;
cursor:pointer;
opacity:.9;
transition:opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.tcm-quotes__arrow--prev{left:34px; transform:scaleX(-1)} /* Figma rotates arrow 2 by 180deg */
.tcm-quotes__arrow--next{right:34px}
/* Figma has no hover state; a nudge outward says "this moves the slider". */
.tcm-quotes__arrow:hover{opacity:1}
.tcm-quotes__arrow--next:hover{transform:translateX(4px)}
.tcm-quotes__arrow--prev:hover{transform:scaleX(-1) translateX(4px)}
.tcm-quotes__arrow:focus-visible{outline:2px solid #fff; outline-offset:-6px; border-radius:8px}
@media (max-width:991px){
.tcm-quotes{padding:56px 64px; gap:28px}
.tcm-quotes__arrow{top:50%; width:52px; height:72px; background-size:32px 40px}
.tcm-quotes__arrow--prev{left:6px}
.tcm-quotes__arrow--next{right:6px}
.tcm-quote{gap:26px}
}
@media (max-width:640px){
.tcm-quotes{padding:48px 24px}
/* No side room for them on a phone: they drop to the dots row, one at
each end, so every control sits together under the quote. */
.tcm-quotes__arrow{top:auto; bottom:38px; translate:none; width:44px; height:44px; background-size:24px 30px}
.tcm-quotes__arrow--prev{left:24px}
.tcm-quotes__arrow--next{right:24px}
.tcm-quote__body p{line-height:1.3}
}
/* Honour the OS setting: the quotes still change, they just cut rather than
travel. initQuoteSliders() also refuses to advance on its own under this. */
@media (prefers-reduced-motion:reduce){
.tcm-quote{
translate:none;
transition:opacity .01ms, visibility 0s;
}
.tcm-quote.is-current{translate:none; transition:opacity .01ms, visibility 0s}
}
/* ---- Why Twin Creek ----------------------------------------------------- */
/* Parchment ground, and the two paper-curl textures behind the top row, are
decoration only - referenced straight from the theme rather than sideloaded,
so they never need to exist as media-library rows to render. The three
hand-drawn illustrations ARE in the library: they are content. */
/* the section's paper is the shared tile - see .tcm-papered above */
.tcm-why-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
width:100%;
border:1px solid rgba(11,11,11,.11);
border-radius:15px;
/* NOT overflow:hidden. That is the obvious way to clip the box backgrounds to
the rounded outer corners, but it also traps the unrolling panel inside the
grid. The corners are rounded on the corner boxes themselves instead, which
means the set of corner boxes has to be restated at every breakpoint. */
}
/* :nth-child(n) rather than a bare .tcm-why-box, so each breakpoint's reset
matches the specificity of the rules it is resetting. A plain class selector
loses to nth-child and the old corners survive into the new layout. */
/* Bricks emits align-items:flex-start on the block at ID specificity, so grid
items do not fill their row. That was invisible while every card was about
the same height; now that one is sized to the copy behind its face, its
row-mates stopped short and left their hairlines stranded mid-row. Two
ancestors deep to outrank it. */
#brxe-whysec .tcm-why-grid{align-items:stretch}
.tcm-why-box:nth-child(n){border-radius:0}
.tcm-why-box:nth-child(1){border-top-left-radius:15px}
.tcm-why-box:nth-child(3){border-top-right-radius:15px}
.tcm-why-box:nth-child(4){border-bottom-left-radius:15px}
.tcm-why-box:nth-child(6){border-bottom-right-radius:15px}
.tcm-why-box{
position:relative;
display:flex; flex-direction:column; align-items:center;
/* top-aligned, not centred. Centring makes the title's position depend on
how many lines the body below it runs to, which drifted the row-2 titles
by 13px where one box had a fourth line. */
justify-content:flex-start;
gap:16px;
padding:40px;
min-height:320px;
text-align:center;
/* hairlines drawn on the inside edges only, so the rounded outer border
stays a single unbroken line */
border-right:1px solid rgba(11,11,11,.11);
border-bottom:1px solid rgba(11,11,11,.11);
}
.tcm-why-box:nth-child(3n){border-right:0}
.tcm-why-box:nth-last-child(-n+3){border-bottom:0}
/* The paper texture that used to sit on the top row is gone: it had a torn
corner baked into it, and that corner is now a real element that moves. It
also appears only where there is something underneath to tear into, so it
reads as an affordance rather than as decoration. */
/* Both media types occupy the same 114px slot, so every title in a row starts
at the same offset from the top of its box whatever sits above it. */
.tcm-why-ill{width:auto; height:114px; object-fit:contain}
.tcm-why-icon{
height:114px;
display:flex; align-items:center; justify-content:center;
}
.tcm-why-icon i{font-size:4.8rem; color:var(--tcm-ink)}
@media (max-width:991px){
.tcm-why-grid{grid-template-columns:repeat(2, 1fr)}
.tcm-why-box:nth-child(n){border-radius:0}
.tcm-why-box:nth-child(1){border-top-left-radius:15px}
.tcm-why-box:nth-child(2){border-top-right-radius:15px}
.tcm-why-box:nth-child(5){border-bottom-left-radius:15px}
.tcm-why-box:nth-child(6){border-bottom-right-radius:15px}
/* the 3n / -n+3 rules above are wrong at two columns */
.tcm-why-box:nth-child(3n){border-right:1px solid rgba(11,11,11,.11)}
.tcm-why-box:nth-child(2n){border-right:0}
.tcm-why-box:nth-last-child(-n+3){border-bottom:1px solid rgba(11,11,11,.11)}
.tcm-why-box:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:575px){
.tcm-why-grid{grid-template-columns:1fr}
.tcm-why-box:nth-child(n){border-radius:0}
.tcm-why-box:nth-child(1){border-radius:15px 15px 0 0}
.tcm-why-box:nth-child(6){border-radius:0 0 15px 15px}
.tcm-why-box{min-height:0; padding:34px 24px}
/* must restate the same specificity the two-column block used, or its
nth-child(3n) rule keeps a right border on box 3 at one column */
.tcm-why-box,
.tcm-why-box:nth-child(2n),
.tcm-why-box:nth-child(3n){border-right:0}
.tcm-why-box:nth-last-child(-n+3),
.tcm-why-box:nth-last-child(-n+2){border-bottom:1px solid rgba(11,11,11,.11)}
.tcm-why-box:last-child{border-bottom:0}
}
/* ---- Why grid: tear the card open ---------------------------------------
One interaction at every width. The card's face is torn away from the
bottom-right corner toward the top-left, revealing copy that was already
sitting behind it, and the torn corner that used to be printed on these
cards is the thing doing the tearing.
Because the copy is behind the face rather than below it, the card has to be
tall enough to hold it whether it is open or shut - its min-height comes from
the measured copy. On desktop that costs nothing: these cards already stood
around 400px for their own content. */
.tcm-why-box{
position:relative;
overflow:hidden; /* keeps the flap and the torn edge
inside the card's rounded corner */
/* The cut lives here, on the card, and NOT on :root - which is where it was
first written, and why it silently did nothing. A var() nested inside a
custom property is substituted at the element the property is DECLARED on,
not where it is used. These paths refer to --tcm-why-bw/--tcm-why-bh, which
tcm-interactions.js sets on this element; declared at :root those names
resolve against , where they do not exist, so the whole value came
out guaranteed-invalid and clip-path computed to `none`.
Declared here they resolve correctly, and before the script has run they
are simply absent - which leaves the card unclipped and whole, exactly the
right thing to show when nothing can animate. */
/* --- BEGIN generated tear edge (tools/gen-tear-edge.py) --- */
/* traces the flap's far edge, then its chord (slope -0.9807) beyond it */
/* Only ONE path is emitted, and it never animates. The wrapper that */
/* carries it slides instead, so the reveal is a transform and runs */
/* on the compositor in step with the flap. See tcm-brand.css. */
--tcm-tear-clip:polygon(calc(4.0000 * var(--tcm-why-bw) + 3.0000 * var(--tcm-why-bh)) calc(-3.1425 * var(--tcm-why-bw) - 1.9420 * var(--tcm-why-bh)), calc(1.0000 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.2006 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9970 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1969 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9933 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1914 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9872 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1835 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9811 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1762 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9750 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1707 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9690 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1653 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9629 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1610 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9568 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1567 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9507 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1531 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9446 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1494 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9385 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1464 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9324 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1427 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9263 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1397 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9203 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1360 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9142 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1312 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9081 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1263 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.9020 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1208 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.8959 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1153 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.8898 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1093 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.8837 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.1032 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.8777 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.0971 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.8716 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.0904 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.8655 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.0837 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.8594 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.0776 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.8533 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.0709 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.8472 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.0648 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.8411 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.0587 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.8350 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.0527 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.8290 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.0472 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.8229 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.0405 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.8168 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.0326 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.8107 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.0234 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.8046 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.0137 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.7985 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.0052 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(0.7955 * var(--tcm-why-bw) + 0.0000 * var(--tcm-why-bh)) calc(-0.0000 * var(--tcm-why-bw) + 1.0000 * var(--tcm-why-bh)), calc(-2.2045 * var(--tcm-why-bw) - 3.0000 * var(--tcm-why-bh)) calc(2.9420 * var(--tcm-why-bw) + 3.9420 * var(--tcm-why-bh)), calc(-6.0000 * var(--tcm-why-bw) - 6.0000 * var(--tcm-why-bh)) calc(2.9420 * var(--tcm-why-bw) + 3.9420 * var(--tcm-why-bh)), calc(-6.0000 * var(--tcm-why-bw) - 6.0000 * var(--tcm-why-bh)) calc(-3.1425 * var(--tcm-why-bw) - 1.9420 * var(--tcm-why-bh)));
--tcm-tear-travel:1.05;
--tcm-tear-angle:-44.44deg;
--tcm-tear-anchor-x:0.7955;
/* --- END generated tear edge --- */
}
.tcm-why-box:has(.tcm-why-panel){min-height:var(--tcm-why-h, auto)}
/* The reveal, and why it is built this way.
----------------------------------------------------------------------
The obvious build animates clip-path on the face. It works, and it looks
wrong next to the flap: clip-path animates on the main thread while the
flap's `translate` runs on the compositor, so the two drift apart frame to
frame and the cut appears to stutter behind a perfectly smooth flap.
Measured: 61 frames, none longer than 16.8ms, one transition start, no
cancels - nothing was dropping. They were simply on different threads.
So nothing animates the cut. The wrapper carries a STATIC clip and slides;
the face inside slides back by exactly the same amount and therefore never
moves. Both are transforms, both composited, both in step with the flap. */
.tcm-why-cut{
position:absolute; inset:0; z-index:2;
clip-path:var(--tcm-tear-clip);
translate:0 0;
transition:translate .82s cubic-bezier(.22,.61,.36,1);
}
.tcm-why-box.is-open .tcm-why-cut{
translate:calc(-1 * var(--tcm-tear-travel) * var(--tcm-why-bw))
calc(-1 * var(--tcm-tear-travel) * var(--tcm-why-bh));
}
.tcm-why-face{
position:absolute; inset:0;
display:flex; flex-direction:column; align-items:center; justify-content:space-evenly;
gap:10px;
padding:34px 30px 66px; /* foot clearance for the toggle */
text-align:center;
/* A white sheet, not parchment. The torn corner artwork IS white paper, so a
white card makes the graphic literal: you tear a sheet off and the paper
desk underneath shows through. It also lifts the card's own text off the
warm ground. */
background:#fff;
/* the exact inverse of the wrapper's slide, so the card's front stays put
while the clip edge travels across it */
translate:0 0;
transition:translate .82s cubic-bezier(.22,.61,.36,1);
}
.tcm-why-box.is-open .tcm-why-face{
translate:calc(var(--tcm-tear-travel) * var(--tcm-why-bw))
calc(var(--tcm-tear-travel) * var(--tcm-why-bh));
}
/* The shadow the torn edge throws onto the sheet below. A strip rotated to the
cut's angle, sliding on the same transition - its own pixels never change,
so it rasterises once. It replaces a drop-shadow filter on the face, which
had to re-blur the whole card on every frame of the reveal. */
.tcm-why-box:has(.tcm-why-panel)::before{
content:"";
position:absolute; z-index:1; pointer-events:none;
left:0; top:0;
width:calc(8 * (var(--tcm-why-bw, 400px) + var(--tcm-why-bh, 400px)));
height:20px;
background:linear-gradient(to bottom, rgba(11,11,11,.22), rgba(11,11,11,0));
transform-origin:0 0;
transform:translate(calc(var(--tcm-tear-anchor-x) * var(--tcm-why-bw)), var(--tcm-why-bh))
rotate(var(--tcm-tear-angle))
translateX(-50%);
/* Hidden while the card is shut. The strip runs along the STRAIGHT part of
the cut, but at rest the only cut in view is the curved part tucked under
the flap, and the flap artwork brings its own shadow there. With both
showing, the parchment lightened in the gap between them and read as a
sliver of white along the curl. It appears the instant the card opens and
fades only once it has closed again, so the travelling tear always has
its shadow. */
opacity:0;
transition:transform .82s cubic-bezier(.22,.61,.36,1), opacity .18s ease .7s;
}
.tcm-why-box.is-open::before{
opacity:1;
transition:transform .82s cubic-bezier(.22,.61,.36,1), opacity 0s;
transform:translate(
calc(var(--tcm-tear-anchor-x) * var(--tcm-why-bw) - var(--tcm-tear-travel) * var(--tcm-why-bw)),
calc(var(--tcm-why-bh) - var(--tcm-tear-travel) * var(--tcm-why-bh)))
rotate(var(--tcm-tear-angle))
translateX(-50%);
}
/* The torn corner itself, lifted straight out of the paper texture that used to
be printed on these cards. Its two ragged edges meet in a corner that already
points up and left, so it travels along the diagonal unrotated, leading the
tear. It now appears ONLY on cards that have something underneath, which
turns it from decoration into the affordance that says so. */
.tcm-why-box:has(.tcm-why-panel)::after{
content:"";
position:absolute; z-index:3; pointer-events:none;
/* flush into the corner at its drawn proportions, the way it sits in the
Figma. The cut is derived from this placement, not the other way round. */
right:0; bottom:0;
width:28%; aspect-ratio:460 / 335;
background:url("../brand/why-tear-corner.png") center / contain no-repeat;
translate:0 0;
transition:translate .82s cubic-bezier(.22,.61,.36,1);
}
/* The flap and the cut travel together, both off the same generated value, so
they cannot drift apart.
The card's size has to come in as a variable. Percentages on `translate`
resolve against the element's OWN box, so -90% here would move the flap 90%
of its own width - roughly a quarter of the distance - and it would trail
the tear it is meant to be leading. tcm-interactions.js keeps these current. */
.tcm-why-box.is-open::after{
translate:calc(-1 * var(--tcm-tear-travel) * var(--tcm-why-bw, 100%))
calc(-1 * var(--tcm-tear-travel) * var(--tcm-why-bh, 100%));
}
/* The panel stops being a panel and becomes the sheet underneath. It carries
the paper colour, not the copy does: the copy must keep its natural height
for the card to be measured from it, and a background on something with a
natural height would leave bare card above and below whenever the face
happens to be the taller of the two layers. */
.tcm-why-panel{
position:absolute; inset:0; z-index:0; pointer-events:auto;
display:flex; flex-direction:column; justify-content:center;
/* the parchment the card is lying on, so tearing the sheet away reveals the
desk rather than another sheet */
background-color:var(--tcm-paper);
background-image:var(--tcm-paper-tile);
background-blend-mode:multiply;
}
.tcm-why-paper{
border:0;
background:transparent;
padding:34px 30px 66px; /* same foot clearance as the face */
}
.tcm-why-paper p{margin:0}
.tcm-why-paper p + p{margin-top:1.1em}
/* The toggle floats above both layers. It cannot live inside the face: the face
is torn away completely, and a close control that goes with it is no close
control at all. */
.tcm-why-more{
position:absolute; left:0; right:0; bottom:18px; z-index:4;
margin:0;
display:inline-flex; align-items:center; justify-content:center;
border:0; box-shadow:none; text-decoration:none;
cursor:pointer;
}
.tcm-why-more i{font-size:1rem; transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.tcm-why-box.is-open .tcm-why-more i{transform:rotate(90deg)}
@media (max-width:575px){
.tcm-why-face,
.tcm-why-paper{padding:30px 24px 58px}
/* smaller and tighter than on wider screens purely to keep the card's height
down - it has to fit this copy whether it is open or shut. Two ancestors
deep to beat the element rule Bricks emits for the text size. */
#brxe-whysec .tcm-why-paper{font-size:1.4rem; line-height:1.56}
}
@media (prefers-reduced-motion:reduce){
.tcm-why-cut,.tcm-why-face,.tcm-why-more i,
.tcm-why-box:has(.tcm-why-panel)::before,
.tcm-why-box:has(.tcm-why-panel)::after{
transition-duration:.01ms !important;
}
}
/* ---- Footer CTA ---------------------------------------------------------
The photograph is a Bricks background on the section itself, not a rule in
here, so it can be swapped and repositioned in the builder like any other
background. One image, used whole: at its natural 4032px it is wider than any
viewport, so centring it means a wider screen simply reveals more of the
scene while the band holds its height. Nothing in this file sets it - Bricks
writes element settings as #id rules, so anything here would fight it.
The sky in that photograph is transparent, and what shows through it is the
same parchment the Why grid above is printed on, so the two sections read as
one continuous sheet with a landscape sitting on it.
That parchment cannot be a second background layer on the section, because
Bricks owns background-image here and offers a single slot. It is a pseudo
element at z-index -1 instead, which paints behind its own parent's
background as long as the parent is not a stacking context. .tcm-cta is
position:relative with no z-index, so it is not one: do not add a z-index,
opacity, transform, filter or isolation to this section without moving the
paper somewhere else first. For the same reason the section's background
COLOUR is deliberately left unset in Bricks - an opaque colour there would
paint over the paper. The colour lives on the pseudo element instead. */
.tcm-cta{position:relative}
.tcm-cta::after{
content:"";
position:absolute; inset:0; z-index:-1; pointer-events:none;
background-color:var(--tcm-paper);
background-image:var(--tcm-paper-tile);
background-repeat:repeat;
background-blend-mode:multiply;
}
/* The scene's sky is transparent, so the ground behind it shows through.
Paper by default; pick the variant that matches the section above so the
ridge line meets it with no seam. Global classes in the builder
(Twin Creek category): tcm-cta--white, tcm-cta--mist. */
.tcm-cta.tcm-cta--white::after{background-color:var(--tcm-white); background-image:none}
.tcm-cta.tcm-cta--mist::after{background-color:var(--tcm-mist); background-image:none}
/* At phone widths only a tenth of the scene is visible, and the bright band of
water across the middle of it can land behind the buttons - measured 2.17:1
for the outlined one against white. A soft scrim restores the copy without
touching the photograph, its framing, or anything set in the builder. It
starts below the ridge line rather than at the top edge, so the parchment
showing through the sky stays parchment instead of going muddy. */
@media (max-width:767px){
.tcm-cta::before{
content:"";
position:absolute; inset:0; z-index:0; pointer-events:none;
background:linear-gradient(to bottom,
rgba(11,11,11,0) 15%,
rgba(11,11,11,.58) 27%,
rgba(11,11,11,.58) 86%,
rgba(11,11,11,0) 100%);
}
.tcm-cta > *{position:relative; z-index:1}
}
.tcm-cta-btns{flex-wrap:wrap}
/* Outlined variant. The ripple fills with slate, so the label and the keyline
both stay legible as it lands. */
/* Bricks fills every .bricks-button from
`.bricks-button:not([class*="bricks-background-"]):not([class*="bricks-color-"]):not(.outline)`,
which is four classes of specificity. A bare .tcm-btn-ghost loses to it, so
until now the class only looked like it worked: the buttons that read as
outlined were the ones where Bricks ALSO wrote an #id rule with a
transparent fill. Match its shape and add one class, so the utility is
honest on its own wherever it is used. */
.tcm-btn-ghost{background-color:transparent}
.bricks-button.tcm-btn-ghost:not([class*="bricks-background-"]):not([class*="bricks-color-"]):not(.outline){
background-color:transparent;
}
/* ---- Hero -------------------------------------------------------------- */
/* The script word inside the hero headline. Sized in em so it keeps the
Figma ratio (116/96) as the clamped h1 scales down. */
.tcm-script,
.tcm-script-hero{
font-family:var(--tcm-font-script);
font-size:1.21em;
color:var(--tcm-primary);
font-weight:400;
}
/* ---- Background Video element (elements/background-video.php) ----------
The poster image lives on the section itself, so if the video never loads
nothing changes visually. The root has NO z-index on purpose: it must not be
a stacking context, or the pause button could not rise above the section's
content while the video and veil stay beneath it. */
.tcm-bgvideo{position:absolute;inset:0;pointer-events:none}
.tcm-bgvideo__media,
.tcm-bgvideo__veil{position:absolute;inset:0;z-index:0;overflow:hidden}
.tcm-bgvideo__media video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity .6s ease;
}
.tcm-bgvideo__media video.is-ready{opacity:1}
/* The veil darkens the whole frame evenly; any directional scrim for the text
sits above it as its own layer (the hero's is #brxe-herovel). Its colour is
the element's "Darkening overlay" control. Fades in with the video, so the
still image underneath keeps the exposure it was graded at. */
.tcm-bgvideo__veil{background-color:rgba(11,11,11,.4);opacity:0;transition:opacity .6s ease}
.tcm-bgvideo:has(video.is-ready) .tcm-bgvideo__veil{opacity:1}
/* Bottom right, above the content (the hero row is z-index 2) and matched to
the quote slider's arrows. */
.tcm-bgvideo__pause{
position:absolute; z-index:3; right:28px; bottom:28px;
width:44px; height:44px;
display:grid; place-items:center;
padding:0;
border:2px solid rgba(255,255,255,.8);
border-radius:50%;
background:rgba(11,11,11,.35);
color:#fff;
cursor:pointer;
pointer-events:auto;
transition:border-color .3s ease, color .3s ease, background-color .3s ease;
}
.tcm-bgvideo__pause[hidden]{display:none}
.tcm-bgvideo__pause i{font-size:1.3rem; line-height:1}
.tcm-bgvideo__pause .fa-play{margin-left:2px} /* optical centring */
.tcm-bgvideo__pause:hover{border-color:var(--tcm-primary); color:var(--tcm-primary); background:rgba(11,11,11,.55)}
.tcm-bgvideo__pause:focus-visible{outline:2px solid #fff; outline-offset:3px}
@media (max-width:767px){
.tcm-bgvideo__pause{right:18px; bottom:18px; width:40px; height:40px}
}
/* Scrim. Measured: the brightest 10% of background behind the H1 was 1.4:1
against a 3:1 minimum for large text, because the sunset punches through
between the letters. Weighted to the left, where the text sits, so the
photograph keeps its sky on the right. */
#brxe-herovel{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(90deg, rgba(11,11,11,.82) 0%, rgba(11,11,11,.66) 38%, rgba(11,11,11,.30) 66%, rgba(11,11,11,.06) 100%),
linear-gradient(180deg, rgba(11,11,11,.30) 0%, rgba(11,11,11,0) 30%, rgba(11,11,11,.28) 100%);
}
/* Scroll cue */
#brxe-heroscr{opacity:.85}
#brxe-heroscr i{font-size:12px}
/* NOTE: these need the section ID as well. Bricks emits its own per-element
CSS (#brxe-herorow{...}) AFTER this stylesheet, so a single-ID selector ties
on specificity and loses on order. Prefixing wins without !important. */
@media (max-width:900px){
#brxe-herosec #brxe-herorow{flex-direction:column;align-items:flex-start;row-gap:30px}
#brxe-herosec #brxe-herorul{display:none}
#brxe-herosec #brxe-herolft,
#brxe-herosec #brxe-herorgt{width:100%}
}
/* ---- Map / Make / Move (homepage) ---------------------------------------
The Marketing Services columns (.tcm-paddle-col, below), with the step and
its timing above each head and the longer homepage paragraph under the
lede. Order: the FAQ's green hand-drawn arrow on each divider, pointing on
to the next step (down, when the steps stack). */
.tcm-paddle-col__step{margin:0 0 10px; font-size:1.2rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1.3; color:var(--tcm-primary)}
.tcm-paddle-cols--steps .tcm-paddle-col__out{margin:4px 0 14px}
.tcm-paddle-col__body{margin:0; max-width:36ch}
/* No circle and no box: the divider itself has a gap where the arrow sits
(border-image, below), so the arrow works on any ground, the paper band
included (it sat on a white box until 2026-10-14, which showed on paper).
The PNG has wide margins, so the mask overhangs the arrow's box. */
.tcm-step-arrow{position:absolute !important; left:-20px; top:20px; width:40px; height:56px; z-index:2 !important}
.tcm-paddle-cols--steps .tcm-paddle-col + .tcm-paddle-col{border-image:linear-gradient(to bottom, rgba(11,11,11,.12) 0 10px, transparent 10px 86px, rgba(11,11,11,.12) 86px) 1}
.tcm-step-arrow::before{
content:""; position:absolute; inset:-18px -22px; background:var(--tcm-forest);
-webkit-mask:url("../brand/hand-arrow.png") center/100% 100% no-repeat;
mask:url("../brand/hand-arrow.png") center/100% 100% no-repeat;
}
/* The heading above (the mega menu's icon and name) and Start here below. */
.tcm-3ps-head{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap}
.tcm-3ps-head img{height:clamp(48px, 4.4vw, 64px); width:auto}
.tcm-3ps-head h2{margin:0; text-align:center}
.tcm-3ps-foot{display:flex; justify-content:center; width:100%; margin-top:48px}
@media (max-width:900px){
.tcm-paddle-cols--steps .tcm-paddle-col + .tcm-paddle-col{padding-top:44px; border-image:linear-gradient(to right, rgba(11,11,11,.12) 0 calc(50% - 38px), transparent calc(50% - 38px) calc(50% + 38px), rgba(11,11,11,.12) calc(50% + 38px)) 1}
.tcm-step-arrow{left:50%; top:-20px; margin-left:-28px; width:56px; height:40px}
.tcm-step-arrow::before{inset:-22px -18px; transform:rotate(90deg)}
.tcm-paddle-col__body{max-width:none}
}
@media (max-width:767px){
#brxe-herosec #brxe-heroscr{display:none}
#brxe-herosec{padding-top:64px;padding-bottom:64px}
}
/* Header height, consumed by the mega menu's max-height guard. */
#brx-header{--tcm-header-h:100px}
/* ---- Header + footer chrome ---- */
/* Chevrons are Font Awesome (bundled with Bricks), rendered as , so they
size by font-size and need no rotation - the old custom SVG pointed down and
was rotated -90deg. Custom SVG is reserved for the hand-drawn brand marks
(phone, social, flag), which keep their own sizing below. */
#brx-header .bricks-button i{font-size:12px;line-height:1}
#brx-footer .brxe-text-link i{font-size:11px;line-height:1}
#brx-header .bricks-nav-menu a:not(.bricks-button){color:#fff;text-decoration:none}
#brx-footer a{text-decoration:none}
#brx-header .brxe-image img,#brx-footer .brxe-image img{height:auto;width:100%}
/* The "your marketing partner" callout sits lighter than everything around it
so it reads as a statement rather than competing with the 600-weight labels. */
#brx-footer .tcm-eyebrow{
font-size:var(--tcm-chrome-eyebrow);
line-height:1.35;
font-weight:var(--tcm-weight-callout);
}
#brx-footer #brxe-fcar00{white-space:nowrap}
/* ---- Mega menu ----
Width/left come from megaMenuSelector (#brx-header). Bricks anchors `top` to the
bottom,
which sits above the header's bottom edge, so the panel overlapped the logo and CTA.
Bricks' data-mega-menu-vertical would fix this but is only emitted by the `dropdown` element,
not `nav-menu`, so set top explicitly: top = headerBottom - liTop (li is 24px tall).
single row : header 100px, li centred at 38px -> 62px
two rows : header 112px, li at 72px -> 40px */
#brx-header .bricks-nav-menu>li>.brx-megamenu{
background-color:var(--tcm-navy);
box-shadow:0 12px 24px rgba(0,0,0,.25);
/* 2px under the header's bottom edge: the li sits on a subpixel, and an
exact fit left a hairline gap that showed the page and could drop the
hover on the way down (2026-10-17). The panel paints above the header. */
top:60px;
/* Hard guarantee: the panel opens flush under the header, so the tallest it
may ever be is the viewport minus the header. Scrolls only if it still
does not fit (very short screens, or the stacked layout below 991px). */
max-height:calc(100vh - var(--tcm-header-h,100px));
overflow-y:auto;
overscroll-behavior:contain;
}
/* thin scrollbar, only visible if the guard actually engages */
#brx-header .bricks-nav-menu>li>.brx-megamenu{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
#brx-header .bricks-nav-menu>li>.brx-megamenu::-webkit-scrollbar{width:8px}
#brx-header .bricks-nav-menu>li>.brx-megamenu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:8px}
/* ---- Mobile menu toggle ----
Bricks' own display:none is unlayered with :where() (zero specificity) while its display:block
sits inside @layer bricks - unlayered always wins, so override it here. */
#brx-header .bricks-mobile-menu-toggle{position:relative;width:32px;height:22px;padding:0;border:0;background:none;cursor:pointer;flex:0 0 auto}
#brx-header .bricks-mobile-menu-toggle .bar-top,#brx-header .bricks-mobile-menu-toggle .bar-center,#brx-header .bricks-mobile-menu-toggle .bar-bottom{position:absolute;left:0;width:32px;min-width:32px;height:3px;background-color:#fff;border-radius:2px}
#brx-header .bricks-mobile-menu-toggle .bar-top{top:0}
#brx-header .bricks-mobile-menu-toggle .bar-center{top:9px}
#brx-header .bricks-mobile-menu-toggle .bar-bottom{top:18px}
/* Open state (Bricks adds .show-mobile-menu to .brxe-nav-menu).
Bricks converges both bars on top:50% and rotates them into an X, but its
selector is 4 classes and ours carries an ID, so our resting top:0/18px won
and the bars rotated 18px apart - producing a lopsided ">" that overflowed
the toggle box. Restate the converge at ID specificity. */
#brx-header .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-toggle .bar-top,
#brx-header .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-toggle .bar-bottom{
top:50%;
margin-top:-1.5px;
}
#brx-header .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-toggle .bar-center{opacity:0}
/* Panel. Bricks defaults to a 300px drawer, which on a 390px phone leaves a
strip of the page showing through with no backdrop. Full width instead. */
#brx-header .bricks-mobile-menu-wrapper{background-color:var(--tcm-navy);width:100%;max-width:100%}
/* Bricks paints the panel with a ::before in its own near-black (#23282d),
which sits above the wrapper's own background. Recolour it to TCM navy. */
#brx-header .bricks-mobile-menu-wrapper::before{background-color:var(--tcm-navy)}
#brx-header .bricks-mobile-menu{padding:80px 28px 48px}
/* Bricks ships the mobile menu links at line-height:60px, which with padding
gave 88px-tall rows and a very airy list. Reset it. */
#brx-header .bricks-mobile-menu a{color:#fff;font-size:var(--tcm-chrome-micro);text-transform:uppercase;letter-spacing:var(--tcm-track-button);line-height:1.25;padding:13px 0;display:inline-block}
/* Services and Industries now carry real child menu items, so each surface
gets the right one: the mega menu template on desktop, the plain accordion
submenu on mobile. Bricks renders BOTH into the markup. */
@media (min-width:768px){
#brx-header .bricks-nav-menu .brx-has-megamenu > .sub-menu{display:none}
}
@media (max-width:767px){
/* the mega menu panel is far too large for a drawer */
#brx-header .bricks-mobile-menu .brx-megamenu{display:none}
}
/* Submenu caret. Bricks ships its own inline SVG; swap it for the bundled
Font Awesome chevron so it matches every other chevron on the site.
Points down when collapsed, flips up when open (down rather than right
since 2026-10-14: these open a menu below, not a page). Bricks sets
aria-expanded on the button, which is the correct hook and needs no extra
class. */
#brx-header .brx-submenu-toggle > button{
display:inline-flex;
align-items:center;
justify-content:center;
background:none;
border:0;
padding:0 0 0 10px;
color:#fff;
cursor:pointer;
}
#brx-header .brx-submenu-toggle > button svg{display:none}
#brx-header .brx-submenu-toggle > button::after{
font-family:"Font Awesome 6 Solid";
font-weight:900;
content:"\f078"; /* chevron-down */
font-size:11px;
line-height:1;
display:block;
transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
#brx-header .brx-submenu-toggle > button[aria-expanded="true"]::after{
transform:rotate(180deg);
}
/* Mobile submenu list */
#brx-header .bricks-mobile-menu .sub-menu{
padding:2px 0 10px 18px;
display:flex;
flex-direction:column;
}
#brx-header .bricks-mobile-menu .sub-menu a{
font-size:1.5rem;
font-weight:300;
letter-spacing:.06em;
padding:9px 0;
opacity:.9;
}
/* Mobile menu foot: contact block + CTA, injected by tcm-interactions.js.
The header's phone and CTA are hidden below 767px, so without this a phone
has no click-to-call and no primary action anywhere in the chrome.
margin-top:auto pins it to the bottom of the flex column Bricks provides. */
#brx-header .tcm-mobile-foot{
margin-top:auto;
padding:28px 28px 40px;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:14px;
border-top:1px solid rgba(255,255,255,.14);
}
#brx-header .tcm-mobile-foot__label{
margin:0;
font-family:var(--tcm-font-body);
font-size:var(--tcm-chrome-micro);
font-weight:600;
letter-spacing:var(--tcm-track-button);
text-transform:uppercase;
line-height:1.1;
color:#fff;
}
#brx-header .tcm-mobile-foot__link{
font-family:var(--tcm-font-body);
font-size:var(--tcm-chrome-micro);
font-weight:300;
letter-spacing:var(--tcm-track-button);
text-transform:uppercase;
line-height:1.3;
color:#fff;
text-decoration:none;
padding:2px 0;
}
#brx-header .tcm-mobile-foot__link:focus-visible{outline:2px solid var(--tcm-primary);outline-offset:3px}
#brx-header .tcm-mobile-foot__cta{
margin-top:6px;
display:inline-flex;
align-items:center;
gap:10px;
font-family:var(--tcm-font-body);
font-size:var(--tcm-chrome-micro);
font-weight:400;
letter-spacing:var(--tcm-track-button);
text-transform:uppercase;
line-height:1.1;
color:#fff;
text-decoration:none;
background:var(--tcm-primary);
border-radius:12px;
padding:14px 28px;
}
/* Phone menu: Services and Industries drill-down panels (initMobilePanels in
tcm-interactions.js, data from inc/mobile-nav.php). Each panel covers the
menu and slides in from the right; the one it leaves eases off left. */
#brx-header .tcm-mnav-item .tcm-mnav-sub{
display:block; margin-top:4px; font-size:1.3rem; font-weight:300; letter-spacing:0; text-transform:none;
color:rgba(255,255,255,.7);
}
#brx-header .tcm-mnav-item > .brx-submenu-toggle > button::after{content:"\f054"} /* chevron-right: opens a panel */
#brx-header .tcm-mnav-item > .brx-submenu-toggle > button[aria-expanded="true"]::after{transform:none}
#brx-header .bricks-mobile-menu-wrapper{overflow-x:hidden}
#brx-header .bricks-mobile-menu-wrapper.tcm-mnav-open{overflow-y:hidden}
#brx-header .tcm-mnav__panel{
position:absolute; inset:0; z-index:2; overflow-y:auto; overscroll-behavior:contain;
padding:0 0 48px; background:var(--tcm-navy); color:#fff;
transform:translateX(100%); visibility:hidden;
transition:transform .28s cubic-bezier(.22,.61,.36,1), visibility 0s .28s;
}
#brx-header .tcm-mnav__panel.is-current{transform:none; visibility:visible; transition:transform .28s cubic-bezier(.22,.61,.36,1), visibility 0s}
#brx-header .tcm-mnav__panel.is-left{transform:translateX(-30%)}
/* Back stays put while a long stage scrolls under it, level with the menu's X.
The gap above is a margin: sticky offsets count from inside the panel's padding. */
#brx-header .tcm-mnav__back{
position:sticky; top:0; z-index:1; width:100%;
display:flex; align-items:center; gap:10px; margin:62px 0 6px; padding:18px 28px 14px; background:var(--tcm-navy); border:0; cursor:pointer;
font-family:var(--tcm-font-body); font-size:var(--tcm-chrome-micro); font-weight:400; letter-spacing:var(--tcm-track-button);
text-transform:uppercase; line-height:1.25; color:rgba(255,255,255,.8);
}
#brx-header .tcm-mnav__back::before{font-family:"Font Awesome 6 Solid"; font-weight:900; content:"\f053"; font-size:11px; line-height:1}
#brx-header .tcm-mnav__title{
margin:0; padding:4px 28px 10px; font-family:var(--tcm-font-body); font-size:var(--tcm-chrome-micro); font-weight:600;
letter-spacing:var(--tcm-track-button); text-transform:uppercase; color:var(--tcm-primary);
}
#brx-header .tcm-mnav__row{
display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; margin:0; padding:16px 28px;
background:none; border:0; border-top:1px solid rgba(255,255,255,.12); cursor:pointer; text-align:left; text-decoration:none;
font-family:var(--tcm-font-body); color:#fff;
}
#brx-header .tcm-mnav__row:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
#brx-header .tcm-mnav__text{display:flex; flex-direction:column; gap:4px; min-width:0}
#brx-header .tcm-mnav__t{font-size:var(--tcm-chrome-micro); font-weight:400; letter-spacing:var(--tcm-track-button); text-transform:uppercase; line-height:1.25}
#brx-header .tcm-mnav__s{font-size:1.3rem; font-weight:300; line-height:1.35; color:rgba(255,255,255,.7)}
#brx-header .tcm-mnav__chev::after{font-family:"Font Awesome 6 Solid"; font-weight:900; content:"\f054"; font-size:11px; line-height:1; display:block}
#brx-header .tcm-mnav__head{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px; padding:0 28px 8px}
#brx-header .tcm-mnav__word{font-family:var(--tcm-font-script); font-size:4.4rem; line-height:1; color:#fff}
#brx-header .tcm-mnav__plain{font-size:1.4rem; font-weight:300; color:rgba(255,255,255,.75)}
#brx-header .tcm-mnav__group{
margin:0; padding:20px 28px 6px; font-family:var(--tcm-font-body); font-size:1.2rem; font-weight:600; line-height:1.3;
letter-spacing:.14em; text-transform:uppercase; color:var(--tcm-primary);
}
#brx-header .tcm-mnav__list{margin:0 0 4px; padding:0; list-style:none}
#brx-header .tcm-mnav__list a{
display:block; padding:9px 28px; font-family:var(--tcm-font-body); font-size:1.5rem; font-weight:300; letter-spacing:.02em;
line-height:1.35; text-transform:none; color:#fff; opacity:.92;
}
#brx-header .tcm-mnav__panel .tcm-mnav__row[href]{margin-top:16px}
#brx-header .tcm-mnav__panel .tcm-mnav__row[data-push] + .tcm-mnav__row[href]{margin-top:0}
#brx-header .tcm-mnav a:focus-visible,#brx-header .tcm-mnav button:focus-visible{outline:2px solid var(--tcm-primary); outline-offset:-2px}
@media (prefers-reduced-motion:reduce){
#brx-header .tcm-mnav__panel,#brx-header .tcm-mnav__panel.is-current{transition:none}
}
/* ---- STATE 2: menu drops to its own row (single row needs ~1473px at 16px nav type) ---- */
@media (max-width:1499px){
#brx-header #brxe-hrow00{flex-wrap:wrap;height:auto;row-gap:12px;padding-top:16px;padding-bottom:16px}
#brx-header #brxe-hlogo0{order:1}
#brx-header #brxe-hcta00{order:2}
#brx-header #brxe-hnav00{order:3;width:100%}
#brx-header #brxe-hnav00 .bricks-nav-menu{width:100%;justify-content:center;flex-wrap:wrap}
#brx-header .bricks-nav-menu>li>.brx-megamenu{top:38px}
#brx-header{--tcm-header-h:112px}
}
/* Services mega menu: a stage's groups and links, from the Service posts
(elements/service-groups.php, Menu style). The links keep the old
hand-made ones' type; each group gets a small orange label, the site's
small-label style. The header's hover underline already covers them
(#brx-header .bricks-nav-menu a). */
.tcm-svc-menu{display:flex; flex-direction:column; gap:16px}
.tcm-svc-menu__label{
margin:0 0 4px; font-family:var(--tcm-font-body); font-size:1.2rem; font-weight:600; line-height:1.3;
letter-spacing:.14em; text-transform:uppercase; color:var(--tcm-primary);
}
.tcm-svc-menu ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px}
/* the header's nav rules give list items a 27px line; match the link */
#brx-header .tcm-svc-menu li{margin:0; padding:0; font-size:var(--tcm-mega-link); line-height:1.35}
#brx-header .tcm-svc-menu a{
display:inline-block; font-family:var(--tcm-font-body); font-weight:300; font-size:var(--tcm-mega-link);
line-height:1.35; letter-spacing:0; text-transform:none; color:#fff;
}
/* ---- Footer + mega menu columns stack ---- */
@media (max-width:991px){
#brx-footer #brxe-frow00{flex-direction:column;row-gap:40px}
#brx-footer #brxe-fcol01,#brx-footer #brxe-fcol02,#brx-footer #brxe-fcol03{width:100%}
#brx-header .brx-megamenu .brxe-block{flex-direction:column;row-gap:28px}
#brx-header .brx-megamenu .brxe-div{width:100%}
}
/* Between ~768 and 900 the logo (300px) plus the phone and CTA no longer fit
one row, so the CTA wrapped and the header grew to three rows / 160px.
Shrink the logo and tighten the CTA so it stays two rows down to 768. */
@media (max-width:900px){
#brx-header #brxe-hlogo0{width:220px}
#brx-header #brxe-hcta00{column-gap:16px}
}
/* ---- STATE 1b: laptops (992-1499px) keep ONE row (2026-10-17, option B).
Smaller logo, nav type and button. The phone becomes a pill: the number
shows when there is room; below 1300px it folds into a round icon that
opens out to the left on hover or keyboard focus, over the nav, so the
number is always one hover away. The phone link's rules carry an extra id:
the brush-underline rules further down would otherwise win. ---- */
@media (min-width:992px) and (max-width:1499px){
#brx-header{--tcm-header-h:80px}
#brx-header #brxe-hrow00{flex-wrap:nowrap;height:80px;padding-top:0;padding-bottom:0;column-gap:20px}
#brx-header #brxe-hlogo0{order:1;flex:none;width:clamp(190px, 17vw, 240px)}
#brx-header #brxe-hnav00{order:2;width:auto;flex:1 1 auto;min-width:0}
#brx-header #brxe-hnav00 .bricks-nav-menu{justify-content:center;flex-wrap:nowrap}
#brx-header #brxe-hnav00 .bricks-nav-menu > li{margin-left:clamp(16px, 2vw, 28px)}
#brx-header #brxe-hnav00 .bricks-nav-menu > li:first-child{margin-left:0}
#brx-header #brxe-hnav00 .bricks-nav-menu a{font-size:clamp(14px, 1.15vw, 15px);letter-spacing:.09em}
/* li centred in 80px, ~22px tall: top = 80 - 28.75, less 2px of overlap (see the mega menu note) */
#brx-header .bricks-nav-menu>li>.brx-megamenu{top:49px}
#brx-header #brxe-hcta00{order:3;flex:none;column-gap:14px}
#brx-header #brxe-hbtn00{font-size:13px;padding:11px 20px;letter-spacing:.1em}
#brx-header #brxe-hph000{position:relative;display:flex;justify-content:flex-end;align-items:center;height:44px;min-width:44px;column-gap:0}
#brx-header #brxe-hphic0{position:absolute;right:11px;top:11px;width:22px;height:22px;z-index:2;pointer-events:none}
#brx-header #brxe-hph000 #brxe-hphtx0{
display:flex;align-items:center;justify-content:flex-end;height:44px;box-sizing:border-box;
padding:0 44px 0 18px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:var(--tcm-navy);
white-space:nowrap;overflow:hidden;font-size:14px;letter-spacing:.06em;
transition:max-width .3s cubic-bezier(.22,.61,.36,1),padding .3s cubic-bezier(.22,.61,.36,1),border-color .2s ease;
}
#brx-header #brxe-hph000 #brxe-hphtx0::after{display:none}
#brx-header #brxe-hph000 #brxe-hphtx0:hover,#brx-header #brxe-hph000 #brxe-hphtx0:focus-visible{border-color:var(--tcm-primary);outline:none}
}
@media (min-width:992px) and (max-width:1299px){
#brx-header #brxe-hph000{width:44px}
/* folded: only the icon shows; the number is clipped off the left */
#brx-header #brxe-hph000 #brxe-hphtx0{position:absolute;right:0;top:0;z-index:1;width:max-content;max-width:44px;padding-left:0}
#brx-header #brxe-hph000 #brxe-hphtx0:hover,#brx-header #brxe-hph000 #brxe-hphtx0:focus-visible{max-width:260px;padding-left:18px}
}
/* small laptops / tablets in landscape: tighter still */
@media (min-width:992px) and (max-width:1099px){
#brx-header #brxe-hrow00{column-gap:16px}
#brx-header #brxe-hlogo0{width:170px}
#brx-header #brxe-hnav00 .bricks-nav-menu > li{margin-left:14px}
#brx-header #brxe-hnav00 .bricks-nav-menu a{font-size:13.5px;letter-spacing:.07em}
#brx-header #brxe-hcta00{column-gap:10px}
#brx-header #brxe-hbtn00{padding:10px 16px;letter-spacing:.08em}
}
@media (min-width:992px) and (max-width:1299px) and (prefers-reduced-motion:reduce){
#brx-header #brxe-hph000 #brxe-hphtx0{transition:none}
}
/* ---- STATE 3: hamburger. Phone + CTA are hidden here. ---- */
@media (max-width:767px){
#brx-header #brxe-hnav00 .bricks-mobile-menu-toggle{display:block}
#brx-header #brxe-hnav00 .bricks-nav-menu-wrapper{display:none}
#brx-header #brxe-hsect0{padding-left:20px;padding-right:20px}
#brx-header #brxe-hrow00{flex-wrap:nowrap;padding-top:14px;padding-bottom:14px}
#brx-header #brxe-hlogo0{order:1;width:200px;max-width:52vw}
#brx-header #brxe-hnav00{order:2;width:auto}
#brx-header #brxe-hcta00{display:none}
}
/* ---- Header sticks, slides away while scrolling down, comes back on the way
up (initRevealHeader in tcm-interactions.js). Phones since 2026-10-16, every
width since 2026-10-17. Moved with `top`, not a transform: a transform would
make the header the containing block of the fixed mobile menu panel and
shrink the open menu to the header's size. ---- */
#brx-header{position:sticky; top:var(--wp-admin--admin-bar--height, 0px); z-index:999; transition:top .25s ease}
#brx-header.tcm-hdr-away{top:calc(-1 * var(--tcm-hdr-h, 100px) - 4px)}
.tcm-filterbar.is-sticky{top:calc(var(--wp-admin--admin-bar--height, 0px) + var(--tcm-hdr-shown, 0px)); transition:top .25s ease}
/* the admin bar scrolls with the page on small screens */
@media (max-width:600px){ #brx-header{top:0} }
@media (prefers-reduced-motion:reduce){
#brx-header,.tcm-filterbar.is-sticky{transition:none}
}
/* ---- Link hover: brush-stroke underline ---------------------------------
The mark is a static tapered SVG; a clip reveals it left to right, so the
stroke keeps its drawn character at any link width rather than stretching.
IMPORTANT: the mark is absolutely positioned with a negative offset and adds
NO padding. The mega menu's `top` is derived from the
being 24px tall
(see the mega menu note above), so growing the link box would misplace it. */
/* Selector note: Bricks wraps any link that has a submenu -
li > div.brx-submenu-toggle > a
while plain items are just li > a. Targeting `li > a` therefore missed
Services and Industries entirely, which is why the two mega menu items had
no hover at all. `.bricks-nav-menu a` covers every shape, including the
links inside .brx-megamenu (which lives inside the same li). */
#brx-header .bricks-nav-menu a:not(.bricks-button),
#brx-header #brxe-hphtx0,
#brx-footer .brxe-text-link{
position:relative;
}
#brx-header .bricks-nav-menu a:not(.bricks-button)::after,
#brx-header #brxe-hphtx0::after,
#brx-footer .brxe-text-link::after{
content:"";
position:absolute;
left:0; right:0; bottom:-7px; height:11px;
z-index:999; /* above the panel, which Bricks sets to 998 */
background:var(--tcm-brush) no-repeat left center/100% 100%;
clip-path:inset(0 100% 0 0);
transition:clip-path .34s cubic-bezier(.22,.61,.36,1);
pointer-events:none;
}
#brx-header .bricks-nav-menu a:not(.bricks-button):hover::after,
#brx-header .bricks-nav-menu a:not(.bricks-button):focus-visible::after,
#brx-header #brxe-hphtx0:hover::after,
#brx-header #brxe-hphtx0:focus-visible::after,
#brx-footer .brxe-text-link:hover::after,
#brx-footer .brxe-text-link:focus-visible::after{
clip-path:inset(0 0 0 0);
}
/* ---- Headline emphasis: the swoop -------------------------------------
Italicise words in any heading and they get the orange brush stroke instead
of italics. In the Bricks builder: select the words in the heading, then the
I button in the inline toolbar (or Cmd+I). That writes ; typing by
hand works the same. Emphasis in a heading is always the swoop - one rule,
nothing to remember.
i:not([class]) because Font Awesome icons are also elements, always
with a class; the editor's italic never has one. .tcm-swoop is kept for the
rare case outside a heading.
The stroke is the link brush (--tcm-brush), sized in em so it scales with
the heading, behind the letters and across the baseline, so it reads as a
stroke of the brush under the word rather than a ruled underline. nowrap
keeps the words and their stroke on one line. */
:is(h1,h2,h3,h4,h5,h6) :is(em, i:not([class])),
.tcm-swoop{
position:relative;
z-index:0;
font-style:normal;
white-space:nowrap;
}
:is(h1,h2,h3,h4,h5,h6) :is(em, i:not([class]))::after,
.tcm-swoop::after{
content:"";
position:absolute;
left:-2%; right:-2%;
bottom:-.08em; height:.3em;
z-index:-1;
background:var(--tcm-brush) no-repeat left center/100% 100%;
pointer-events:none;
}
/* Inside an article an italic heading is the writer's emphasis (often a
whole pull quote), not the accent: plain italics that wrap, no stroke. */
.tcm-article :is(h2,h3,h4,h5,h6) :is(em, i:not([class])){font-style:italic; white-space:normal}
.tcm-article :is(h2,h3,h4,h5,h6) :is(em, i:not([class]))::after{content:none}
/* Keep the parent item underlined for as long as its mega menu is open.
Without this the mark vanishes the moment the pointer leaves the link to
enter the panel, so the item being browsed looks unselected. */
#brx-header .bricks-nav-menu > li.open > a::after,
#brx-header .bricks-nav-menu > li.open > .brx-submenu-toggle > a::after{
clip-path:inset(0 0 0 0);
}
/* ---- Button hover: ripple from the pointer ------------------------------
The effect specified in the Figma Motion Notes for the lead-magnet download
button, applied to every button. Pointer position comes from
assets/js/tcm-interactions.js.
The orange keyline is not decoration: the header is already navy, so a
bare slate ripple would dissolve the button into the chrome. It must be a
POSITIVE z-index pseudo-element - negative-z children paint after the
element's own background, so an inset ring or border would be covered. */
:is(#brx-header,#brx-footer,main) .bricks-button:not(.tcm-why-more){
position:relative;
overflow:hidden;
isolation:isolate;
}
:is(#brx-header,#brx-footer,main) .bricks-button:not(.tcm-why-more)::before{
content:"";
position:absolute; z-index:-1;
left:var(--tcm-x,50%); top:var(--tcm-y,50%);
/* aspect-ratio keeps it a true circle at any button width. Sizing by
percentage of the button means a wide button still gets fully covered,
without hard-coding a pixel diameter. */
width:0; aspect-ratio:1; height:auto; border-radius:50%;
background:var(--tcm-navy);
transform:translate(-50%,-50%);
transition:width .5s cubic-bezier(.22,.61,.36,1);
}
:is(#brx-header,#brx-footer,main) .bricks-button:not(.tcm-why-more)::after{
content:"";
position:absolute; inset:0; z-index:1; pointer-events:none;
border:2px solid var(--tcm-primary);
/* inherit, not a literal: the header CTA is 12px but the mega menu's
"start here" is a 99px pill, and a fixed radius shows at the ends */
border-radius:inherit;
opacity:0;
transition:opacity .35s ease;
}
/* 210%. The circle is centred on the pointer, so its RADIUS has to reach the
far corner - diameter >= 2*sqrt(w^2+h^2), which is ~203% of width for a wide
short button. 250% cleared the button in ~190ms and spent the rest of the
half second growing out of sight; 210% covers with a little margin while
keeping most of the duration on-screen. */
:is(#brx-header,#brx-footer,main) .bricks-button:not(.tcm-why-more):is(:hover,:focus-visible)::before{
width:210%;
}
:is(#brx-header,#brx-footer,main) .bricks-button:not(.tcm-why-more):is(:hover,:focus-visible)::after{
opacity:1;
}
/* The outlined CTA is the one button that already carries a keyline of its own.
The shared orange ring is an inset pseudo-element, so it lands a pixel inside
that white border and you see both at once - two outlines, a pixel apart.
So this button opts out of the ring and moves the colour onto the border it
already has - one outline, drawn at the button's true edge rather than inset.
The border is 2px so it carries the same weight as the ring the solid buttons
get, and the button's padding is 1px lighter per side to compensate, keeping
it the same size as the solid button beside it. */
:is(#brx-header,#brx-footer,main) .bricks-button.tcm-btn-ghost{
transition:border-color .35s ease;
}
:is(#brx-header,#brx-footer,main) .bricks-button.tcm-btn-ghost:is(:hover,:focus-visible){
border-color:var(--tcm-primary);
}
:is(#brx-header,#brx-footer,main) .bricks-button.tcm-btn-ghost::after{
content:none;
}
/* Honour the OS setting: state changes still happen, they just do not travel.
Each selector here must be the SAME shape as the rule it switches off, or it
loses on specificity and does nothing. `li > a::after` and a bare
`.bricks-button::before` both did exactly that: :not() adds a class's worth,
so the underline and the ripple kept animating for reduced-motion visitors. */
@media (prefers-reduced-motion:reduce){
#brx-header .bricks-nav-menu a:not(.bricks-button)::after,
#brx-header #brxe-hphtx0::after,
#brx-footer .brxe-text-link::after,
:is(#brx-header,#brx-footer,main) .bricks-button:not(.tcm-why-more)::before,
:is(#brx-header,#brx-footer,main) .bricks-button:not(.tcm-why-more)::after,
:is(#brx-header,#brx-footer,main) .bricks-button.tcm-btn-ghost{
transition-duration:.01ms;
}
}
/* =========================================================================
TEAM PAGE (Figma "Team Page", 238:169)
Section IDs on this page start with `tm`. Rules that must beat a Bricks
#id rule carry the section ID as well, for the reason given in the hero
notes above.
========================================================================= */
/* Spacing on this page comes from each wrapper's gap, not from the theme's
default heading and paragraph margins, which doubled every gap. An element
given its own margin in Bricks still wins (#id beats this). */
[id^="brxe-tm"] :is(h1,h2,h3,h4,h5,h6,p){margin-block:0}
[id^="brxe-tm"] .tcm-prose p:not(:last-child){margin-bottom:1.1em}
/* ---- Inner page header: headline + a stack of photos --------------------
The three photos are ordinary Image elements, so each is swapped in the
builder. They sit in one grid cell and are fanned by rotation; clicking
the stack (initPhotoStacks) sends the top photo to the back. */
.tcm-stack{
position:relative;
display:grid;
width:min(100%, 490px);
aspect-ratio:460/360;
margin-inline:auto;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.tcm-stack .tcm-stack__photo{
grid-area:1/1;
width:100%; height:100%;
object-fit:cover;
border-radius:16px;
border:7px solid #fff;
box-shadow:0 0 20px rgba(11,11,11,.22);
transition:transform .7s cubic-bezier(.22,.61,.36,1);
--r:0deg; --x:0px; --y:0px;
transform:translate(var(--x), var(--y)) rotate(var(--r));
}
/* Resting positions from Figma: 0.88deg at the back, -2.52 in the middle,
4.22 on top. Before the script runs, DOM order decides; after, data-pos. */
/* Order in the HTML sets the stack only until the script takes over; after
that the slot (data-pos) decides. Without :not([data-pos]) the nth-child
rules tied with the data-pos ones and the later rule won, so the third
photo in the HTML stayed on top after a shuffle. */
.tcm-stack .tcm-stack__photo:nth-child(1):not([data-pos]),
.tcm-stack .tcm-stack__photo[data-pos="2"]{--r:.9deg; --x:22px; --y:-8px; z-index:1}
.tcm-stack .tcm-stack__photo:nth-child(2):not([data-pos]),
.tcm-stack .tcm-stack__photo[data-pos="1"]{--r:-2.5deg; --x:6px; --y:6px; z-index:2}
.tcm-stack .tcm-stack__photo:nth-child(3):not([data-pos]),
.tcm-stack .tcm-stack__photo[data-pos="0"]{--r:4.2deg; --x:-10px; --y:12px; z-index:3}
@media (hover:hover){
.tcm-stack:hover .tcm-stack__photo[data-pos="2"]{--r:6deg; --x:64px; --y:-18px}
.tcm-stack:hover .tcm-stack__photo[data-pos="1"]{--r:-6deg; --x:-44px; --y:4px}
.tcm-stack:hover .tcm-stack__photo[data-pos="0"]{--r:2deg; --x:-6px; --y:18px}
}
.tcm-stack:focus-visible{outline:2px solid #fff; outline-offset:12px; border-radius:18px}
/* The photo on its way out swings clear of the stack to the right, then
tucks in at the back. z-index flips at the halfway point, while it is off
to the side, so it never cuts through the photos in front. It starts from
exactly where the photo was (--tcm-from, captured by the script) and ends
at the back slot's own position (var(--x/--y/--r), resting or fanned out
on hover), so nothing snaps when the animation hands back to the slot. */
.tcm-stack .tcm-stack__photo.is-leaving{animation:tcm-stack-out .9s cubic-bezier(.45,0,.25,1) both}
@keyframes tcm-stack-out{
0% {transform:var(--tcm-from, translate(-10px, 12px) rotate(4.2deg)); z-index:4}
48% {transform:translate(58%, -2%) rotate(11deg); z-index:4}
52% {transform:translate(58%, -2%) rotate(11deg); z-index:0}
100%{transform:translate(var(--x), var(--y)) rotate(var(--r)); z-index:0}
}
.tcm-stack__pause{
position:absolute; right:-14px; bottom:-18px; z-index:5;
width:34px; height:34px;
display:grid; place-items:center;
padding:0;
border:2px solid rgba(255,255,255,.8); border-radius:50%;
background:rgba(11,11,11,.35); color:#fff;
font-size:1.1rem;
cursor:pointer;
transition:border-color .3s ease, color .3s ease;
}
.tcm-stack__pause .fa-play{margin-left:2px}
.tcm-stack__pause:hover{border-color:var(--tcm-primary); color:var(--tcm-primary)}
.tcm-stack__pause:focus-visible{outline:2px solid #fff; outline-offset:3px}
@media (max-width:991px){
#brxe-tmhero #brxe-tmherorow{flex-direction:column; align-items:flex-start; row-gap:56px}
#brxe-tmhero #brxe-tmherotxt,
#brxe-tmhero #brxe-tmherostack{width:100%}
}
/* ---- Hybrid model: three columns ---------------------------------------- */
.tcm-hybrid{display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; width:100%}
.tcm-hybrid__card{
display:flex; flex-direction:column; align-items:flex-start; gap:16px;
padding:40px 36px;
border-radius:16px;
}
.tcm-hybrid__card:nth-child(1){background:var(--tcm-paper)}
.tcm-hybrid__card:nth-child(2){background:var(--tcm-forest-tint)}
.tcm-hybrid__card:nth-child(3){background:var(--tcm-mist)}
/* On a mist or paper section the tinted cards disappear: white instead. */
.tcm-hybrid--white .tcm-hybrid__card{background:#fff}
.tcm-tag{
display:inline-block;
padding:5px 14px;
border-radius:9px;
font-family:var(--tcm-font-body);
font-size:1.2rem; font-weight:600; line-height:1.4;
letter-spacing:.1em; text-transform:uppercase;
}
/* The Figma tag on the paper card was paper on paper, so it had no pill at
all. Each tag now takes a 15% tint of its own colour. */
.tcm-tag--orange{background:var(--tcm-primary-tint-15); color:var(--tcm-primary)}
.tcm-tag--forest{background:var(--tcm-forest-tint-15); color:var(--tcm-forest)}
.tcm-tag--muted {background:rgba(85,85,85,.12); color:var(--tcm-ink-muted)}
@media (max-width:991px){
.tcm-hybrid{grid-template-columns:1fr; gap:18px}
.tcm-hybrid__card{padding:30px 26px}
}
/* ---- Photo strip --------------------------------------------------------
Five Image elements in a row at the Figma widths (278/247/419/205/273), so
they keep their proportions as the row narrows. A scrolling strip on
phones, where five across would be matchsticks. */
.tcm-strip{
display:flex; gap:16px; justify-content:center;
width:100%;
padding:6px 16px 20px;
}
.tcm-strip .tcm-strip__photo{
flex:278 1 0; min-width:0;
height:306px;
object-fit:cover;
border-radius:16px;
box-shadow:0 0 15px rgba(11,11,11,.18);
transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.tcm-strip .tcm-strip__photo:nth-child(2){flex-grow:247}
.tcm-strip .tcm-strip__photo:nth-child(3){flex-grow:419}
.tcm-strip .tcm-strip__photo:nth-child(4){flex-grow:205}
.tcm-strip .tcm-strip__photo:nth-child(5){flex-grow:273}
@media (hover:hover){
.tcm-strip .tcm-strip__photo:hover{transform:translateY(-6px) rotate(-1deg)}
.tcm-strip .tcm-strip__photo:nth-child(even):hover{transform:translateY(-6px) rotate(1deg)}
}
@media (max-width:767px){
.tcm-strip{
justify-content:flex-start;
overflow-x:auto; scroll-snap-type:x mandatory;
scrollbar-width:none;
}
.tcm-strip::-webkit-scrollbar{display:none}
.tcm-strip .tcm-strip__photo{flex:0 0 72%; height:280px; scroll-snap-align:center}
}
/* two text columns that stack */
.tcm-cols{display:grid; grid-template-columns:1fr 1fr; gap:48px 83px; width:100%}
/* Split intro: a heading group on the left, its copy and button on the right
(the Team page's "How we work"). Stacks on narrow screens. */
.tcm-split{display:grid; grid-template-columns:1fr 1fr; gap:40px 64px; align-items:center; width:100%}
.tcm-split > .tcm-headgroup{align-items:flex-start}
@media (max-width:900px){ .tcm-split{grid-template-columns:1fr; gap:24px} }
@media (max-width:900px){ .tcm-cols{grid-template-columns:1fr} }
/* a text link with a chevron, used for "meet the team" and friends */
.tcm-textlink{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--tcm-font-body);
font-size:var(--tcm-button); letter-spacing:var(--tcm-track-button);
text-transform:uppercase; line-height:1.2;
color:var(--tcm-ink);
text-decoration:none;
position:relative;
}
.tcm-textlink i{font-size:1.1rem}
.tcm-textlink::after{
content:""; position:absolute; left:0; right:0; bottom:-7px; height:11px;
background:var(--tcm-brush) no-repeat left center/100% 100%;
clip-path:inset(0 100% 0 0);
transition:clip-path .34s cubic-bezier(.22,.61,.36,1);
pointer-events:none;
}
.tcm-textlink:hover::after,.tcm-textlink:focus-visible::after{clip-path:inset(0 0 0 0)}
/* ---- Stats bar ---------------------------------------------------------- */
.tcm-statbar{display:grid; grid-template-columns:repeat(4, 1fr); width:100%}
.tcm-statbar__item{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
padding:4px 24px;
text-align:center;
}
.tcm-statbar__item + .tcm-statbar__item{border-left:1px solid rgba(255,255,255,.15)}
.tcm-statbar__v{
font-family:var(--tcm-font-body); font-weight:700;
font-size:clamp(4rem, 3.9vw, 5.6rem); line-height:1.1;
color:var(--tcm-primary);
}
.tcm-statbar__l{
font-family:var(--tcm-font-body);
font-size:clamp(1.4rem, 1.4vw, 2rem); letter-spacing:.2em; line-height:1.35;
text-transform:uppercase;
color:var(--tcm-mist); opacity:.8;
/* Figma broke "PARTNERSHIPS" mid-word at its 231px box. Words stay whole. */
overflow-wrap:normal; word-break:normal; hyphens:none;
}
@media (max-width:767px){
.tcm-statbar{grid-template-columns:1fr 1fr; row-gap:34px}
.tcm-statbar__item:nth-child(3){border-left:0}
}
/* ---- Team grid + Team Card (elements/team-card.php) ---------------------
The card's head room is padding on the card itself, so the photo can rise
above the face without overflowing anything that clips. The two faces sit
in one grid cell, so the card is as tall as the taller face and nothing
jumps when it turns over. */
.tcm-tgrid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:36px 24px;
width:100%;
}
@media (max-width:1180px){ .tcm-tgrid{grid-template-columns:repeat(3, minmax(0, 1fr))} }
@media (max-width:860px) { .tcm-tgrid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px 18px} }
@media (max-width:540px) { .tcm-tgrid{grid-template-columns:minmax(0, 340px); justify-content:center} }
.tcm-tcard{
--tcm-tcard-head:60px;
--tcm-tcard-ease:cubic-bezier(.22,.61,.36,1);
position:relative;
padding-top:var(--tcm-tcard-head);
perspective:1600px;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.tcm-tcard__inner{
position:relative;
display:grid;
height:100%;
transform-style:preserve-3d;
transition:transform .8s var(--tcm-tcard-ease);
}
.tcm-tcard.is-flipped .tcm-tcard__inner{transform:rotateY(180deg)}
/* A small turn on hover says "this card has another side". */
@media (hover:hover){
.tcm-tcard:hover .tcm-tcard__inner{transform:rotateY(-9deg)}
.tcm-tcard.is-flipped:hover .tcm-tcard__inner{transform:rotateY(171deg)}
}
.tcm-tcard__face{
grid-area:1/1;
display:flex; flex-direction:column;
border-radius:16px;
box-shadow:0 0 15px rgba(11,11,11,.18);
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
/* Front */
.tcm-tcard__front{position:relative; background:#fff}
/* LinkedIn (2026-10-15): the flip chevron's twin, bottom left of the front.
Same size and tint; it fills forest when hovered itself, not with the card,
so the chevron stays the card's main control. */
.tcm-tcard__li{
position:absolute; left:16px; bottom:16px; z-index:5;
width:36px; height:36px;
display:grid; place-items:center;
border-radius:50%;
background:var(--tcm-forest-tint-15);
color:var(--tcm-forest);
text-decoration:none;
transition:background-color .3s ease, color .3s ease;
}
.tcm-tcard__li:hover{background:var(--tcm-forest); color:#fff}
.tcm-tcard__li:focus-visible{outline:2px solid var(--tcm-primary); outline-offset:3px}
.tcm-tcard__media{
position:relative;
aspect-ratio:311/292;
border-radius:16px 16px 0 0;
/* the drawn landscape; the backdrop control sets the variable */
background:var(--tcm-tcard-bg) var(--tcm-tcard-bgx, 50%) center / cover no-repeat, var(--tcm-paper);
border-bottom:4px solid var(--tcm-forest);
}
.tcm-tcard .tcm-tcard__photo{
position:absolute; left:50%; bottom:0;
height:calc(100% + var(--tcm-tcard-head));
width:auto; max-width:none;
translate:-50% 0;
object-fit:contain; object-position:bottom center;
transform-origin:50% 100%;
transition:scale .5s var(--tcm-tcard-ease);
pointer-events:none;
}
@media (hover:hover){
.tcm-tcard:hover .tcm-tcard__photo,
.tcm-tcard:hover .tcm-tcard__shade > span{scale:1.035} /* the silhouette on the back grows with the photo, so the turn stays seamless */
}
.tcm-tcard__body{
flex:1;
display:flex; flex-direction:column; gap:6px;
padding:18px 24px 56px; /* foot room for the flip chevron */
background:var(--tcm-forest-tint);
border-radius:0 0 16px 16px;
}
.tcm-tcard__name{
margin:0;
font-family:var(--tcm-font-display);
font-size:var(--tcm-h5); font-weight:600; line-height:1.15;
color:var(--tcm-ink);
}
.tcm-tcard__role{
margin:0 0 6px;
font-family:var(--tcm-font-body);
font-size:1.15rem; font-weight:600; letter-spacing:.08em; line-height:1.4;
text-transform:uppercase;
color:var(--tcm-primary);
}
.tcm-tcard__bio{
margin:0;
font-size:1.4rem; font-weight:300; line-height:1.55;
color:var(--tcm-ink);
}
/* Back: the Figma "My Why" card. Forest, with the parchment multiplied in so
it reads as a painted card rather than a flat fill. */
.tcm-tcard__back{
transform:rotateY(180deg);
gap:14px;
padding:30px 26px 60px;
background-color:var(--tcm-forest);
background-image:var(--tcm-paper-tile);
background-blend-mode:multiply;
color:#fff;
}
/* The person turned around (2026-10-15): the photo as a darker-green
silhouette, mirrored, in exactly the front's media box, so it seems to turn
with the card. The head rises above the card like on the front (the back no
longer clips its overflow), and it fades out lower down so the shape never
ends in a hard line. */
.tcm-tcard__back > *{position:relative; z-index:1}
.tcm-tcard__back > .tcm-tcard__shade{
position:absolute; z-index:0; top:0; left:0; right:0;
aspect-ratio:311/292;
border-bottom:4px solid transparent; /* the front's media box has a 4px rule the photo stands on */
pointer-events:none;
}
.tcm-tcard__shade > span{
position:absolute; left:50%; bottom:0;
height:calc(100% + var(--tcm-tcard-head));
aspect-ratio:var(--tcm-tcard-ratio, 2/3);
translate:-50% 0;
transform:scaleX(-1);
transform-origin:50% 100%; /* grows from the feet, like the photo */
transition:scale .5s var(--tcm-tcard-ease);
background:#2a4d35;
/* Keep every edge of the box empty: the photos' outermost columns are not
quite transparent, and while the card is tilted and scaled on hover the
GPU samples a pixel past the top edge, which showed as a hairline above
the head. So the box is trimmed and the fade starts transparent. */
clip-path:inset(3px 2px 0);
-webkit-mask:var(--tcm-tcard-photo) center bottom / contain no-repeat, linear-gradient(transparent, #000 6px, #000 70%, transparent);
-webkit-mask-composite:source-in;
mask:var(--tcm-tcard-photo) center bottom / contain no-repeat intersect, linear-gradient(transparent, #000 6px, #000 70%, transparent);
}
/* The sketch and the silhouette mask are CSS images, which ignore lazy loading, so
all 13 cards fetched them on load (about 1.4 MB on Team). They switch on when a
card nears the screen (is-near, initTeamCards);