/*
* ════════════════════════════════════════════════════════
* TAKNEK ENGINEERING — main.css v12b (production-final)
* Single file. All classes defined here.
*
* ⚠ READ BEFORE EDITING — two real bugs this exact file has caused:
*
* 1. DUPLICATE SELECTORS SILENTLY FIGHT EACH OTHER. Several sections
* of this file exist in more than one "generation" (an old design
* was redesigned later, but the old CSS was never deleted). When
* the same selector is defined twice at equal specificity, the
* LATER one in the file wins with zero warning — the earlier
* block just silently does nothing. This has caused real, shipped
* bugs (a hover-lift transform cancelled by an unrelated later
* rule; a hardcoded hero height overriding a dynamic one). Before
* editing any existing rule, grep the class name for a second
* definition elsewhere in the file. Known duplicate generations
* still present as of this note: .pres-*, .exec-*, .team-* (old
* leadership — live version is .lead-*), old .proc-* (live is
* .iproc-*, see taknek_proc_steps() in functions.php), .pgal-*
* and .pgal2-* (both dead — see taknek_carousel_slides() call
* sites for the live gallery pattern), "Design A" .svc-header/
* .svc-grid/.svc-badge-* (live is .svc2-*), and .car-life-*
* (Careers "Life at Taknek" — the live gallery is .lat-*).
* 2. THIS FILE HAS ONE KNOWN, HARMLESS BRACE IMBALANCE (-1: one more
* `}` than `{`, from before this file's current history began —
* not traceable to any specific rule). Any CSS-edit verification
* script comparing `{`/`}` counts should expect exactly -1
* unchanged, not 0 — a script assuming 0 will report a false
* positive on every single edit.
*
* SEARCH LABELS:
* TOKENS — colours, spacing, header sizes
* RESET — WP overrides
* HEADER — white sticky nav
* TYPE — headings, body, labels
* BUTTONS — all variants
* FRAMES — spacing system (.frame/.frame-tight/.frame-large)
* CONTAINERS — .container / .container-wide
* GRID — col-2, col-3, col-4, col-copy
* IMAGES — .img-fill system, .photo-block fallback
* CARDS — .card, .card-h, .card-p
* STATS — stat-row, stat-band
* SECTIONS — feat-grid, pull-quote, cta-block, memberships
* HERO — hero-split (homepage) + page-hero (inner)
* LEADERSHIP — .lead-* (the live leadership grid — NOT .exec-* or
* .team-*, which are dead, see the warning above)
* PROJECTS — proj-grid, proj-filter, proj-feat, gallery
* FOOTER — ft-grid
* REVEAL — .rv animation
* RESPONSIVE — 1100px, 768px, 480px
*
* ─── TWO UNIFORM FRAME TEMPLATES ─────────────────────
*
* TEMPLATE A — Image + Text (50/50):
*
*
.
═══════════════════════════════════════════════════ */
.cband-frame {
position: relative;
min-height: clamp(560px, 78vh, 820px);
overflow: hidden;
color: #fff;
display: flex;
flex-direction: column;
}
.cband-photos { position: absolute; inset: 0; }
/* Belt-and-suspenders: .hero-bg-video is already position:absolute
(assets/main.css ~883), which should already remove it from
.cband-frame's flex flow on its own -- this wrapper guarantees it
regardless, so a video can never affect the flex-column layout
that positions .cband-band at the bottom. */
.cband-video-wrap { position: absolute; inset: 0; z-index: 1; }
.cband-photo {
position: absolute; inset: 0;
background-size: cover; background-position: center;
opacity: 0; transition: opacity 1.6s ease;
}
.cband-photo.on { opacity: 1; }
.cband-scrim {
/* z-index:1 matches .hero-bg-video's own z-index:1 (assets/main.css
~883) -- without it the video would paint above this gradient
regardless of DOM order, since a z-index:auto sibling never beats
a z-index:1 one no matter which comes later in the markup. */
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(10,24,40,.78) 0%, rgba(10,24,40,.32) 42%, rgba(10,24,40,.4) 65%, rgba(8,18,30,.9) 100%);
}
.cband-top {
position: relative; z-index: 2;
padding-top: clamp(72px,12vh,132px);
max-width: 660px;
}
.cband-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(16px,2vw,22px); }
.cband-bar { display: block; flex: none; width: 24px; height: 2px; background: var(--teal); }
.cband-eyebrow span:last-child {
font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--teal);
}
/* Tag Color ACF option -- default (no extra class needed) is teal,
matching the rules above. */
.cband-eyebrow.cband-tag-white .cband-bar { background: #fff; }
.cband-eyebrow.cband-tag-white span:last-child { color: #fff; }
.cband-eyebrow.cband-tag-ink .cband-bar { background: var(--ink); }
.cband-eyebrow.cband-tag-ink span:last-child { color: var(--ink); }
.cband-ttl {
font-family: 'Outfit', sans-serif; font-weight: 900; text-transform: uppercase;
font-size: clamp(30px, 3.008vw + 8.94px, 66.7px); line-height: .96; letter-spacing: .01em;
margin: 0 0 clamp(16px,2.2vw,26px); color: #fff;
}
/* Heading Size ACF option -- 'md' matches the toned-down default
above; sm/lg/xl scale from there. Plain (non-!important) overrides
are enough since the About page isn't in the sitewide
taknek-heading-managed scope that would otherwise outrank this. */
.cband-ttl.h-size-sm { font-size: clamp(24px, 1.992vw + 10.06px, 48.3px); }
.cband-ttl.h-size-lg { font-size: clamp(36px, 3.836vw + 9.15px, 82.8px); }
.cband-ttl.h-size-xl { font-size: clamp(42px, 4.852vw + 8.04px, 101.2px); }
.cband-intro {
font-size: clamp(14.5px,1.15vw,17px); line-height: 1.7; color: rgba(255,255,255,.84);
max-width: 480px; margin: 0;
}
.cband-band {
position: relative; z-index: 2; margin-top: auto;
background: rgba(6,16,28,.6);
border-top: 1px solid rgba(255,255,255,.16);
padding: clamp(22px,3.2vh,34px) 0;
}
.cband-band-inner {
/* --cband-cols is set inline from the actual Timeline Events count
(repeater allows 1-6 rows) so this always divides evenly into one
row on desktop, instead of assuming a fixed 4 and leaving orphan
cells when an editor adds a 5th/6th event. */
display: grid; grid-template-columns: repeat(var(--cband-cols, 4), minmax(0,1fr));
gap: clamp(20px,3vw,40px);
}
.cband-bi { padding-left: clamp(14px,1.6vw,22px); border-left: 1px solid rgba(255,255,255,.2); }
.cband-bi:first-child { padding-left: 0; border-left: 0; }
.cband-yr { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(20px,1.9vw,29px); color: var(--teal); line-height: 1; }
.cband-bi-h { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: clamp(13.5px,1vw,16px); color: #fff; margin: 6px 0 6px; }
.cband-bi-p { font-size: clamp(11.5px,.85vw,13.5px); line-height: 1.5; color: rgba(255,255,255,.7); margin: 0; }
@media (max-width: 900px) {
.cband-frame { min-height: clamp(520px, 84vh, 760px); }
/* Fixed 2 columns here regardless of --cband-cols -- odd/even
targets each row's first/second slot correctly for any item count. */
.cband-band-inner { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: clamp(18px,3vh,26px); }
.cband-bi { padding-left: 0; border-left: 0; }
.cband-bi:nth-child(even) { padding-left: clamp(14px,1.6vw,22px); border-left: 1px solid rgba(255,255,255,.2); }
}
@media (max-width: 560px) {
.cband-band-inner { grid-template-columns: 1fr; }
.cband-bi { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); }
.cband-bi:first-child { padding-top: 0; border-top: 0; }
}
/* ═══════════════════════════════════════════════════
FEATURED PROJECT FRAME START — page-projects.php
═══════════════════════════════════════════════════ */
.fp-frame {
background: var(--white);
border-bottom: 1px solid var(--rule);
}
/* Top-left group: counter + badge */
.fp-topleft-group {
position: absolute;
top: 16px;
left: 16px;
z-index: 10;
display: flex;
align-items: center;
gap: 8px;
}
.fp-counter {
position: static;
background: var(--teal);
color: #fff;
font-family: 'Courier New', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
padding: 5px 12px;
border-radius: 3px;
display: flex;
align-items: center;
gap: 3px;
}
.fp-cat-badge {
position: static;
background: rgba(7,17,31,.55);
backdrop-filter: blur(4px);
color: #fff;
font-family: 'Outfit', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
padding: 6px 14px;
border-radius: 3px;
border: 1px solid rgba(255,255,255,.2);
}
/* Details link button */
.fp-details-link {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
padding: 0;
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--blue);
cursor: pointer;
width: fit-content;
margin-top: -4px;
transition: color .15s, gap .15s;
}
.fp-details-link:hover {
color: var(--teal);
gap: 9px;
}
.fp-details-link svg { transition: transform .15s; }
.fp-details-link:hover svg { transform: translateX(2px); }
/* Top bar */
.fp-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: clamp(12px,1.8vh,18px) clamp(16px,3vw,48px);
border-bottom: 1px solid var(--rule);
}
.fp-topbar-left {
display: flex;
align-items: center;
gap: 10px;
}
.fp-eyebrow-line {
display: inline-block;
width: 24px;
height: 1.5px;
background: var(--teal);
flex-shrink: 0;
}
.fp-eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: .22em;
color: var(--teal);
}
.fp-topbar-stats {
display: flex;
align-items: center;
gap: clamp(20px,3vw,48px);
}
.fp-top-stat {
display: flex;
align-items: baseline;
gap: 6px;
}
.fp-top-stat-n {
font-family: 'Outfit', sans-serif;
font-size: clamp(18px,1.7vw,26px);
font-weight: 900;
color: var(--ink);
line-height: 1;
}
.fp-top-stat-l {
font-size: clamp(9px,.75vw,11px);
font-weight: 700;
letter-spacing: .1em;
color: var(--muted);
}
/* Main split */
.fp-body {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: clamp(420px,58vh,640px);
}
/* Left */
.fp-left {
padding: clamp(36px,5.5vh,64px) clamp(32px,4.5vw,64px);
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(14px,2vh,22px);
}
.fp-division {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--teal);
}
.fp-division::before {
content: '';
width: 16px;
height: 1.5px;
background: var(--teal);
display: inline-block;
}
.fp-title {
font-family: 'Outfit', sans-serif;
font-size: clamp(24px,2.8vw,42px);
font-weight: 900;
color: var(--ink);
text-transform: uppercase;
line-height: 1.05;
letter-spacing: .005em;
margin: 0;
}
.fp-meta {
padding-bottom: clamp(14px,2vh,20px);
border-bottom: 1px solid var(--rule);
margin-bottom: 2px;
}
.fp-meta-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--teal);
flex-shrink: 0;
}
.fp-desc {
font-size: clamp(14px,1.1vw,16px);
line-height: 1.7;
color: var(--body);
margin: 0;
max-width: 460px;
text-align: left !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fp-btns {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 4px;
}
.fp-btn-primary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 11px 22px;
background: var(--blue);
color: #fff;
border-radius: var(--r);
font-family: 'Outfit', sans-serif;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: background .18s;
white-space: nowrap;
}
.fp-btn-primary:hover { background: var(--teal); }
.fp-btn-ghost {
display: inline-flex;
align-items: center;
padding: 11px 22px;
background: transparent;
color: var(--ink);
border: 1.5px solid var(--rule);
border-radius: var(--r);
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: border-color .18s, color .18s;
white-space: nowrap;
}
.fp-btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
/* Right — image */
.fp-right {
position: relative;
background: var(--ink);
overflow: hidden;
}
.fp-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity .7s ease;
}
.fp-slide.active { opacity: 1; }
.fp-slide::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(7,17,31,.3) 0%, transparent 60%);
}
/* Counter badge */
.fp-counter {
position: absolute;
top: 16px;
left: 16px;
z-index: 10;
background: var(--teal);
color: #fff;
font-family: 'Courier New', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
padding: 5px 12px;
border-radius: 3px;
display: flex;
align-items: center;
gap: 3px;
}
.fp-cur { font-size: 14px; font-weight: 900; }
.fp-sep { opacity: .6; }
.fp-tot { opacity: .7; }
/* Category badge */
.fp-cat-badge {
position: absolute;
bottom: 16px;
right: 16px;
z-index: 10;
background: var(--teal);
color: #fff;
font-family: 'Outfit', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
padding: 6px 14px;
border-radius: 3px;
}
/* Arrows */
.fp-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 38px;
height: 38px;
background: rgba(255,255,255,.12);
border: 1.5px solid rgba(255,255,255,.3);
border-radius: 4px;
color: #fff;
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .18s;
line-height: 1;
}
.fp-arrow:hover { background: rgba(255,255,255,.25); }
.fp-arrow-prev { left: 14px; }
.fp-arrow-next { right: 14px; }
/* Tablet */
@media (max-width: 900px) {
.fp-body { grid-template-columns: 1fr; }
.fp-right {
order: -1;
height: clamp(220px,35vw,360px);
}
.fp-left { padding: 24px 20px; }
.fp-topbar { padding: 10px 20px; }
.fp-topbar-stats { gap: 16px; }
/* NEW — keep badge group readable on tablet */
.fp-topleft-group { top: 12px; left: 12px; gap: 6px; }
.fp-counter { font-size: 10px; padding: 4px 10px; }
.fp-cat-badge { font-size: 9px; padding: 5px 11px; }
}
/* Mobile */
@media (max-width: 560px) {
.fp-topbar { display: none; }
.fp-title { font-size: clamp(18px,5.5vw,28px); }
.fp-btns { flex-direction: column; }
.fp-btn-primary, .fp-btn-ghost { justify-content: center; }
.fp-right { height: 200px; }
/* NEW */
.fp-topleft-group { flex-direction: row; flex-wrap: wrap; gap: 5px; }
.fp-cat-badge { font-size: 8px; padding: 4px 9px; }
.fp-counter { font-size: 9px; padding: 4px 9px; }
.fp-details-link { font-size: 12px; }
.fp-left { gap: 10px; }
}
/* Mobile stats band */
.fp-stats-band {
display: none;
}
@media (max-width: 560px) {
.fp-stats-band {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--ink);
padding: 12px 16px;
}
.fp-stats-band-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
flex: 1;
}
.fp-stats-band-n {
font-family: 'Outfit', sans-serif;
font-size: 16px;
font-weight: 900;
color: #fff;
line-height: 1;
}
.fp-stats-band-l {
font-size: 8px;
font-weight: 700;
letter-spacing: .1em;
color: rgba(255,255,255,.5);
}
.fp-stats-band-div {
width: 1px;
height: 28px;
background: rgba(255,255,255,.15);
flex-shrink: 0;
}
.fp-topbar-stats { display: none; }
}
/* ═══════════════════════════════════════════════════
FEATURED PROJECT FRAME END — page-projects.php
═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
LIFE AT TAKNEK — Asymmetric hero grid
═══════════════════════════════════════════════════ */
.lat-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(20px,3vw,40px);
margin-bottom: clamp(20px,3vh,32px);
flex-wrap: wrap;
}
.lat-header-left { flex-shrink: 0; }
.lat-h {
font-family: 'Outfit', sans-serif;
font-size: clamp(26px,3.2vw,48px);
font-weight: 900;
color: var(--ink);
text-transform: uppercase;
line-height: 1;
margin: 6px 0 0;
}
.lat-header-right {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
justify-content: flex-end;
}
@media (max-width: 560px) {
.lat-header-right {
width: 100%;
flex-direction: column;
align-items: stretch;
}
.lat-btn {
width: 100%;
box-sizing: border-box;
justify-content: center;
}
}
.lat-sub {
font-size: clamp(13px,1vw,15px);
line-height: 1.6;
color: var(--body);
margin: 0;
max-width: 360px;
}
.lat-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 22px;
background: var(--ink);
color: #fff;
border-radius: var(--r);
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: background .18s;
}
.lat-btn:hover { background: var(--blue); }
/* Grid */
.lat-grid {
display: grid;
grid-template-columns: 1.55fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: clamp(10px,1.2vw,16px);
height: clamp(440px,58vh,620px);
}
.lat-card-0 { grid-column: 1; grid-row: 1 / 3; }
.lat-card-1 { grid-column: 2; grid-row: 1; }
.lat-card-2 { grid-column: 3; grid-row: 1; }
.lat-card-3 { grid-column: 2; grid-row: 2; }
.lat-card-4 { grid-column: 3; grid-row: 2; }
.lat-card {
position: relative;
background-color: var(--ink);
background-size: cover;
background-position: center;
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
border: 1px solid rgba(255,255,255,.08);
}
/* Corner brackets — only on large card */
.lat-bracket {
position: absolute;
width: 20px;
height: 20px;
z-index: 4;
pointer-events: none;
}
.lat-br-tl { top: 14px; left: 14px; border-top: 2px solid var(--teal); border-left: 2px solid var(--teal); }
.lat-br-br { bottom: 14px; right: 14px; border-bottom: 2px solid var(--teal); border-right: 2px solid var(--teal); }
/* Tag — top left label */
.lat-card-tag {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
font-family: 'Courier New', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
color: rgba(255,255,255,.75);
}
.lat-card-0 .lat-card-tag { left: 32px; }
/* Overlay */
.lat-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(7,17,31,.92) 0%, rgba(7,17,31,.25) 55%, transparent 80%);
z-index: 1;
}
/* Placeholder when no image */
.lat-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
/* Body */
.lat-card-body {
position: relative;
z-index: 2;
padding: clamp(12px,1.6vw,20px);
display: flex;
flex-direction: column;
gap: 8px;
}
.lat-card-title {
font-family: 'Outfit', sans-serif;
font-weight: 700;
color: #fff;
font-size: clamp(13px,1.1vw,17px);
line-height: 1.2;
}
.lat-card-0 .lat-card-title { font-size: clamp(20px,2vw,30px); }
.lat-card-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.lat-tag-pill {
font-size: 10px;
font-weight: 700;
letter-spacing: .04em;
color: rgba(255,255,255,.75);
border: 1px solid rgba(255,255,255,.25);
border-radius: 3px;
padding: 3px 9px;
}
/* Tablet */
@media (max-width: 1024px) {
.lat-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3,200px);
height: auto;
}
.lat-card-0 { grid-column: 1 / -1; grid-row: 1; }
.lat-card-1 { grid-column: 1; grid-row: 2; }
.lat-card-2 { grid-column: 2; grid-row: 2; }
.lat-card-3 { grid-column: 1; grid-row: 3; }
.lat-card-4 { grid-column: 2; grid-row: 3; }
.lat-header { flex-direction: column; align-items: flex-start; }
.lat-header-right { justify-content: flex-start; width: 100%; }
}
/* Mobile */
@media (max-width: 560px) {
.lat-grid {
display: flex;
grid-template-columns: unset;
grid-template-rows: unset;
height: auto;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
gap: 12px;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
width: 100%;
margin: 0;
padding: 0;
}
.lat-grid::-webkit-scrollbar { display: none; }
.lat-card-0,.lat-card-1,.lat-card-2,.lat-card-3,.lat-card-4 {
grid-column: unset;
grid-row: unset;
flex: 0 0 82vw;
height: 320px;
scroll-snap-align: start;
}
.lat-card-0 .lat-card-title { font-size: clamp(18px,5.5vw,24px); }
.lat-h { font-size: clamp(22px,7vw,32px); }
.lat-btn { width: 100%; justify-content: center; }
}
/* ═══════════════════════════════════════════════════
WHAT WE DO v2 — Hover-Reveal Cards
═══════════════════════════════════════════════════ */
.svc2-header {
text-align: left;
margin-bottom: clamp(60px,5.5vh,74px);
}
/* Matches the same clamp(14px,2vh,22px) target used by .frame-header/
.mosaic-hdr/.saf-a-sub/.saf-b-head elsewhere on this page -- not the
larger value Construction/Automation use for their own .svc2-header
(body.taknek-heading-managed, below) -- so every homepage frame's
heading-to-content gap reads as the same size when scrolling down
the page. That other page's rule is untouched by this one. */
body.taknek-home-tight-gap .svc2-header { margin-bottom: clamp(14px, 2vh, 22px) !important; }
.svc2-header .label {
justify-content: flex-start;
}
.svc2-heading {
font-family: 'Outfit', sans-serif;
font-size: clamp(26px, 2.016vw + 11.89px, 50.6px);
font-weight: 900;
color: var(--ink);
text-transform: uppercase;
margin: 8px 0 0;
}
.svc2-wrap {
width: 100%;
}
.svc2-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(10px,1.2vw,16px);
}
.svc2-card {
position: relative;
border-radius: var(--r);
overflow: hidden;
}
.svc2-card-media {
position: relative;
height: clamp(440px,58vh,620px);
overflow: hidden;
}
.svc2-card-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform .5s ease;
}
.svc2-card:hover .svc2-card-bg {
transform: scale(1.06);
}
.svc2-card-media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(7,17,31,.55) 0%, rgba(7,17,31,.05) 45%, transparent 70%);
pointer-events: none;
transition: background .35s ease;
}
.svc2-card:hover .svc2-card-media::after {
background: rgba(7,17,31,.3);
}
.svc2-card-title {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: flex-start;
text-align: left;
padding: clamp(20px,2.6vw,30px);
font-family: 'Outfit', sans-serif;
font-size: clamp(17px,1.5vw,22px);
font-weight: 800;
text-transform: uppercase;
color: #fff;
line-height: 1.25;
z-index: 2;
text-shadow: 0 2px 12px rgba(0,0,0,.5);
transition: opacity .3s ease;
}
.svc2-card:hover .svc2-card-title {
opacity: 0;
}
/* Bottom slide-up drawer -- photo stays visible at rest and on hover
(just dims via .svc2-card-media::after above); this panel rises
from the bottom edge instead of covering the whole card. */
.svc2-card-hover {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, rgba(7,17,31,.97) 0%, rgba(7,17,31,.9) 70%, rgba(7,17,31,.75) 100%);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 10px;
padding: clamp(20px,2.6vw,30px);
transform: translateY(100%);
transition: transform .4s cubic-bezier(.22,1,.36,1);
z-index: 3;
}
.svc2-card:hover .svc2-card-hover {
transform: translateY(0);
}
.svc2-card-hover-title {
font-family: 'Outfit', sans-serif;
font-size: clamp(15px,1.3vw,19px);
font-weight: 800;
color: #fff;
text-transform: uppercase;
text-align: left;
line-height: 1.2;
}
.svc2-card-desc {
font-size: clamp(13px,1.05vw,15px);
line-height: 1.7;
color: rgba(255,255,255,.8);
text-align: left;
margin: 0;
}
@media (max-width: 1024px) {
.svc2-cards { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 768px) {
.svc2-cards { grid-template-columns: 1fr; }
.svc2-card-media { height: 260px; }
.svc2-card-hover {
position: static;
transform: none;
background: var(--ink);
padding: 18px;
align-items: flex-start;
}
}
/* 6-card variant (Construction "What We Build") */
.svc2-cards-6 {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.svc2-cards-6 .svc2-card-media {
height: clamp(300px,36vh,380px);
}
@media (max-width: 1024px) {
.svc2-cards-6 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.svc2-cards-6 { grid-template-columns: 1fr; grid-template-rows: none; }
}
/* Same card-media height as .svc2-cards-6 (Construction/Automation's "What
We Build"/capabilities cards), without that class's grid-template-rows:
repeat(2,1fr) -- which only makes sense for exactly 6 cards. Used when
Homepage's Services repeater has a different count, so the cards still
match Construction/Automation's size while the grid auto-flows correctly
for any number of cards. */
.svc2-cards-sm .svc2-card-media {
height: clamp(300px,36vh,380px);
}
/* ═══ WHO WE ARE — kinetic heading + Industries marquee ═══
Word-reveal heading and marquee both ride the site's existing .rv
scroll-reveal toggle (assets/taknek.js's IntersectionObserver adds
.in to .wwa-grid) -- no new JS. Marquee reuses the horizontal-ticker
CSS shape (assets/main.css:644-679, .ticker-*) rotated to a vertical
axis: flex-direction row->column, mask-image axis to right->to
bottom, translateX->translateY. animation-direction:reverse plays
the same translateY(-50%) keyframe backwards so content visibly
travels top-to-bottom (confirmed with Nick) instead of the pattern's
default bottom-to-top motion, without needing a second keyframe. */
/* min-width:0 on both grid children -- without it, a min-width:auto
grid item containing white-space:nowrap content (the heading below)
can force its own track wider than its 1.6fr share, squeezing the
Industries column next to it instead of the heading just fitting
within the width it's actually given. */
.wwa-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(32px,5vw,64px); align-items: center; }
.wwa-text { display: flex; flex-direction: column; max-width: 680px; min-width: 0; }
.wwa-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(12px,1.5vw,18px); }
.wwa-eyebrow-line { display: block; flex: none; width: 24px; height: 2px; background: var(--teal); }
.wwa-eyebrow span:last-child {
font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
color: var(--teal);
}
.wwa-heading {
/* Family/weight/line-height/letter-spacing/transform/color still
come from the shared .heading-md class -- only font-size is
overridden here (below .heading-md in source order, so it wins
without !important) so this heading comfortably fits the
.wwa-text column at typical heading lengths. Paired with
.wwa-grid/.wwa-text's min-width:0 above, which stops long nowrap
content from ever expanding the grid track. white-space is
intentionally left at its normal default (not nowrap): a real
admin-entered heading longer than the short code default should
wrap to a second line here -- same as it already does under
900px below -- rather than be forced onto one line via nowrap
with a truncating ellipsis, which cuts real content off instead
of just showing it on two lines. .wwa-text is a column flexbox,
so a taller 2-line heading only pushes this column's own content
down; it can't overlap the neighboring Industries ticker. */
margin: 0 0 clamp(14px, 2vh, 22px);
font-size: clamp(18px, 1.8vw, 28px);
}
@media (max-width: 900px) {
/* .wwa-grid collapses to a single full-width column here (see
below) -- just a larger font-size for this width; wrapping is
already the default (see the base rule above). */
.wwa-heading { font-size: clamp(22px, 4vw, 34px); }
}
.wwa-wmask { display: inline-block; overflow: hidden; vertical-align: top; }
.wwa-wi {
display: inline-block;
opacity: 0; transform: translateY(100%);
transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.wwa-grid.rv.in .wwa-wi { opacity: 1; transform: translateY(0); }
.wwa-intro {
font-size: clamp(15px,1.25vw,17px); line-height: 1.75; color: var(--body);
text-align: justify; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
}
.wwa-stats {
display: flex;
margin-top: clamp(16px,2vw,22px);
padding: clamp(14px,1.6vw,18px) 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.wwa-stat { flex: 1; padding-right: clamp(12px,2vw,24px); }
.wwa-stat:not(:first-child) {
padding-left: clamp(12px,2vw,24px);
border-left: 1px solid var(--rule);
}
.wwa-stat-n {
font-family: 'Outfit', sans-serif; font-weight: 800;
font-size: clamp(26px,2.6vw,36px); line-height: 1; letter-spacing: -.01em;
color: var(--ink);
}
.wwa-stat-accent .wwa-stat-n { color: var(--teal); }
.wwa-stat-l {
margin-top: 6px;
font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--muted);
}
.wwa-btns { margin-top: 20px; }
@media (max-width: 480px) {
.wwa-stats { flex-wrap: wrap; row-gap: clamp(16px,3vh,20px); }
.wwa-stat { flex: 0 0 50%; }
.wwa-stat:nth-child(2) { padding-left: clamp(12px,2vw,24px); border-left: 1px solid var(--rule); }
.wwa-stat:nth-child(3) { padding-left: 0; border-left: none; margin-top: clamp(12px,2vh,16px); }
}
.wwa-ind-col { display: flex; flex-direction: column; min-width: 0; }
.wwa-ind-eyebrow {
font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
color: rgba(10,24,40,.42); margin-bottom: clamp(12px,1.5vw,16px);
}
.wwa-ind-rail {
/* Shorter than before (was 480-640px) so this column's height tracks
the text column's real content height instead of the shorter
column floating in extra frame space with a tall marquee next to
it -- both columns should read as comparable visual weight. */
overflow: hidden;
height: clamp(360px,44vh,480px);
position: relative;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}
.wwa-ind-track {
display: flex;
flex-direction: column;
height: max-content;
animation: wwa-ind-scroll 28s linear infinite;
animation-direction: reverse;
will-change: transform;
}
.wwa-ind-track:hover { animation-play-state: paused; }
@keyframes wwa-ind-scroll { to { transform: translateY(-50%); } }
.wwa-ind-row { display: flex; align-items: baseline; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.wwa-ind-n { flex: none; width: 22px; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--teal); }
.wwa-ind-l { font-family: 'Outfit', sans-serif; font-size: clamp(16px,1.5vw,21px); font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
@media (max-width: 900px) {
.wwa-grid { grid-template-columns: 1fr; }
.wwa-ind-rail { height: clamp(320px,46vh,420px); margin-top: clamp(24px,4vh,32px); }
}
/* 6-card tight grid variant (Home "What We Do") */
.svc2-cards-tight {
grid-template-columns: repeat(3, 1fr);
gap: 3px;
}
.svc2-cards-tight .svc2-card-media { aspect-ratio: 4/3; height: auto; }
.svc2-cards-tight .svc2-card { border-radius: 0; }
.svc2-cards-tight .svc2-card-title { font-size: clamp(14px,1.1vw,16px); }
@media (max-width: 900px) { .svc2-cards-tight { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .svc2-cards-tight { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════════════
SAFETY PROGRAMME — Scroll-Pin Two-Part
═══════════════════════════════════════════════════ */
.safety-pin { position: relative; }
.safety-stage { position: relative; overflow: visible; background: transparent; }
.safety-panel { position: relative; }
.safety-panel-a { background: #07111f; color: #fff; height: 72vh; min-height: 480px; display: flex; align-items: center; overflow: hidden; }
.saf-a-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; background: #0a1420; }
.saf-a-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg,rgba(6,13,24,.96) 0%,rgba(6,13,24,.9) 34%,rgba(6,13,24,.6) 60%,rgba(6,13,24,.24) 100%); }
.saf-a-tick { position: absolute; width: 24px; height: 24px; border-color: var(--teal); border-style: solid; z-index: 2; pointer-events: none; }
.saf-a-inner { position: relative; z-index: 3; padding: 0 clamp(28px,6vw,80px); max-width: var(--mw); margin: 0 auto; width: 100%; }
.saf-eyebrow { display: inline-block; margin-bottom: 14px; }
/* Font metrics come from the shared .heading-md class on the same
element -- single source of truth, don't redeclare them here.
color:#fff overrides .heading-md's dark-navy default since this
heading sits on the Safety Programme's full-bleed dark panel. */
.saf-a-heading { color: #fff; max-width: 760px; margin: 0; }
.saf-a-sub { margin-top: clamp(14px, 2vh, 22px); font-size: clamp(15px,1.25vw,17.5px); line-height: 1.7; color: rgba(255,255,255,.68); max-width: 520px; }
.saf-a-statcard { display: grid; grid-template-columns: repeat(3,auto); justify-content: start; margin-top: clamp(16px,2.2vh,22px); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r); overflow: hidden; max-width: 560px; }
.saf-a-stat { padding: 13px 22px; }
.saf-a-stat:not(:first-child) { border-left: 1px solid rgba(255,255,255,.14); }
.saf-a-stat-n { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(18px,1.8vw,24px); color: #fff; line-height: 1; white-space: nowrap; }
.saf-a-stat-l { margin-top: 5px; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; }
.saf-scroll-chip { margin-top: clamp(18px,2.6vh,24px); display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border: 1.5px solid rgba(255,255,255,.26); border-radius: 24px; color: #fff; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.04); transition: background .15s,border-color .15s; }
.saf-scroll-chip:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.saf-scroll-chip svg { animation: safBounce 1.6s ease-in-out infinite; }
@keyframes safBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
.safety-panel-b{background:var(--bg);overflow-y:visible;display:flex;flex-direction:column;justify-content:flex-start;min-height:auto}
.saf-b-inner { box-sizing: border-box; display: flex; flex-direction: column; padding: clamp(28px,4.4vh,44px) clamp(28px,6vw,80px); max-width: var(--mw); margin: 0 auto; width: 100%; flex: 1; }
.saf-b-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:clamp(14px,2vh,22px)}
.saf-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.saf-card { display: flex; flex-direction: column; gap: 6px; border: 1.5px solid var(--rule); border-radius: var(--r); padding: clamp(20px,2.4vw,26px); background: var(--white); position: relative; overflow: hidden; transition: border-color .25s,box-shadow .25s,transform .25s; }
.saf-card:before { content:''; position: absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg,var(--blue),var(--teal)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.saf-card:hover:before { transform: scaleX(1); }
.saf-card:hover { border-color: rgba(0,164,159,.35); box-shadow: 0 10px 30px rgba(10,24,40,.08); transform: translateY(-3px); }
.saf-card-n { font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--teal); margin-bottom: 14px; }
.saf-card-h { font-family: 'Outfit', sans-serif; font-size: 15.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.saf-card-p { font-size: 13px; line-height: 1.65; color: var(--body); margin: 0; }
.saf-b-foot{margin-top:auto;padding-top:clamp(16px,2.2vh,22px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
@media (max-width: 1100px) { .saf-cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 900px) {
.safety-pin { height: auto; }
.safety-stage { position: static; height: auto; overflow: visible; }
.safety-panel { position: relative; transform: none!important; filter: none!important; inset: auto; }
.safety-panel-a { padding: 72px 0; }
.safety-panel-b { padding: 56px 0; }
.saf-scroll-chip { display: none; }
}
@media (max-width: 560px) {
.saf-a-statcard { grid-template-columns: 1fr; }
.saf-a-stat:not(:first-child) { border-left: none; border-top: 1px solid rgba(255,255,255,.14); }
.saf-cards { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════
Header Changes START
═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
Header TOP BAR — Enhanced gradient + pills
═══════════════════════════════════════════════════ */
.hdr-topbar {
background: linear-gradient(90deg, var(--ink) 0%, #0b3550 55%, var(--teal-dark, #067b76) 100%);
height: 44px;
overflow: hidden;
}
.hdr-topbar .container {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.hdr-topbar-left, .hdr-topbar-right {
display: flex;
align-items: center;
gap: 14px;
}
.hdr-top-item {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,.78);
white-space: nowrap;
}
.hdr-top-item svg { flex-shrink: 0; opacity: .8; }
.hdr-top-accent { color: var(--teal); }
.hdr-top-accent svg { color: var(--teal); opacity: 1; }
.hdr-top-link { text-decoration: none; transition: color .15s; }
.hdr-top-link:hover { color: #fff; }
.hdr-top-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 17px;
border-radius: 22px;
border: 1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,.06);
font-family: 'Outfit', sans-serif;
font-size: 13.5px;
font-weight: 700;
color: #fff;
text-decoration: none;
transition: background .18s, border-color .18s;
white-space: nowrap;
}
.hdr-top-pill:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.hdr-top-pill svg { color: var(--teal); flex-shrink: 0; }
.hdr-top-pill-ghost {
color: rgba(255,255,255,.85);
font-size: 11px;
letter-spacing: .04em;
cursor: default;
}
.hdr-top-pill-ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); }
@media (max-width: 900px) {
.hdr-topbar { display: none; }
}
@media (max-width: 1100px) {
.hdr-top-item:not(.hdr-top-accent) span { display: none; }
}
/* Active/hover nav pill */
.nav-link {
padding: 8px 16px;
border-radius: 999px;
transition: background .18s, color .18s;
}
.nav-link.active {
background: var(--blue-light, rgba(11,77,144,.1));
color: var(--blue);
}
.nav-link:hover:not(.active) {
background: var(--bg);
}
.nav-drop-btn {
padding: 8px 16px;
border-radius: 999px;
transition: background .18s, color .18s;
}
.nav-drop-btn:hover { background: var(--bg); }
/* New HEADER Change */
/* Scrolled state */
.site-header.scrolled { box-shadow: 0 1px 0 var(--rule), 0 2px 16px rgba(10,24,40,.06); }
/* Refined nav panel dropdown */
.nav-drop { position: relative; }
.nav-drop-icon { transition: transform .18s var(--ease, ease); display: flex; }
.nav-drop:hover .nav-drop-icon { transform: rotate(180deg); }
.nav-panel {
position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px;
background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--teal);
border-radius: 0 0 var(--r) var(--r); padding: 6px;
box-shadow: 0 12px 40px rgba(10,24,40,.12);
opacity: 0; pointer-events: none; transform: translateY(-6px);
transition: opacity .18s, transform .18s;
}
.nav-drop:hover .nav-panel { opacity: 1; pointer-events: all; transform: translateY(0); }
.nav-panel-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 6px; }
.nav-panel-item:hover { background: var(--bg); }
.nav-panel-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.nav-panel-label { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); }
.hdr-cta:hover { background: var(--blue-dark); box-shadow: 0 4px 16px rgba(11,77,144,.3); transform: translateY(-1px); }
/* ═══════════════════════════════════════════════════
Header Changes END
═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
ANNOUNCEMENT BAR — Global
═══════════════════════════════════════════════════ */
.ann-bar {
position: relative;
background: var(--white);
border-bottom: 3px solid var(--teal);
z-index: 100;
overflow: hidden;
}
.ann-bar-inner {
display: flex;
align-items: stretch;
min-height: 50px;
}
.ann-bar-label {
flex-shrink: 0;
background: var(--blue);
color: #fff;
display: flex;
align-items: center;
gap: 14px;
padding: 0 clamp(30px,3.2vw,40px) 0 clamp(24px,4vw,48px);
margin-left: calc(-50vw + 50%);
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
}
.ann-bar-label-main {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: clamp(17px,1.6vw,22px);
text-transform: uppercase;
letter-spacing: .01em;
white-space: nowrap;
}
.ann-bar-label-sub {
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
line-height: 1.4;
border-left: 1px solid rgba(255,255,255,.3);
padding-left: 14px;
opacity: .9;
max-width: 110px;
}
.ann-bar-text {
flex: 1;
display: flex;
align-items: center;
overflow: hidden;
padding: 0 clamp(16px,2vw,24px);
position: relative;
}
.ann-bar-text-scroll {
white-space: nowrap;
font-size: clamp(13px,1vw,15px);
font-weight: 600;
color: var(--ink);
display: inline-block;
}
.ann-bar-actions {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 20px;
padding-right: clamp(8px,1vw,12px);
}
.ann-bar-link {
font-size: 13px;
font-weight: 700;
color: var(--teal);
text-decoration: none;
white-space: nowrap;
transition: color .15s;
}
.ann-bar-link:hover { color: var(--blue); }
.ann-bar-close {
background: none;
border: none;
color: var(--muted);
font-size: 14px;
cursor: pointer;
padding: 6px;
line-height: 1;
transition: color .15s;
}
.ann-bar-close:hover { color: var(--ink); }
@keyframes annBarSlideDown {
0% { transform: translateY(-100%); }
55% { transform: translateY(10px); }
75% { transform: translateY(-4px); }
100% { transform: translateY(0); }
}
.ann-bar-flash .ann-bar-inner {
animation: annBarSlideDown .55s cubic-bezier(.25,.8,.35,1);
}
/* Continuous gentle pulse on the label — runs forever */
@keyframes annBarLabelPulse {
0%, 100% { background: var(--blue); }
50% { background: var(--teal-dark, #067b76); }
}
.ann-bar-label {
animation: annBarLabelPulse 2.6s ease-in-out infinite;
}
@media (max-width: 768px) {
.ann-bar { display: none; }
.ann-bar-inner { flex-wrap: wrap; min-height: auto; }
.ann-bar-label {
margin-left: -16px;
padding: 6px 16px;
width: 100%;
box-sizing: border-box;
clip-path: none;
}
.ann-bar-label-main { font-size: 13px; }
.ann-bar-label-sub { display: none; }
.ann-bar-text {
padding: 8px 12px 8px 16px;
order: 2;
flex: 1;
min-width: 0;
}
.ann-bar-text-scroll {
display: block;
white-space: normal;
font-size: 12px;
line-height: 1.4;
}
.ann-bar-actions {
padding: 8px 16px 8px 0;
order: 3;
flex-shrink: 0;
gap: 12px;
}
.ann-bar-link { font-size: 12px; white-space: nowrap; }
}
/* ═══════════════════════════════════════════════════
COOKIE CONSENT BANNER — Global
Bottom-right popup card, deliberately distinct from .ann-bar (top,
full-width) so the two are never confused. Markup + toggle logic in
footer.php; shown only when Site Settings -> Analytics & Cookie
Consent has a GTM Container ID set.
═══════════════════════════════════════════════════ */
.cookie-banner {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 200;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 16px;
width: min(340px, calc(100vw - 32px));
padding: 22px;
background: var(--ink);
border-top: 3px solid var(--teal);
border-radius: var(--r);
box-shadow: 0 20px 50px rgba(10,24,40,.28);
}
.cookie-banner-text {
font-size: 13px;
line-height: 1.6;
color: rgba(255,255,255,.82);
}
.cookie-banner-text a {
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
margin-left: 4px;
}
.cookie-banner-actions {
display: flex;
align-items: center;
gap: 10px;
}
.cookie-banner-actions .btn-outline,
.cookie-banner-actions .btn-primary {
flex: 1 1 0;
justify-content: center;
}
.cookie-banner .btn-outline {
border-color: rgba(255,255,255,.35);
color: #fff;
}
.cookie-banner .btn-outline:hover {
border-color: #fff;
background: rgba(255,255,255,.08);
color: #fff;
}
@media (max-width: 480px) {
.cookie-banner {
right: 12px;
left: 12px;
bottom: 12px;
width: auto;
padding: 18px;
}
}
/* ═══════════════════════════════════════════════════
PEEK CAROUSEL — Photo Gallery (Construction + Automation)
Shared by both division pages' "Photo Gallery" section -- markup
from taknek_render_panel_carousel() in inc/carousel-helper.php,
nav JS is pcarNav/pcarGoto in assets/taknek.js. Replaces the earlier
"Panel Carousel" (dark sidebar + stacked next-panels) built earlier
this session -- rebuilt in place rather than left as unused dead
CSS, since it's this session's own component being iterated on, not
pre-existing client work.
Full-bleed edge to edge (margin-left/right breakout, same technique
as .ann-bar-label elsewhere in this file -- no width:100vw, which
would include the scrollbar's width and misalign the element).
#gallery.frame's own sitewide vertical padding (--frame-pad) is
zeroed out below, same technique as #cta.frame for the CTA band, so
.pcar's own much smaller padding is the only vertical spacing --
no stacked dead space between sections. Header, image row, and
footer all share one identical --pcar-pad-x value for their side
padding so they can't drift out of alignment with each other again
(an earlier round had each computing its own independently against
.container, and they disagreed at some viewport widths).
Sizing: kept short and compact -- image aspect-ratio, gaps, and
heading size are all tuned down from the first pass so the whole
frame fits a laptop/desktop viewport without much scroll.
═══════════════════════════════════════════════════ */
#gallery.frame { padding: 0; }
.pcar {
--pcar-pad-x: clamp(16px, 2.5vw, 44px); /* matches .container's own padding exactly */
background: var(--white);
padding: 16px 0;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
/* Header and footer additionally match .container's max-width + auto
centering (not just its padding) -- .container itself stops
growing past var(--mw) and centers with extra margin beyond that,
which a full-bleed sibling doesn't get for free just by copying the
padding value. Only .pcar-body (the image row) stays genuinely
full-width/edge-to-edge; matching .container fully here is what
actually makes the heading line up with every other section's,
including on wide viewports where --mw is narrower than the
viewport itself. */
.pcar-head {
max-width: var(--mw);
margin-left: auto;
margin-right: auto;
padding: 0 var(--pcar-pad-x);
}
.pcar-eyebrow {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--teal);
}
.pcar-eyebrow-line { width: 16px; height: 2px; background: var(--teal); flex-shrink: 0; }
/* Heading, desc and counter all share this one row/plane instead of
stacking -- keeps the header compact so the image row gets more of
the frame's height. */
.pcar-head-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 6px;
}
.pcar-head-text { display: flex; align-items: baseline; gap: 16px; min-width: 0; flex: 1 1 auto; }
/* Font (family/size/weight/case/color) comes from the shared
.heading-md class applied alongside this one, same as every other
section header on the site -- just layout tweaks here. */
.pcar-heading {
flex-shrink: 0;
white-space: nowrap;
}
.pcar-desc {
font-size: 13px;
line-height: 1.4;
color: var(--body);
margin: 0;
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pcar-counter { flex-shrink: 0; line-height: 1; text-align: right; }
.pcar-cur {
font-family: 'Outfit', sans-serif;
font-size: clamp(20px,1.8vw,28px);
font-weight: 900;
color: var(--ink);
}
.pcar-tot {
font-family: 'Outfit', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--body);
}
/* Image row: peek | main | peek. Single-photo galleries drop the peek
columns entirely (.pcar-body-single) -- nothing to peek at. */
.pcar-body {
display: grid;
grid-template-columns: clamp(60px,8vw,140px) 1fr clamp(60px,8vw,140px);
gap: 10px;
margin-top: clamp(10px,1.5vh,16px);
aspect-ratio: 1440 / 440;
min-height: 260px;
}
.pcar-body-single { grid-template-columns: 1fr; }
.pcar-peek {
position: relative;
background-size: cover;
background-position: center;
background-color: var(--ink);
cursor: pointer;
overflow: hidden;
}
.pcar-peek::after {
content: '';
position: absolute;
inset: 0;
background: rgba(7,17,31,.55);
transition: background .2s;
}
.pcar-peek:hover::after { background: rgba(7,17,31,.35); }
/* Main photo -- slides cross-fade via opacity, same technique as
.proj-img-bg/.proj-img-slide elsewhere in this file. Sharp corners
kept intentionally; the wider gap + shadow alone are enough to read
as a distinct plate against the peek strip either side. */
.pcar-main { position: relative; background: #0B1B2E; overflow: hidden; box-shadow: 0 8px 28px rgba(10,24,40,.18); }
.pcar-main-inner { position: absolute; inset: 0; overflow: hidden; }
.pcar-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity .5s ease;
}
.pcar-slide.active { opacity: 1; }
.pcar-caption {
position: absolute;
left: 0;
bottom: 0;
z-index: 4;
display: flex;
align-items: center;
gap: 10px;
background: var(--ink);
padding: 12px 20px 12px 18px;
border-radius: 0 var(--r) 0 0;
max-width: calc(100% - 24px);
}
.pcar-caption-num {
font-family: 'Outfit', sans-serif;
font-size: 12px;
font-weight: 800;
color: var(--teal);
flex-shrink: 0;
}
.pcar-caption-text {
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Footer: prev/next arrows + caption label, a progress line, then
division/location meta -- replaces the old per-photo dot rail,
which doesn't scale well once a gallery reaches two dozen photos. */
.pcar-foot {
display: flex;
align-items: center;
gap: clamp(16px,2.5vw,32px);
max-width: var(--mw);
margin: clamp(10px,1.5vh,16px) auto 0;
padding: 0 var(--pcar-pad-x);
}
.pcar-foot-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 0; }
.pcar-arrow {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: var(--r);
border: 1px solid var(--rule);
background: var(--white);
color: var(--ink);
cursor: pointer;
box-shadow: 0 2px 8px rgba(10,24,40,.08);
transition: border-color .18s, box-shadow .18s;
}
.pcar-arrow:hover { border-color: var(--teal); box-shadow: 0 4px 14px rgba(10,24,40,.14); }
.pcar-foot-label {
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pcar-progress { flex: 1 1 auto; height: 2px; min-width: 60px; background: var(--rule); }
.pcar-progress-fill { height: 100%; background: var(--teal); transition: width .3s ease; }
.pcar-foot-right {
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--body);
white-space: nowrap;
}
/* Tablet: drop the peek panels -- not enough width left over to make
a meaningful crop once the main plate needs the space. */
@media (max-width: 900px) {
.pcar-body { grid-template-columns: 1fr; aspect-ratio: 4 / 3; }
.pcar-peek { display: none; }
}
/* Phone: header stacks, footer wraps so the meta text gets its own
row instead of squeezing the progress line to nothing. */
@media (max-width: 560px) {
.pcar-head-row { flex-direction: column; align-items: flex-start; gap: 6px; }
.pcar-head-text { flex-direction: column; align-items: flex-start; gap: 2px; }
.pcar-desc { white-space: normal; }
.pcar-counter { text-align: left; }
.pcar-foot { flex-wrap: wrap; }
.pcar-progress { order: 2; flex-basis: 100%; }
.pcar-foot-right { order: 3; width: 100%; }
}
/* ═══════════════════════════════════════════════════
TAKNEK HEADING-MANAGED PAGES — scoped heading/spacing overrides
Started as Construction+Automation only; now the shared "one
umbrella" scope for every page migrated onto the per-frame Heading
Size ACF system (see functions.php's body_class filter for the
current page list). Most of these pages have no "Template Name:"
header, so WordPress's own body_class() never emits a filename-
derived class to scope to otherwise -- this shared class fills
that gap.
Per feedback: section headings on Construction/Automation read too
large and sat too far from the content below them. .heading-lg/
.heading-md/.svc2-heading/.iproc-panel-title and the header-to-
content gaps (.frame-header/.svc2-header margin-bottom, .iproc-
widget's gap) are shared sitewide, so overriding them directly would
have changed every other page using the same classes -- scoped here
instead. Font sizes cut by roughly the same ~18% across the board;
gaps cut by roughly a third. (Other pages added to this scope later
may add their own base-class rules below without inheriting this
specific cut -- see each page's own comment.)
!important on every rule below: Additional CSS (wp-admin Customizer,
outside this repo/git) carries sitewide unscoped !important rules
touching these same classes (an unconditional .frame-header margin/
gap rule, and a max-width:768px block for .heading-lg/.heading-md/
.heading-sm). CSS resolves importance before specificity, so without
!important these more-specific two-class selectors were silently
losing to those plain-class sitewide rules on mobile widths -- which
is why the "Small" heading-size preset rendered differently per
frame depending on which base heading class it was applied to.
SINGLE SOURCE OF TRUTH for the 4 "Heading Size" presets: the actual
clamp() formula for each of sm/md/lg/xl is defined ONCE, right here,
as a custom property. Every rule below -- and every ID/body-class/
page-scoped copy of these same 4 rules further down (Homepage,
About, Careers) -- references var(--hsz-*) instead of repeating the
literal formula. Previously the same 4 numbers were retyped by hand
in ~17 separate places across this file; if a preset's size ever
needs to change, there is now exactly one line to edit instead of
17 (and no risk of one copy drifting out of sync with the rest,
which is what made this system hard to reason about). */
:root {
--hsz-sm: clamp(16px, 1.139vw + 8.02px, 29.9px);
--hsz-md: clamp(21px, 2.891vw + 1.09px, 57px);
--hsz-lg: clamp(26px, 2.959vw + 5.29px, 62.1px);
--hsz-xl: clamp(32px, 4.164vw + 2.85px, 82.8px);
}
/* ═══════════════════════════════════════════════════ */
body.taknek-heading-managed .heading-lg { font-size: clamp(26px, 4.651vw - 6.314px, 83px) !important; }
body.taknek-heading-managed .heading-md { font-size: var(--hsz-md) !important; }
body.taknek-heading-managed .svc2-heading { font-size: clamp(21px, 1.653vw + 9.75px, 41.49px) !important; }
body.taknek-heading-managed .iproc-panel-title { font-size: clamp(14px, 0.867vw + 7.87px, 24.52px) !important; }
body.taknek-heading-managed .frame-header { margin-bottom: clamp(20px, 2.8vh, 32px) !important; }
body.taknek-heading-managed .svc2-header { margin-bottom: clamp(32px, 3.2vh, 44px) !important; }
body.taknek-heading-managed .iproc-widget { gap: clamp(14px, 1.3vw, 24px) !important; }
/* Per-frame "Heading Size" ACF control (Construction page only, see
Site Settings on each frame in wp-admin) -- absolute sizes so every
preset, including "Medium", means the same actual rendered size on
every frame regardless of which base heading class (.heading-lg/
.heading-md/.svc2-heading) it overrides. .h-size-md is set to the
same value as the .heading-md scoped default above on purpose: most
frames already use .heading-md, so giving "Medium" that same value
normalizes the two outliers (About's larger .heading-lg, Capabilities'
smaller .svc2-heading) without visibly changing anything already on
.heading-md. */
.h-size-sm { font-size: var(--hsz-sm) !important; }
.h-size-md { font-size: var(--hsz-md) !important; }
.h-size-lg { font-size: var(--hsz-lg) !important; }
.h-size-xl { font-size: var(--hsz-xl) !important; }
/* The rules above lose to the scoped base-class defaults higher up
this file (body.taknek-heading-managed .heading-lg etc.): both are
!important, so cascade falls to specificity, and a type-selector-
plus-2-classes rule beats a 1-class rule -- meaning a frame's
Heading Size choice was being silently ignored in favor of its
base class's own default. Pairing each size class with each base
class it appears alongside restores enough specificity to win. */
body.taknek-heading-managed .heading-lg.h-size-sm,
body.taknek-heading-managed .heading-md.h-size-sm,
body.taknek-heading-managed .svc2-heading.h-size-sm,
body.taknek-heading-managed .iproc-panel-title.h-size-sm { font-size: var(--hsz-sm) !important; }
body.taknek-heading-managed .heading-lg.h-size-md,
body.taknek-heading-managed .heading-md.h-size-md,
body.taknek-heading-managed .svc2-heading.h-size-md,
body.taknek-heading-managed .iproc-panel-title.h-size-md { font-size: var(--hsz-md) !important; }
body.taknek-heading-managed .heading-lg.h-size-lg,
body.taknek-heading-managed .heading-md.h-size-lg,
body.taknek-heading-managed .svc2-heading.h-size-lg,
body.taknek-heading-managed .iproc-panel-title.h-size-lg { font-size: var(--hsz-lg) !important; }
body.taknek-heading-managed .heading-lg.h-size-xl,
body.taknek-heading-managed .heading-md.h-size-xl,
body.taknek-heading-managed .svc2-heading.h-size-xl,
body.taknek-heading-managed .iproc-panel-title.h-size-xl { font-size: var(--hsz-xl) !important; }
/* HOMEPAGE — Services/Why/Safety headings under the same Heading Size
system, ID-scoped instead of via the shared taknek-heading-managed
body class: the homepage has 8 total .heading-md headings and only
these 3 have an ACF Heading Size field (Services/Why/Safety use
taknek_heading() + an editable field; the other 5 -- Who We Are,
Clients & Partners, Projects In Action, Safety Pillar B, the CTA
strip -- are hardcoded text with no field to hook a size choice to).
Scoping by body class would resize all 8 just because they share
.heading-md; ID-scoping confines it to exactly the 3 in scope.
This also happens to be the correct fix for a pre-existing Additional
CSS (wp-admin Customizer, outside this repo) conflict: #services div
.heading-md and #why div .heading-md are ID-scoped !important rules,
which no class-only selector can ever outrank (an ID always beats
any number of classes). Recommend deleting those two Additional CSS
blocks (all breakpoint variants, both staging and live) since this
supersedes them; until then, this rule's own ID + 3 classes reliably
wins regardless. */
#services .svc2-header .heading-md.h-size-sm,
#why .frame-header .heading-md.h-size-sm,
#safetyPin .saf-a-heading.h-size-sm { font-size: var(--hsz-sm) !important; }
#services .svc2-header .heading-md.h-size-md,
#why .frame-header .heading-md.h-size-md,
#safetyPin .saf-a-heading.h-size-md { font-size: var(--hsz-md) !important; }
#services .svc2-header .heading-md.h-size-lg,
#why .frame-header .heading-md.h-size-lg,
#safetyPin .saf-a-heading.h-size-lg { font-size: var(--hsz-lg) !important; }
#services .svc2-header .heading-md.h-size-xl,
#why .frame-header .heading-md.h-size-xl,
#safetyPin .saf-a-heading.h-size-xl { font-size: var(--hsz-xl) !important; }
/* Additional CSS (wp-admin Customizer, outside this repo/git) has
"#services div .heading-md { margin-bottom: -40px !important; ... }"
(with -34px/-26px variants at narrower breakpoints). Because the
Services heading is the last child of .svc2-header -- a plain block
with no flex/grid/overflow/border to stop it -- that negative margin
collapses straight through into .svc2-header's own margin-bottom,
combining into one value (header's margin + this rule's -40px).
That was harmless while the header's margin was large (60-74px,
collapsed result still positive), but became a visible overlap once
the header's margin was tightened (32-44px, collapsed result near
zero or negative). Zeroing the heading's own margin here removes it
from the collapse entirely, so .svc2-header's margin-bottom is once
again the only thing controlling this gap. Higher specificity (ID +
2 classes + type vs. the external rule's ID + 1 class + type) wins
without needing to match every one of its breakpoint variants. */
#services .svc2-header h2.heading-md { margin-bottom: 0 !important; }
/* ABOUT PAGE — Industries/Credentials/Locations/Careers headings under
the same Heading Size system. Same reasoning as the homepage block
above -- ID-scoping confines the change instead of resizing
everything sharing a class. (Our Story's own heading, formerly
.story3-heading, was replaced by the Cinematic Band's .cband-ttl,
which has its own dedicated h-size-* rules elsewhere in this file --
the .story3-heading pairing that used to live here is gone with it.) */
#industries .ind-header .heading-md.h-size-sm,
#credentials .frame-header .heading-md.h-size-sm,
#our-locations .frame-header .heading-md.h-size-sm,
#careers .jot-top-left .heading-md.h-size-sm { font-size: var(--hsz-sm) !important; }
#industries .ind-header .heading-md.h-size-md,
#credentials .frame-header .heading-md.h-size-md,
#our-locations .frame-header .heading-md.h-size-md,
#careers .jot-top-left .heading-md.h-size-md { font-size: var(--hsz-md) !important; }
#industries .ind-header .heading-md.h-size-lg,
#credentials .frame-header .heading-md.h-size-lg,
#our-locations .frame-header .heading-md.h-size-lg,
#careers .jot-top-left .heading-md.h-size-lg { font-size: var(--hsz-lg) !important; }
#industries .ind-header .heading-md.h-size-xl,
#credentials .frame-header .heading-md.h-size-xl,
#our-locations .frame-header .heading-md.h-size-xl,
#careers .jot-top-left .heading-md.h-size-xl { font-size: var(--hsz-xl) !important; }
/* CAREERS PAGE — Divisions/Life at Taknek/Open Roles headings under
the same Heading Size system. .car-section-h (Divisions, Open
Roles) and .lat-h (Life at Taknek) are unique to these 3 headings
sitewide -- no other section shares them, and the hero (.car-hero-h,
an h1) is deliberately excluded, same as every other page's hero.
Safe as plain global rules, no ID/body-class scoping needed. */
.car-section-h.h-size-sm,
.lat-h.h-size-sm { font-size: var(--hsz-sm) !important; }
.car-section-h.h-size-md,
.lat-h.h-size-md { font-size: var(--hsz-md) !important; }
.car-section-h.h-size-lg,
.lat-h.h-size-lg { font-size: var(--hsz-lg) !important; }
.car-section-h.h-size-xl,
.lat-h.h-size-xl { font-size: var(--hsz-xl) !important; }
/* ═══════════════════════════════════════════════════
CONTACT PAGE v2 — "Bid Desk" redesign
All component classes prefixed `ctc-` so they can't collide with
existing sitewide classes of the same short names used elsewhere
in this file (.hero, .cell, .chip, .band, .flush, .close, .info,
.poster, .disp, .meter, .fgrid, .segrow all already exist for
unrelated components).
Reuses the theme's existing brand variables (--blue/--blue-dark/
--teal/--ink/--body/--muted/--rule/--bg/--white) mapped onto the
reference mockup's own token names, and the theme's existing
typefaces (Outfit for headings/mono-style labels, Source Sans 3
for body) rather than the mockup's Archivo/DM Sans/JetBrains Mono
-- introducing 3 new webfonts for one page would be inconsistent
with every other page on the site.
═══════════════════════════════════════════════════ */
/* ── Hero — split navy, image right ── */
.ctc-hero { display: grid; grid-template-columns: minmax(0,0.78fr) minmax(0,1.22fr); background: var(--blue-dark); color: #fff; }
.ctc-hero-l { display: flex; flex-direction: column; gap: clamp(18px,2.4vw,26px); padding: clamp(36px,5vw,58px) clamp(16px,2.5vw,44px) clamp(32px,4vw,52px); max-width: 640px; width: 100%; margin-left: auto; }
.ctc-eyebrow { display: flex; align-items: center; gap: 12px; font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #9fc6e8; }
.ctc-eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--teal); flex: none; }
.ctc-disp { font-family: 'Outfit', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: .95; font-size: clamp(34px, 4.000vw + 6.00px, 82.8px); color: #fff; margin: 0; }
.ctc-lede { font-size: clamp(14px, 0.408vw + 11.14px, 18.98px); line-height: 1.6; color: #cbd9e7; max-width: 48ch; margin: 0; }
.ctc-promise { display: grid; border-top: 2px solid rgba(255,255,255,.28); margin-top: auto; }
.ctc-promise > div { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 22px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.ctc-promise .k { font-family: 'Outfit', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #2AA6B0; }
.ctc-promise .v { font-size: 14px; line-height: 1.5; color: #dbe6f0; }
.ctc-hero-r { position: relative; min-height: 320px; background: #12283f; overflow: hidden; }
.ctc-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ctc-hero-r.grayscale .ctc-hero-bg { filter: grayscale(1) contrast(1.08); }
.ctc-stamp { position: absolute; left: 0; bottom: 0; z-index: 3; background: var(--ink); color: #fff; font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; padding: 11px 18px; }
.ctc-idx { position: absolute; right: 0; top: 0; z-index: 3; background: var(--teal); color: #fff; font-family: 'Outfit', sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 16px; }
/* ── Status strip ── */
.ctc-stripband { background: var(--bg); border-bottom: 2px solid var(--ink); }
.ctc-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); max-width: var(--mw); margin: 0 auto; padding: 0 clamp(16px,2.5vw,44px); }
.ctc-strip div { padding: 13px 20px; font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--body); border-left: 1px solid var(--rule); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctc-strip div:first-child { color: var(--ink); font-weight: 700; border-left: 0; padding-left: 0; }
.ctc-strip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); margin-right: 9px; vertical-align: 1px; }
/* ── Form band shell ── */
.ctc-band { max-width: var(--mw); margin: 0 auto; padding: 0 clamp(16px,2.5vw,44px); }
.ctc-fbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: clamp(28px,4vh,44px) 0 22px; flex-wrap: wrap; }
.ctc-fbar-h { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(26px, 1.451vw + 15.84px, 43.7px); text-transform: uppercase; letter-spacing: -.02em; line-height: .98; color: var(--ink); margin: 0; }
.ctc-fbar-h em { font-style: normal; color: var(--teal); }
.ctc-fbar p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--body); max-width: 56ch; }
.ctc-tabs { display: flex; gap: 10px; flex: none; flex-wrap: wrap; }
.ctc-tab { display: flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--rule); background: transparent; font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; cursor: pointer; transition: .16s; }
.ctc-tab:hover { color: var(--ink); border-color: var(--ink); }
.ctc-tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ctc-tab-icon { font-size: 14px; line-height: 1; }
.ctc-panels { position: relative; }
.ctc-panel { display: none; }
.ctc-panel.on { display: block; animation: ctcIn .25s ease; }
@keyframes ctcIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ctc-empty { padding: clamp(32px,5vh,56px) clamp(24px,4vw,40px); text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 14px; border-top: 2px solid var(--ink); }
.ctc-empty p { font-size: 14px; line-height: 1.7; max-width: 400px; }
.ctc-note { font-size: 12.5px; line-height: 1.55; color: var(--body); max-width: 60ch; margin: 16px 0 0; }
/* ── Numbered-cell field grid (both forms share this) ── */
.ctc-form-wrap .ctc-fgrid,
.ctc-form-wrap .fgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 2px solid var(--ink); }
.ctc-form-wrap .fgrid { display: none; }
.ctc-form-wrap .fgrid.on { display: grid; }
.ctc-form-wrap .cell,
.ctc-form-wrap .ctc-cell { position: relative; padding: 18px clamp(16px,2vw,26px); border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); transition: background .18s; }
.ctc-form-wrap .cell:first-child { border-left: 0; }
.ctc-form-wrap .cell.span2 { grid-column: span 2; }
.ctc-form-wrap .cell.span3 { grid-column: 1/-1; }
.ctc-form-wrap .cell:focus-within { background: var(--bg); }
.ctc-form-wrap .cell .idx { position: absolute; top: 18px; right: 10px; font-family: 'Outfit', sans-serif; font-size: 10px; letter-spacing: .08em; color: var(--muted); transition: color .18s; }
.ctc-form-wrap .cell:focus-within .idx { color: var(--teal); }
.ctc-form-wrap .cell:focus-within label,
.ctc-form-wrap .cell:focus-within .glabel { color: var(--ink); }
.ctc-form-wrap .req { color: var(--teal); }
.ctc-form-wrap br { display: none; }
/* Every field-wrapper convention this theme supports (.cell, .ctc-cell,
.ctf-field -- see the ctf-row block below) is targeted here AND one
level deeper (> p), because WordPress's wpautop filter wraps a
field's label+shortcode content in an extra
whenever the CF7
admin content puts them on separate source lines. Confirmed live via
DevTools twice, once per convention: the rendered DOM was actually
.cell > p > (label, br, span.wpcf7-form-control-wrap), not
.cell > (label, span) directly as the admin content visually
suggests. Without covering both levels, this flex/text-align never
reaches the real label and input (wpautop's
sits one level too
deep), leaving an inherited text-align:justify (from Additional CSS,
outside this repo) free to stretch short label text across the full
field width -- exactly what broke live twice, once per convention,
until both were covered by one shared rule instead of two separate,
easy-to-forget copies. */
.ctc-form-wrap .cell,
.ctc-form-wrap .cell > p,
.ctc-form-wrap .ctc-cell,
.ctc-form-wrap .ctc-cell > p {
display: flex; flex-direction: column; gap: 6px; margin: 0; text-align: left !important;
}
.ctc-form-wrap .cell label,
.ctc-form-wrap .cell .glabel,
.ctc-form-wrap .ctc-cell label {
display: block; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--body); margin: 0;
}
.ctc-form-wrap .cell .wpcf7-form-control-wrap,
.ctc-form-wrap .ctc-cell .wpcf7-form-control-wrap { display: block; width: 100%; }
/* ...except inside a chips/segrow group, where CF7 wraps the whole
checkbox/radio list in one span -- display:contents removes that
span's own box so its individual list items/labels become direct
participants in .chips/.segrow's own flex/grid layout instead of
being trapped one level too deep inside a single flex/grid item. */
.ctc-form-wrap .chips .wpcf7-form-control-wrap,
.ctc-form-wrap .segrow .wpcf7-form-control-wrap,
.ctc-form-wrap .chips .wpcf7-form-control,
.ctc-form-wrap .segrow .wpcf7-form-control,
.ctc-form-wrap .chips .wpcf7-list-item,
.ctc-form-wrap .segrow .wpcf7-list-item { display: contents; }
/* "Flush" inputs — borderless, sit directly under the numbered label */
.ctc-form-wrap input[type="text"],
.ctc-form-wrap input[type="email"],
.ctc-form-wrap input[type="tel"],
.ctc-form-wrap input[type="url"],
.ctc-form-wrap input[type="number"],
.ctc-form-wrap select,
.ctc-form-wrap textarea,
.ctc-form-wrap .flush {
border: 0; background: transparent; width: 100%; font-family: 'Source Sans 3', sans-serif;
font-size: 16px; line-height: 1.4; color: var(--ink); caret-color: var(--teal);
padding: 2px 0; min-height: 32px; outline: none; border-radius: 0; appearance: none; -webkit-appearance: none;
}
.ctc-form-wrap input::placeholder,
.ctc-form-wrap textarea::placeholder { color: var(--muted); }
.ctc-form-wrap textarea { resize: vertical; min-height: 96px; font-size: 15px; line-height: 1.55; }
.ctc-form-wrap select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23637D92' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; padding-right: 20px; }
.ctc-hint { font-size: 12.5px; line-height: 1.5; color: var(--body); margin: 7px 0 0; }
/* Older .ctf-row/.cf7-row conventions kept working inside the new
wrap too, in case a form still uses them at the wp-admin end. */
.ctc-form-wrap .ctf-row,
.ctc-form-wrap .cf7-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; padding: 18px clamp(16px,2vw,26px); border-top: 2px solid var(--ink); }
.ctc-form-wrap .ctf-row:not(:first-child),
.ctc-form-wrap .cf7-row:not(:first-child) { border-top: 1px solid var(--rule); }
.ctc-form-wrap .ctf-row-1col { grid-template-columns: 1fr; }
/* .ctf-field's own children are targeted here AND one level deeper
(> p) because WordPress's wpautop filter wraps any label+shortcode
content that spans multiple source lines in a