/* =====================================================================
* TECHCOM theme — main stylesheet
* 1. Design tokens (colors_and_type)
* 2. Site kit (header, footer, shared components)
* 3. Page styles, scoped by body class .tc-style-{page}
* (set per page in the Page Banner box → "Page style")
* 4. WordPress / theme additions
* ===================================================================== */
/* ============================== 1. TOKENS ============================== */
/* =============================================================================
* TECHCOM Design System — Colors & Type
* Sourced from logo, presentation outline, and 2026 sales handouts.
* =============================================================================
*/
:root {
/* ============================================================ COLORS */
/* ---- Brand primaries (calibrated against the live techcom.com crates page) - */
--tc-blue: #16335A; /* logo TECH wordmark / nav blue panel */
--tc-blue-deep: #0E2240; /* logo gear shadow */
--tc-blue-bright: #2A6FB8; /* hover / hyperlink */
--tc-red: #B5402E; /* brick orange-red — the primary accent on web */
--tc-red-deep: #8E2E20; /* press / darker red */
--tc-red-soft: #C75240; /* hover lift */
--tc-orange: #E26A2C; /* 3D rendered logo highlight (modern) */
/* ---- Neutrals (calibrated against the live crates page) ----------- */
--tc-navy-1000: #0A1A30; /* darkest panel / footer top */
--tc-navy-900: #122740; /* hero & dark sections */
--tc-navy-800: #16314D; /* product photo card surface on dark */
--tc-navy-700: #1D3C5D; /* card surface on dark / stat sub-card */
--tc-navy-600: #2A4A6A; /* divider on dark */
--tc-steel-500: #6B7B8E; /* steel/grey accent */
--tc-steel-300: #A9B4C0; /* secondary text on dark */
/* Cool gray-blue paper (global default) */
--tc-paper: #F2F6FD; /* gray-blue page background */
--tc-paper-soft: #D4E1F5; /* soft blue card */
--tc-paper-white: #FFFFFF; /* pure-white card */
--tc-rule: #6388C6; /* hairline on light (blue) */
--tc-ink: #1A1A1A; /* near-black primary text */
--tc-ink-2: #5C5852; /* warm grey secondary text */
--tc-white: #FFFFFF;
--tc-black: #000000;
/* ---- Semantic ------------------------------------------------------ */
--color-bg: var(--tc-paper);
--color-bg-dark: var(--tc-navy-900);
--color-surface: var(--tc-white);
--color-surface-dk: var(--tc-navy-700);
--color-fg: var(--tc-ink);
--color-fg-2: var(--tc-ink-2);
--color-fg-on-dark: var(--tc-white);
--color-fg-2-on-dk: #B7C2CC;
--color-rule: var(--tc-rule);
--color-rule-dk: var(--tc-navy-600);
/* The web brand leads with RED accent (not blue) — blue is the
structural navy panel; red is the wayfinding / CTA color. */
--color-accent: var(--tc-red);
--color-accent-2: var(--tc-blue);
--color-link: var(--tc-red);
--color-success: #2F7A4A;
--color-warning: #C28A1A;
--color-danger: var(--tc-red);
/* ============================================================ TYPE */
/* The TECHCOM crates page uses a heavy black industrial display.
Archivo Black is the closest free match; Saira Condensed remains
available as a long-form alt. */
--font-display: 'Archivo Black', 'Saira Condensed', 'Bebas Neue', 'Impact', sans-serif;
--font-sans: 'Archivo', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
--font-body: 'Inter', 'Archivo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
--font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
/* Scale — tuned for 1920x1080 slides as the primary surface */
--fs-eyebrow: 14px; /* tracked uppercase label */
--fs-body-sm: 16px;
--fs-body: 18px;
--fs-body-lg: 22px;
--fs-lead: 26px; /* slide subhead */
--fs-h6: 22px;
--fs-h5: 28px;
--fs-h4: 36px;
--fs-h3: 48px;
--fs-h2: 64px; /* slide title */
--fs-h1: 88px; /* hero */
--fs-display: 120px; /* big-quote hero */
--lh-tight: 1.05;
--lh-snug: 1.2;
--lh-normal: 1.45;
--lh-loose: 1.7;
--tracking-wide: 0.14em; /* eyebrow + button caps */
--tracking-mid: 0.06em;
--tracking-tight:-0.01em;
/* ============================================================ SPACE */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
--s-9: 96px; --s-10: 128px; --s-11: 160px;
/* Radii — TECHCOM is mostly RECTILINEAR (industrial). Small radius only. */
--r-xs: 2px;
--r-sm: 4px;
--r-md: 6px;
--r-lg: 10px;
--r-pill: 999px;
--r-circle: 50%;
/* Elevation — flat, only used for floating UI in interactive contexts */
--shadow-1: 0 1px 2px rgba(11,27,44,0.08), 0 1px 1px rgba(11,27,44,0.04);
--shadow-2: 0 4px 12px rgba(11,27,44,0.10), 0 2px 4px rgba(11,27,44,0.05);
--shadow-3: 0 14px 32px rgba(11,27,44,0.18), 0 4px 8px rgba(11,27,44,0.08);
--shadow-pop:0 24px 64px rgba(11,27,44,0.35);
/* Stroke — used for outline buttons, hairlines, icon strokes */
--stroke-hairline: 1px;
--stroke-rule: 2px;
--stroke-heavy: 4px;
/* Curve — the brand sweep used to divide image + text panels */
--tc-sweep: polygon(0 0, 100% 0, 100% 78%, 60% 100%, 0 92%);
}
/* ============================================================ SEMANTIC TAGS */
html { font-family: var(--font-body); font-size: var(--fs-body); color: var(--color-fg); }
h1, h2, h3, h4, h5, .display {
font-family: var(--font-display);
font-weight: 900;
/* The crates page uses Title Case for display headlines, NOT
UPPERCASE. Eyebrows + buttons + section tags keep the all-caps
treatment. */
text-transform: none;
letter-spacing: -0.005em;
line-height: 1.02;
color: var(--color-fg);
}
.eyebrow {
font-family: var(--font-sans);
font-weight: 700;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
line-height: var(--lh-tight);
font-size: var(--fs-eyebrow);
color: var(--tc-red);
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.005em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-sans); font-weight: 700; }
h5 { font-size: var(--fs-h5); font-family: var(--font-sans); font-weight: 700; }
h6 { font-size: var(--fs-h6); font-family: var(--font-sans); font-weight: 600; }
.eyebrow {
font-size: var(--fs-eyebrow);
letter-spacing: var(--tracking-wide);
font-family: var(--font-sans);
font-weight: 700;
color: var(--tc-blue);
}
.eyebrow--on-dark { color: var(--tc-red-soft); }
p, li {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-normal);
color: var(--color-fg);
text-wrap: pretty;
}
.lead { font-size: var(--fs-lead); line-height: var(--lh-snug); font-weight: 500; }
a { color: var(--color-link); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--tc-blue-deep); }
code, kbd, pre { font-family: var(--font-mono); font-size: 0.94em; }
/* Rules */
hr { border: 0; border-top: var(--stroke-rule) solid var(--tc-blue); }
hr.thin { border-top-width: var(--stroke-hairline); border-color: var(--color-rule); }
/* On-dark variants */
.on-dark, .on-dark p, .on-dark li, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5, .on-dark h6 {
color: var(--color-fg-on-dark);
}
.on-dark .eyebrow { color: var(--tc-steel-300); }
.on-dark hr { border-top-color: var(--tc-blue-bright); }
/* ============================== 2. SITE KIT ============================ */
/* =====================================================================
* TECHCOM Website UI kit — calibrated against
* https://www.techcom.com/crates-and-protective-packaging/
* ===================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
background: var(--tc-paper);
color: var(--tc-ink);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; border: 0; }
ul, ol { list-style: none; }
.container { max-width: 1380px; margin: 0 auto; padding: 0 56px; }
/* ─────────────────────────────────────────────── HEADER (signature) ───── */
.tc-header {
display: grid;
grid-template-columns: 1fr 2fr;
height: 104px;
position: sticky; top: 0; z-index: 50;
background: var(--tc-blue);
}
.tc-header__white {
background: #fff;
/* sharp diagonal cut into the navy panel: from bottom-left to
top-right corner of THIS element's right edge */
clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
padding: 14px 32px 14px 56px;
/* Fixed-width: align logo to the centered 1380px content container
on wide screens; never less than the 56px gutter on narrow ones. */
padding-left: max(56px, calc((100vw - 1380px) / 2 + 56px));
display: flex; align-items: center;
}
.tc-header__logo img { height: 72px; width: auto; }
.tc-header__navy {
padding: 0 56px;
/* Fixed-width: align the phone/nav to the centered container right edge. */
padding-right: max(56px, calc((100vw - 1380px) / 2 + 56px));
display: flex; align-items: center; justify-content: flex-end;
}
.tc-header__nav {
display: flex; align-items: center; gap: 28px;
}
.tc-header__nav a {
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
color: #fff;
letter-spacing: 0.005em;
padding: 8px 0;
}
.tc-header__nav a:hover { color: var(--tc-red-soft); }
.tc-header__nav .phone {
font-weight: 700;
font-size: 16px;
padding: 8px 16px;
border: 1px solid rgba(255,255,255,0.85);
border-radius: 3px;
line-height: 1;
}
.tc-header__nav .phone:hover {
color: #fff;
background: rgba(255,255,255,0.12);
border-color: #fff;
}
.lang {
display: inline-flex; align-items: center; gap: 6px;
background: #fff; padding: 6px 10px;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.lang__g {
width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center;
background: conic-gradient(from 0deg, #4285F4 0deg 90deg, #34A853 90deg 180deg, #FBBC05 180deg 270deg, #EA4335 270deg 360deg);
color: #fff;
font-family: var(--font-sans);
font-weight: 700;
font-size: 12px;
border-radius: 50%;
}
.lang select {
border: 0; background: transparent;
font-family: var(--font-body); font-size: 14px;
color: var(--tc-ink); cursor: pointer;
}
/* ─────────────────────────────────────────────── RED SUB-NAV ───── */
.tc-subnav {
background: var(--tc-red);
color: #fff;
}
.tc-subnav__inner {
max-width: 1380px; margin: 0 auto;
padding: 0 56px;
display: flex; align-items: center;
gap: 0;
}
.tc-subnav a {
color: #fff;
font-family: var(--font-body);
font-weight: 600;
font-size: 17.5px;
padding: 18px 22px;
transition: background 0.15s;
}
.tc-subnav a:hover { background: var(--tc-red-deep); }
.tc-subnav a.is-current { background: var(--tc-red-soft); color: #fff; }
/* ─────────────────────────────────────────────── HERO ───── */
.hero {
background: var(--tc-navy-900);
color: #fff;
padding: 96px 0 0 0;
position: relative;
}
.hero__inner {
max-width: 1380px;
margin: 0 auto;
padding: 0 56px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.hero__text { max-width: 560px; }
.hero__title {
font-family: var(--font-display);
font-weight: 900;
font-size: 88px;
line-height: 0.98;
letter-spacing: -0.01em;
color: #fff;
margin-top: 22px;
}
.hero__lede {
font-size: 18px;
line-height: 1.6;
color: var(--tc-steel-300);
margin-top: 26px;
}
.hero__text .btn { margin-top: 32px; }
.hero__card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 6px;
padding: 36px;
box-shadow: 0 20px 60px rgba(0,0,0,0.30);
}
.hero__card-photo {
width: 100%;
aspect-ratio: 4/3;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
border-radius: 4px;
}
.hero__card-caption {
margin-top: 18px;
text-align: center;
display: flex; flex-direction: column; gap: 4px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 13px;
color: var(--tc-steel-300);
letter-spacing: 0.16em;
text-transform: uppercase;
}
.hero__stats {
margin-top: 56px;
background: var(--tc-navy-1000);
}
.hero__stats-inner {
max-width: 1380px; margin: 0 auto;
padding: 36px 56px;
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.hero__stats-inner > div {
text-align: center;
border-right: 1px solid var(--tc-navy-700);
}
.hero__stats-inner > div:last-child { border-right: 0; }
.stat-n {
font-family: var(--font-display);
font-weight: 900;
font-size: 56px;
color: var(--tc-red);
line-height: 1;
letter-spacing: -0.01em;
}
.stat-l {
margin-top: 10px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 13px;
color: var(--tc-steel-300);
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* ─────────────────────────────────────────────── BUTTONS ───── */
.btn {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-sans);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.20em;
text-transform: uppercase;
padding: 18px 28px;
border-radius: 2px;
border: 0;
cursor: pointer;
transition: background 0.15s, color 0.15s, transform 0.15s;
min-width: 200px;
}
.btn--red { background: var(--tc-red); color: #fff; }
.btn--red:hover { background: var(--tc-red-soft); }
.btn--outline-light{ background: transparent; color: #fff;
box-shadow: inset 0 0 0 2px #fff; }
.btn--outline-light:hover { background: #fff; color: var(--tc-navy-900); }
.btn--lg { padding: 22px 32px; font-size: 14px; }
/* ─────────────────────────────────────────────── SECTION SCAFFOLD ───── */
/* Fluid vertical rhythm — scales smoothly from phone to desktop.
~48px on small phones → caps at 96px on wide screens. */
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section--paper { background: var(--tc-paper); }
.section--paper-soft { background: var(--tc-paper-soft); }
.section--navy { background: var(--tc-navy-900); color: #fff; }
.section-head { max-width: 880px; margin-bottom: clamp(32px, 5vw, 48px); }
.section-head--narrow { max-width: 720px; }
.section-head h2 {
font-family: var(--font-display);
font-weight: 900;
font-size: 56px;
line-height: 1;
letter-spacing: -0.01em;
color: var(--tc-ink);
margin-top: 16px;
}
.section--navy .section-head h2 { color: #fff; }
.section-sub {
font-size: 17px; line-height: 1.55;
color: var(--tc-ink-2);
margin-top: 20px;
max-width: 720px;
}
.section--navy .section-sub { color: var(--tc-steel-300); }
/* ─────────────────────────────────────────────── EYEBROW + TAGS ───── */
.eyebrow {
display: inline-block;
font-family: var(--font-sans);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--tc-red);
margin-bottom: 0;
}
.tag-red {
display: inline-block;
background: var(--tc-red);
color: #fff;
font-family: var(--font-sans);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 8px 16px;
border-radius: 2px;
}
/* ─────────────────────────────────────────────── WHY 3-UP ───── */
.why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.why-card {
background: var(--tc-paper-white);
border-top: 3px solid var(--tc-red);
padding: 36px 36px 40px 36px;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
min-height: 280px;
position: relative;
}
.why-card__num {
display: block;
font-family: var(--font-display);
font-weight: 900;
font-size: 64px;
line-height: 1;
color: var(--tc-rule);
letter-spacing: -0.01em;
margin-bottom: 16px;
}
.why-card h3 {
font-family: var(--font-display);
font-weight: 900;
font-size: 22px;
line-height: 1.15;
letter-spacing: -0.005em;
color: var(--tc-ink);
margin-bottom: 12px;
}
.why-card p {
font-size: 16px;
line-height: 1.6;
color: var(--tc-ink-2);
}
/* ─────────────────────────────────────────────── TWO-COLUMN ───── */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.two-col--flip > .two-col__media { order: 0; }
.two-col__text { max-width: 560px; }
.two-col__text h2 {
font-family: var(--font-display);
font-weight: 900;
font-size: 48px;
line-height: 1.02;
letter-spacing: -0.01em;
color: var(--tc-ink);
margin-top: 14px;
margin-bottom: 22px;
}
.two-col__text.on-dark h2 { color: #fff; }
.two-col__text p {
font-size: 17px; line-height: 1.65;
color: var(--tc-ink-2);
margin-bottom: 22px;
}
.two-col__text.on-dark p { color: var(--tc-steel-300); }
/* ─────────────────────────────────────────────── CHECK LIST ───── */
.check-list { display: flex; flex-direction: column; gap: 12px; }
.check-list li {
position: relative;
padding-left: 30px;
font-size: 16px;
color: var(--tc-ink);
line-height: 1.5;
}
.check-list li::before {
content: "";
position: absolute; left: 0; top: 4px;
width: 14px; height: 14px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.check-list--on-dark li { color: #fff; }
.check-list--on-dark li::before {
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* ─────────────────────────────────────────────── COLLAGES ───── */
.collage {
position: relative;
height: 520px;
background: transparent;
}
.collage__main {
position: absolute; left: 0; top: 0;
width: 64%; height: 100%;
background-color: var(--tc-paper-white);
background-size: cover; background-position: center;
border-radius: 4px;
}
.collage__alt-a, .collage__alt-b {
position: absolute; right: 0;
width: 36%; height: calc(50% - 8px);
background-color: var(--tc-paper-white);
background-size: cover; background-position: center;
border-radius: 4px;
}
.collage__alt-a { top: 0; }
.collage__alt-b { bottom: 0; }
.capability-collage {
position: relative;
height: 460px;
}
.capability-collage > div {
position: absolute;
background-size: cover; background-position: center;
border-radius: 4px;
border: 1px solid var(--tc-navy-600);
}
.capability-collage__a { left: 0; top: 0; width: 65%; height: 100%; }
.capability-collage__b { right: 0; top: 0; width: 32%; height: 50%; }
.capability-collage__c { right: 0; bottom: 0; width: 32%; height: 45%; }
.safety-pair {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
height: 460px;
}
.safety-pair > div {
background-size: cover; background-position: center;
border-radius: 4px;
}
/* ─────────────────────────────────────────────── CRATE CARDS ───── */
.crate-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.crate-card {
background: var(--tc-paper-white);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.crate-card__photo {
height: 340px;
background-size: cover; background-position: center;
border-radius: 6px 6px 0 0;
}
.crate-card__photo--wood { background-color: #5C3B22; }
.crate-card__photo--steel { background-color: #6A2C1C; }
.crate-card__body { padding: 32px 36px 36px; }
.crate-card h3 {
font-family: var(--font-display);
font-weight: 900;
font-size: 24px;
line-height: 1.15;
letter-spacing: -0.005em;
color: var(--tc-ink);
margin-bottom: 14px;
}
.crate-card p {
font-size: 15px;
line-height: 1.55;
color: var(--tc-ink-2);
margin-bottom: 22px;
}
.chip-row {
display: flex; flex-wrap: wrap; gap: 10px;
}
.chip {
font-family: var(--font-sans);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 7px 14px;
border: 1px solid var(--tc-rule);
background: var(--tc-paper);
color: var(--tc-ink-2);
border-radius: 2px;
}
/* ─────────────────────────────────────────────── PROCESS ───── */
.process { background: var(--tc-red); color: #fff; padding: 72px 0; }
.process__grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.process__step {
text-align: center;
padding: 0 40px;
border-right: 1px solid rgba(255,255,255,0.18);
position: relative;
}
.process__step:last-child { border-right: 0; }
.process__n {
display: block;
font-family: var(--font-display);
font-weight: 900;
font-size: 64px;
line-height: 1;
color: rgba(255,255,255,0.32);
letter-spacing: -0.01em;
margin-bottom: 8px;
}
.process__h {
font-family: var(--font-sans);
font-weight: 700;
font-size: 16px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #fff;
margin-bottom: 14px;
}
.process__step p {
font-size: 14px;
line-height: 1.5;
color: rgba(255,255,255,0.90);
}
/* ─────────────────────────────────────────────── DOCUMENTATION CARDS ───── */
.doc-pair {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.doc-card {
background: #fff;
color: var(--tc-ink);
padding: 14px 14px 12px 14px;
border-radius: 4px;
border: 2px solid var(--tc-blue);
display: flex; flex-direction: column;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.doc-card__hd {
display: flex; gap: 10px; align-items: center;
padding-bottom: 10px;
border-bottom: 1px solid var(--tc-rule);
}
.doc-card__brand { height: 36px; width: auto; }
.doc-card__sup {
font-family: var(--font-sans);
font-weight: 700;
font-size: 9px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--tc-ink-2);
}
.doc-card__h {
font-family: var(--font-sans);
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
line-height: 1.2;
color: var(--tc-ink);
}
.doc-card__img {
margin: 10px 0;
flex: 1;
aspect-ratio: 4/3;
background-size: cover; background-position: center;
border-radius: 2px;
border: 1px solid var(--tc-rule);
}
.doc-card__ft {
display: flex; flex-direction: column; gap: 2px;
font-family: var(--font-mono);
font-size: 9px;
color: var(--tc-ink-2);
border-top: 1px solid var(--tc-rule);
padding-top: 6px;
}
/* ─────────────────────────────────────────────── CLIENTS ───── */
.clients-row {
display: flex; flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
.client-chip {
font-family: var(--font-sans);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 16px 28px;
background: var(--tc-paper-soft);
color: var(--tc-ink);
border: 1px solid var(--tc-rule);
border-radius: 2px;
}
/* ─────────────────────────────────────────────── FINAL CTA BAND ───── */
.cta-band {
background: var(--tc-navy-900);
color: #fff;
padding: 96px 0;
}
.cta-band__inner {
display: grid; grid-template-columns: 1.3fr 0.9fr;
gap: 64px; align-items: center;
}
.cta-band__text h2 {
font-family: var(--font-display);
font-weight: 900;
font-size: 56px;
line-height: 1.02;
letter-spacing: -0.01em;
color: #fff;
}
.cta-band__meta {
margin-top: 18px;
font-size: 14px;
color: var(--tc-steel-300);
}
.cta-band__ctas {
display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.cta-band__ctas .btn {
width: 301px; height: 51px;
display: inline-flex; align-items: center; justify-content: center;
box-sizing: border-box;
}
/* ─────────────────────────────────────────────── FOOTER ───── */
.tc-footer {
background: #000;
color: var(--tc-steel-300);
padding: 56px 0 0 0;
}
.tc-footer__inner {
display: grid; grid-template-columns: 1.4fr 1.6fr;
gap: 48px;
padding-bottom: 32px;
align-items: center;
}
.tc-footer__title {
font-family: var(--font-display);
font-weight: 900;
font-size: 34px;
color: #fff;
letter-spacing: -0.005em;
}
.tc-footer__addr {
margin-top: 10px;
font-size: 16px;
color: #fff;
}
.tc-footer__line {
margin-top: 6px;
font-size: 14px;
color: var(--tc-steel-300);
}
.tc-footer__line a { color: var(--tc-red-soft); font-weight: 600; }
.tc-footer__certs {
display: flex; gap: 32px; justify-content: flex-end; align-items: center;
}
.cert {
display: flex; align-items: center;
}
.cert img {
height: 60px; width: auto; display: block;
}
/* Indy + SBA logos sized down 15% relative to the Women-in-3DP logo */
.cert--indy img,
.cert--wosb img {
height: 51px;
}
/* Round the corners of the two rectangular logos (Indy badge is circular) */
.cert--wi3dp img,
.cert--wosb img {
border-radius: 8px;
}
.cert__icon {
font-size: 24px;
color: var(--tc-blue);
}
.cert b { font-weight: 700; color: var(--tc-ink); font-size: 12px; }
.cert--wosb .cert__sba {
font-family: var(--font-display);
font-weight: 900; font-size: 18px;
color: var(--tc-blue);
}
.cert--wosb .cert__sba span { color: var(--tc-red); }
.cert--wosb .cert__sub {
font-size: 9px; color: var(--tc-ink-2); letter-spacing: 0.04em;
max-width: 100px;
}
.cert--indy {
background: var(--tc-navy-900); color: #fff;
}
.cert--indy .cert__indy {
font-family: var(--font-display);
font-weight: 900;
font-size: 12px;
letter-spacing: 0.05em;
line-height: 1.05;
}
.cert--indy .cert__sub {
font-size: 9px; color: var(--tc-steel-300); letter-spacing: 0.10em;
text-transform: uppercase;
}
.tc-footer__base {
border-top: 1px solid #1a1a1a;
padding: 20px 56px;
display: flex; justify-content: space-between;
font-family: var(--font-mono);
font-size: 11px;
color: #666;
letter-spacing: 0.04em;
}
/* ─────────────────────────────────────────────── RESPONSIVE ───── */
@media (max-width: 1100px) {
.container { padding: 0 32px; }
.tc-header { grid-template-columns: 1fr; height: auto; position: static; }
.tc-header__white { clip-path: none; }
.tc-header__navy { padding: 12px 32px; }
.tc-header__nav { flex-wrap: wrap; gap: 14px 20px; justify-content: flex-start; }
.tc-subnav__inner { overflow-x: auto; padding: 0 32px; }
.hero__inner { grid-template-columns: 1fr; gap: 40px; }
.hero__title { font-size: 56px; }
.two-col { grid-template-columns: 1fr; gap: 48px; }
.why-grid { grid-template-columns: 1fr; }
.crate-grid { grid-template-columns: 1fr; }
.process__grid { grid-template-columns: 1fr 1fr; gap: 24px 0; }
.doc-pair { grid-template-columns: 1fr; }
.cta-band__inner { grid-template-columns: 1fr; }
.tc-footer__inner { grid-template-columns: 1fr; }
.tc-footer__certs { justify-content: flex-start; flex-wrap: wrap; }
.section-head h2, .two-col__text h2, .cta-band__text h2 { font-size: 36px; }
}
.tc-footer__social{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:16px 0 0;padding:0}
.tc-footer__social a{display:block;width:34px;height:34px;opacity:.85;transition:opacity .16s,transform .16s}
.tc-footer__social a:hover{opacity:1;transform:translateY(-2px)}
.tc-footer__social img{width:100%;height:100%;object-fit:contain;display:block}
.tc-footer__base a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.tc-footer__base a:hover{color:#fff}
.tc-footer__clients{border-top:1px solid rgba(255,255,255,.08);padding:32px 0}
.tc-footer__clients-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:18px 22px;align-items:center}
.tc-footer__clients-list li{display:flex;align-items:center;justify-content:center;height:52px}
.tc-footer__clients-list img{max-width:100%;max-height:52px;object-fit:contain;display:block}
@media (max-width:1100px){.tc-footer__clients-list{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:640px){.tc-footer__clients-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
html { scroll-behavior: smooth; }
/* ============================== 3. PAGE: 3d-print (3d-print.css) ============================== */
/* =====================================================================
* 3D Print — page overlay on site.css
* Consolidates 7 legacy pages (services, process, gallery, videos,
* + 3 model pages) into one. Self-contained: replicates the video-hero
* pattern so it doesn't depend on tradeshows.css / custom-crates.css.
*
* Reuses from site.css: header, subnav, buttons, section--*, why-grid,
* section-head, two-col, clients-row, cta-band, footer.
* Adds: video hero, capability cards, process strip (w/ curing video),
* featured-work showcase, model gallery + lightbox, markets band,
* video rail, FAQ accordion.
* ===================================================================== */
.tc-style-3d-print #work, .tc-style-3d-print #gallery, .tc-style-3d-print #process, .tc-style-3d-print #faq, .tc-style-3d-print #cta { scroll-margin-top: 168px; }
@media (max-width: 1100px) {
}
/* ─────────────────────────────────────────── VIDEO HERO ───── */
.tc-style-3d-print .hero--video {
padding: 0; min-height: 660px; overflow: hidden; position: relative;
}
.tc-style-3d-print .hero--video .hero__video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; z-index: 0;
filter: contrast(1.04) saturate(1.05);
}
.tc-style-3d-print .hero--video .hero__scrim {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(110deg, rgba(10,26,48,0.95) 0%, rgba(10,26,48,0.78) 38%, rgba(10,26,48,0.30) 64%, rgba(10,26,48,0.62) 100%),
radial-gradient(80% 60% at 70% 92%, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%);
}
.tc-style-3d-print .hero--video .hero__inner {
position: relative; z-index: 2;
grid-template-columns: 1fr;
padding: 120px 56px 76px 56px;
min-height: 600px; align-items: flex-end; gap: 26px;
}
.tc-style-3d-print .hero--video .hero__text { max-width: 920px; }
.tc-style-3d-print .hero--video .hero__title {
margin-top: 18px; font-size: 112px; line-height: 0.92; letter-spacing: -0.025em;
}
.tc-style-3d-print .hero--video .hero__title .accent { color: var(--tc-red); }
.tc-style-3d-print .hero--video .hero__title .dot { color: var(--tc-red); margin-left: -0.04em; }
.tc-style-3d-print .hero--video .hero__lede {
margin-top: 22px; font-size: 19px; line-height: 1.62;
color: rgba(255,255,255,0.88); max-width: 660px;
}
.tc-style-3d-print .hero--video .hero__ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
/* Stat strip — 3-up, dead-center, with gap-centered dividers */
.tc-style-3d-print .hero__stats--3 .hero__stats-inner { grid-template-columns: repeat(3, 1fr); }
.tc-style-3d-print .hero__stats--3 .hero__stats-inner > div {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; position: relative; border-right: 0;
}
.tc-style-3d-print .hero__stats--3 .hero__stats-inner > div:not(:last-child)::after {
content: ""; position: absolute; top: 50%; right: -16px; transform: translateY(-50%);
width: 1px; height: 56px; background: var(--tc-navy-700);
}
/* ─────────────────────────────────────────── CAPABILITY CARDS ───── */
.tc-style-3d-print .cap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.tc-style-3d-print .cap-card {
background: var(--tc-paper-white); border: 1px solid var(--tc-rule);
border-radius: 8px; padding: 34px 34px 32px;
display: flex; flex-direction: column; gap: 12px;
border-top: 3px solid var(--tc-red);
}
.tc-style-3d-print .cap-card__kicker {
font-family: var(--font-sans); font-weight: 700; font-size: 11px;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--tc-red);
}
.tc-style-3d-print .cap-card h3 {
font-family: var(--font-display); font-weight: 900; font-size: 25px;
line-height: 1.1; letter-spacing: -0.01em; color: var(--tc-ink);
}
.tc-style-3d-print .cap-card p { font-size: 15.5px; line-height: 1.62; color: var(--tc-ink-2); }
/* ─────────────────────────────────────────── PROCESS (red band + video) ───── */
.tc-style-3d-print .process { background: var(--tc-navy-1000); }
.tc-style-3d-print .process__inner {
max-width: 1380px; margin: 0 auto; padding: 0 40px;
display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.tc-style-3d-print .process__media {
border-radius: 8px; overflow: hidden; background: #000;
box-shadow: 0 24px 60px rgba(0,0,0,0.4); border: 1px solid var(--tc-navy-700);
}
.tc-style-3d-print .process__media video { width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover; }
.tc-style-3d-print .process__media-cap {
font-family: var(--font-sans); font-weight: 600; font-size: 12px;
letter-spacing: 0.06em; color: var(--tc-steel-300);
padding: 12px 16px; background: var(--tc-navy-900);
}
.tc-style-3d-print .process__steps { display: flex; flex-direction: column; }
.tc-style-3d-print .process__lead { margin-bottom: 8px; }
.tc-style-3d-print .process-step2 {
display: grid; grid-template-columns: auto 1fr; gap: 20px;
padding: 22px 0; border-bottom: 1px solid var(--tc-navy-700);
}
.tc-style-3d-print .process-step2:last-child { border-bottom: 0; }
.tc-style-3d-print .process-step2__num {
font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 1;
color: var(--tc-red); width: 52px;
}
.tc-style-3d-print .process-step2__t {
font-family: var(--font-sans); font-weight: 700; font-size: 13px;
letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin-bottom: 7px;
}
.tc-style-3d-print .process-step2__d { font-size: 15px; line-height: 1.58; color: var(--tc-steel-300); }
/* ─────────────────────────────────────────── FEATURED WORK ───── */
/* Flagship: big QSK60 spread = navy two-col with image gallery thumbs */
.tc-style-3d-print .flagship { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.tc-style-3d-print .flagship__media {
background: #fff; border-radius: 10px; overflow: hidden;
box-shadow: 0 30px 70px rgba(0,0,0,0.32);
}
.tc-style-3d-print .flagship__hero {
width: 100%; aspect-ratio: 5/4; object-fit: contain; background: #fff;
cursor: zoom-in; display: block; padding: 8px;
}
.tc-style-3d-print .flagship__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 8px 8px; }
.tc-style-3d-print .flagship__thumbs img {
width: 100%; aspect-ratio: 1/1; object-fit: contain; background: var(--tc-paper-soft);
border-radius: 4px; cursor: zoom-in; padding: 4px;
}
.tc-style-3d-print .flagship__badge {
display: inline-block; font-family: var(--font-sans); font-weight: 700;
font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase;
color: #fff; background: var(--tc-red); padding: 6px 13px; border-radius: 3px; margin-bottom: 18px;
}
.tc-style-3d-print .flagship__spec { display: flex; gap: 36px; margin-top: 26px; flex-wrap: wrap; }
.tc-style-3d-print .flagship__spec div { display: flex; flex-direction: column; gap: 3px; }
.tc-style-3d-print .flagship__spec dt {
font-family: var(--font-sans); font-weight: 700; font-size: 10.5px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--tc-steel-300);
}
.tc-style-3d-print .flagship__spec dd {
font-family: var(--font-display); font-weight: 800; font-size: 28px; color: #fff; line-height: 1;
}
/* ─────────────────────────────────────────── MODEL GALLERY ───── */
.tc-style-3d-print .gallery-grid {
display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; grid-auto-flow: dense;
}
.tc-style-3d-print .g-tile {
position: relative; overflow: hidden; border-radius: 6px;
background: var(--tc-paper-white); border: 1px solid var(--tc-rule); cursor: zoom-in;
}
.tc-style-3d-print .g-tile img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.tc-style-3d-print .g-tile:hover img { transform: scale(1.05); }
.tc-style-3d-print .g-tile__cap {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 26px 16px 12px;
background: linear-gradient(to top, rgba(8,18,34,0.9), rgba(8,18,34,0));
color: #fff; font-family: var(--font-sans); font-weight: 700;
font-size: 12px; letter-spacing: 0.04em;
opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.25s;
}
.tc-style-3d-print .g-tile:hover .g-tile__cap { opacity: 1; transform: translateY(0); }
.tc-style-3d-print .g-tile--w6 { grid-column: span 6; }
.tc-style-3d-print .g-tile--w4 { grid-column: span 4; }
.tc-style-3d-print .g-tile--w3 { grid-column: span 3; }
.tc-style-3d-print .g-tile--w8 { grid-column: span 8; }
.tc-style-3d-print .g-tile--tall { aspect-ratio: 3/4; }
.tc-style-3d-print .g-tile--wide { aspect-ratio: 16/10; }
.tc-style-3d-print .g-tile--sq { aspect-ratio: 1/1; }
/* ─────────────────────────────────────────── MARKETS BAND ───── */
.tc-style-3d-print .markets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; }
.tc-style-3d-print .market {
padding: 6px 0; position: relative;
}
/* Divider centered in the 48px gutter between columns */
.tc-style-3d-print .market:not(:last-child)::after {
content: ""; position: absolute; top: 0; bottom: 0; right: -24px;
width: 1px; background: var(--tc-navy-600);
}
.tc-style-3d-print .market__n {
font-family: var(--font-display); font-weight: 900; font-size: 15px;
letter-spacing: 0.04em; color: #fff; margin-bottom: 12px;
padding-bottom: 12px; border-bottom: 2px solid var(--tc-red); display: inline-block;
}
.tc-style-3d-print .market p { font-size: 14.5px; line-height: 1.6; color: var(--tc-steel-300); }
/* ─────────────────────────────────────────── VIDEO RAIL ───── */
.tc-style-3d-print .vid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tc-style-3d-print .vid-card {
background: var(--tc-paper-white); border: 1px solid var(--tc-rule);
border-radius: 8px; overflow: hidden;
}
.tc-style-3d-print .vid-card video { width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover; background: #000; }
.tc-style-3d-print .vid-card__body { padding: 16px 18px 18px; }
.tc-style-3d-print .vid-card__t {
font-family: var(--font-display); font-weight: 800; font-size: 17px;
color: var(--tc-ink); margin-bottom: 4px;
}
.tc-style-3d-print .vid-card__d { font-size: 13.5px; line-height: 1.5; color: var(--tc-ink-2); }
/* ─────────────────────────────────────────── FAQ ACCORDION ───── */
.tc-style-3d-print .faq { max-width: 880px; margin: 0 auto; }
.tc-style-3d-print .faq-item { border-bottom: 1px solid var(--tc-rule); }
.tc-style-3d-print .faq-q {
width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
padding: 24px 44px 24px 0; position: relative;
font-family: var(--font-display); font-weight: 700; font-size: 20px;
color: var(--tc-ink); letter-spacing: -0.005em;
}
.tc-style-3d-print .faq-q::after {
content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
font-family: var(--font-sans); font-weight: 400; font-size: 28px; color: var(--tc-red);
transition: transform 0.25s;
}
.tc-style-3d-print .faq-item.is-open .faq-q::after { content: "–"; }
.tc-style-3d-print .faq-a {
max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
}
.tc-style-3d-print .faq-a__inner { padding: 0 44px 26px 0; font-size: 16px; line-height: 1.68; color: var(--tc-ink-2); }
/* ─────────────────────────────────────────── LIGHTBOX ───── */
.tc-style-3d-print .lightbox {
position: fixed; inset: 0; z-index: 200; background: rgba(6,14,28,0.93);
display: none; align-items: center; justify-content: center; padding: 48px;
opacity: 0; transition: opacity 0.2s;
}
.tc-style-3d-print .lightbox.is-open { display: flex; opacity: 1; }
.tc-style-3d-print .lightbox img {
max-width: 92vw; max-height: 88vh; object-fit: contain;
border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); background: #fff;
}
.tc-style-3d-print .lightbox__cap {
position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: #fff;
font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.06em;
}
.tc-style-3d-print .lightbox__close {
position: absolute; top: 24px; right: 30px; width: 44px; height: 44px;
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
border-radius: 50%; color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.tc-style-3d-print .lightbox__close:hover { background: rgba(255,255,255,0.2); }
/* ─────────────────────────────────────────── RESPONSIVE ───── */
@media (max-width: 1100px) {
.tc-style-3d-print .hero--video .hero__inner { padding: 104px 30px 56px; min-height: 520px; }
.tc-style-3d-print .hero--video .hero__title { font-size: 74px; }
.tc-style-3d-print .cap-grid { grid-template-columns: 1fr; }
.tc-style-3d-print .process__inner { grid-template-columns: 1fr; gap: 32px; }
.tc-style-3d-print .flagship { grid-template-columns: 1fr; gap: 30px; }
.tc-style-3d-print .markets { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
.tc-style-3d-print .market { border-right: 0; padding-right: 0; }
.tc-style-3d-print .market:not(:last-child)::after { display: none; }
.tc-style-3d-print .vid-grid { grid-template-columns: repeat(2, 1fr); }
.tc-style-3d-print .hero__stats--3 .hero__stats-inner { grid-template-columns: 1fr; gap: 22px; }
.tc-style-3d-print .hero__stats--3 .hero__stats-inner > div:not(:last-child)::after { display: none; }
.tc-style-3d-print .g-tile--w6, .tc-style-3d-print .g-tile--w4, .tc-style-3d-print .g-tile--w3, .tc-style-3d-print .g-tile--w8 { grid-column: span 6; }
}
@media (max-width: 640px) {
.tc-style-3d-print .hero--video .hero__title { font-size: 54px; }
.tc-style-3d-print .markets { grid-template-columns: 1fr; }
.tc-style-3d-print .vid-grid { grid-template-columns: 1fr; }
.tc-style-3d-print .gallery-grid { grid-template-columns: 1fr; }
.tc-style-3d-print .g-tile--w6, .tc-style-3d-print .g-tile--w4, .tc-style-3d-print .g-tile--w3, .tc-style-3d-print .g-tile--w8 { grid-column: span 1; }
.tc-style-3d-print .flagship__spec { gap: 24px; }
}
/* ============================== 3. PAGE: ar-vr (ar-vr.css) ============================== */
/* =====================================================================
* AR/VR — page overlay on site.css
* Consolidates the legacy AR/VR cluster (overview, AR, engine-maintenance,
* interactive cutaways, AR markets, AR videos) into one page.
* Self-contained: replicates the video-hero / process / markets / FAQ /
* lightbox patterns so it doesn't depend on 3d-print.css.
*
* Reuses from site.css: header, subnav, buttons, section--*, section-head,
* two-col, clients-row, cta-band, footer, eyebrow, check-list.
* Adds: video hero, AR-vs-VR split, capability cards, process w/ video,
* interactive-cutaway showcase, use-case/markets band, video feature,
* FAQ accordion.
* ===================================================================== */
.tc-style-ar-vr #compare, .tc-style-ar-vr #training, .tc-style-ar-vr #cutaway, .tc-style-ar-vr #markets, .tc-style-ar-vr #faq, .tc-style-ar-vr #cta { scroll-margin-top: 168px; }
@media (max-width: 1100px) {
}
/* ─────────────────────────────────────────── VIDEO HERO ───── */
.tc-style-ar-vr .hero--video { padding: 0; min-height: 660px; overflow: hidden; position: relative; }
.tc-style-ar-vr .hero--video .hero__video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; z-index: 0;
filter: contrast(1.04) saturate(1.05);
}
.tc-style-ar-vr .hero--video .hero__scrim {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(110deg, rgba(10,26,48,0.95) 0%, rgba(10,26,48,0.78) 38%, rgba(10,26,48,0.30) 64%, rgba(10,26,48,0.62) 100%),
radial-gradient(80% 60% at 70% 92%, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%);
}
.tc-style-ar-vr .hero--video .hero__inner {
position: relative; z-index: 2; grid-template-columns: 1fr;
padding: 120px 56px 76px 56px; min-height: 600px; align-items: flex-end; gap: 26px;
}
.tc-style-ar-vr .hero--video .hero__text { max-width: 920px; }
.tc-style-ar-vr .hero--video .hero__title { margin-top: 18px; font-size: 112px; line-height: 0.92; letter-spacing: -0.025em; }
.tc-style-ar-vr .hero--video .hero__title .accent { color: var(--tc-red); }
.tc-style-ar-vr .hero--video .hero__title .dot { color: var(--tc-red); margin-left: -0.04em; }
.tc-style-ar-vr .hero--video .hero__lede {
margin-top: 22px; font-size: 19px; line-height: 1.62;
color: rgba(255,255,255,0.88); max-width: 660px;
}
.tc-style-ar-vr .hero--video .hero__ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.tc-style-ar-vr .hero__stats--3 .hero__stats-inner { grid-template-columns: repeat(3, 1fr); }
.tc-style-ar-vr .hero__stats--3 .hero__stats-inner > div {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; position: relative; border-right: 0;
}
.tc-style-ar-vr .hero__stats--3 .hero__stats-inner > div:not(:last-child)::after {
content: ""; position: absolute; top: 50%; right: -16px; transform: translateY(-50%);
width: 1px; height: 56px; background: var(--tc-navy-700);
}
/* ─────────────────────────────────────────── AR vs VR SPLIT (signature) ───── */
.tc-style-ar-vr .split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.tc-style-ar-vr .split-card {
border-radius: 10px; overflow: hidden; padding: 40px 38px 38px;
display: flex; flex-direction: column; gap: 14px; position: relative;
border: 1px solid var(--tc-rule);
}
.tc-style-ar-vr .split-card--ar { background: var(--tc-paper-white); }
.tc-style-ar-vr .split-card--vr { background: var(--tc-navy-1000); border-color: var(--tc-navy-700); }
.tc-style-ar-vr .split-card__abbr {
font-family: var(--font-display); font-weight: 900; font-size: 64px; line-height: 0.9;
letter-spacing: -0.02em;
}
.tc-style-ar-vr .split-card--ar .split-card__abbr { color: var(--tc-red); }
.tc-style-ar-vr .split-card--vr .split-card__abbr { color: #fff; }
.tc-style-ar-vr .split-card__name {
font-family: var(--font-sans); font-weight: 700; font-size: 12px;
letter-spacing: 0.20em; text-transform: uppercase; margin-top: -6px;
}
.tc-style-ar-vr .split-card--ar .split-card__name { color: var(--tc-ink-2); }
.tc-style-ar-vr .split-card--vr .split-card__name { color: var(--tc-steel-300); }
.tc-style-ar-vr .split-card h3 {
font-family: var(--font-display); font-weight: 800; font-size: 25px; line-height: 1.12;
letter-spacing: -0.01em; margin-top: 6px;
}
.tc-style-ar-vr .split-card--ar h3 { color: var(--tc-ink); }
.tc-style-ar-vr .split-card--vr h3 { color: #fff; }
.tc-style-ar-vr .split-card p { font-size: 15.5px; line-height: 1.62; }
.tc-style-ar-vr .split-card--ar p { color: var(--tc-ink-2); }
.tc-style-ar-vr .split-card--vr p { color: var(--tc-steel-300); }
.tc-style-ar-vr .split-card__rule { height: 1px; background: currentColor; opacity: 0.14; margin: 6px 0; }
.tc-style-ar-vr .split-card__meta { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.tc-style-ar-vr .split-card__meta div {
display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline;
font-size: 14.5px; line-height: 1.45;
}
.tc-style-ar-vr .split-card__meta dt {
font-family: var(--font-sans); font-weight: 700; font-size: 10.5px;
letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
}
.tc-style-ar-vr .split-card--ar .split-card__meta dt { color: var(--tc-red); }
.tc-style-ar-vr .split-card--vr .split-card__meta dt { color: var(--tc-red-soft); }
.tc-style-ar-vr .split-card--ar .split-card__meta dd { color: var(--tc-ink); }
.tc-style-ar-vr .split-card--vr .split-card__meta dd { color: #fff; }
/* ─────────────────────────────────────────── CAPABILITY CARDS ───── */
.tc-style-ar-vr .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tc-style-ar-vr .cap-card {
background: var(--tc-paper-white); border: 1px solid var(--tc-rule);
border-radius: 8px; padding: 32px 30px 30px;
display: flex; flex-direction: column; gap: 11px; border-top: 3px solid var(--tc-red);
}
.tc-style-ar-vr .cap-card__kicker {
font-family: var(--font-sans); font-weight: 700; font-size: 11px;
letter-spacing: 0.20em; text-transform: uppercase; color: var(--tc-red);
}
.tc-style-ar-vr .cap-card h3 {
font-family: var(--font-display); font-weight: 900; font-size: 23px;
line-height: 1.1; letter-spacing: -0.01em; color: var(--tc-ink);
}
.tc-style-ar-vr .cap-card p { font-size: 15px; line-height: 1.6; color: var(--tc-ink-2); }
/* ─────────────────────────────────────────── PROCESS (navy + video) ───── */
.tc-style-ar-vr .process { background: var(--tc-navy-1000); }
.tc-style-ar-vr .process__inner {
max-width: 1380px; margin: 0 auto; padding: 0 40px;
display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: start;
}
.tc-style-ar-vr .process__media {
margin-top: 28px; /* drop video to align top with the "X-ray vision" headline */
border-radius: 8px; overflow: hidden; background: #000;
box-shadow: 0 24px 60px rgba(0,0,0,0.4); border: 1px solid var(--tc-navy-700);
}
.tc-style-ar-vr .process__media video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.tc-style-ar-vr .process__media-cap {
font-family: var(--font-sans); font-weight: 600; font-size: 12px;
letter-spacing: 0.06em; color: var(--tc-steel-300);
padding: 12px 16px; background: var(--tc-navy-900);
}
.tc-style-ar-vr .process__steps { display: flex; flex-direction: column; }
.tc-style-ar-vr .process__lead { margin-bottom: 8px; }
.tc-style-ar-vr .process-step2 {
display: grid; grid-template-columns: auto 1fr; gap: 20px;
padding: 22px 0; border-bottom: 1px solid var(--tc-navy-700);
}
.tc-style-ar-vr .process-step2:last-child { border-bottom: 0; }
.tc-style-ar-vr .process-step2__num {
font-family: var(--font-display); font-weight: 900; font-size: 26px; line-height: 1;
color: var(--tc-red); width: 44px;
}
.tc-style-ar-vr .process-step2__t {
font-family: var(--font-sans); font-weight: 700; font-size: 13px;
letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin-bottom: 7px;
}
.tc-style-ar-vr .process-step2__d { font-size: 15px; line-height: 1.58; color: var(--tc-steel-300); }
/* ─────────────────────────────────────────── INTERACTIVE CUTAWAY SHOWCASE ───── */
.tc-style-ar-vr .showcase { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }
.tc-style-ar-vr .showcase__media {
margin-top: 42px; /* drop video to align top with "Cutaways that come alive." */
border-radius: 10px; overflow: hidden;
box-shadow: 0 30px 70px rgba(0,0,0,0.32); background: #0a1a30;
}
.tc-style-ar-vr .showcase__media img { width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover; }
.tc-style-ar-vr .showcase__media video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.tc-style-ar-vr .showcase__badge {
display: inline-block; font-family: var(--font-sans); font-weight: 700;
font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase;
color: #fff; background: var(--tc-red); padding: 6px 13px; border-radius: 3px; margin-bottom: 18px;
}
/* ─────────────────────────────────────────── MARKETS / USE-CASE BAND ───── */
.tc-style-ar-vr .markets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.tc-style-ar-vr .market { padding: 6px 0; position: relative; }
.tc-style-ar-vr .market:not(:last-child)::after {
content: ""; position: absolute; top: 0; bottom: 0; right: -20px;
width: 1px; background: var(--tc-navy-600);
}
.tc-style-ar-vr .market__n {
font-family: var(--font-display); font-weight: 900; font-size: 15px;
letter-spacing: 0.03em; color: #fff; margin-bottom: 12px;
padding-bottom: 12px; border-bottom: 2px solid var(--tc-red); display: inline-block;
}
.tc-style-ar-vr .market p { font-size: 14.5px; line-height: 1.6; color: var(--tc-steel-300); }
/* ─────────────────────────────────────────── VIDEO FEATURE (full-width) ───── */
.tc-style-ar-vr .vfeature { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.tc-style-ar-vr .vfeature__media {
display: flex; justify-content: center;
margin-top: 34px; /* drop phone to align top with "Scale your expertise." */
}
/* Phone device mock — COO video shows THROUGH the transparent screen window
of the frame PNG. Window measured at: left 3.8% · top 24.5% · w 92.2% · h 65.9% */
.tc-style-ar-vr .phone-mock {
position: relative; width: 100%; max-width: 296px; margin: 0;
aspect-ratio: 476 / 985;
filter: drop-shadow(0 26px 44px rgba(0,0,0,0.46));
}
.tc-style-ar-vr .phone-mock__screen {
position: absolute; left: 3.8%; top: 24.5%; width: 92.2%; height: 65.9%;
object-fit: cover; background: #0a1a30; z-index: 1;
}
.tc-style-ar-vr .phone-mock__frame {
position: absolute; inset: 0; width: 100%; height: 100%;
z-index: 2; pointer-events: none;
}
/* ─────────────────────────────────────────── FAQ ACCORDION ───── */
.tc-style-ar-vr .faq { max-width: 880px; margin: 0 auto; }
.tc-style-ar-vr .faq-item { border-bottom: 1px solid var(--tc-rule); }
.tc-style-ar-vr .faq-q {
width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
padding: 24px 44px 24px 0; position: relative;
font-family: var(--font-display); font-weight: 700; font-size: 20px;
color: var(--tc-ink); letter-spacing: -0.005em;
}
.tc-style-ar-vr .faq-q::after {
content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
font-family: var(--font-sans); font-weight: 400; font-size: 28px; color: var(--tc-red);
transition: transform 0.25s;
}
.tc-style-ar-vr .faq-item.is-open .faq-q::after { content: "–"; }
.tc-style-ar-vr .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.tc-style-ar-vr .faq-a__inner { padding: 0 44px 26px 0; font-size: 16px; line-height: 1.68; color: var(--tc-ink-2); }
/* ─────────────────────────────────────────── LIGHTBOX ───── */
.tc-style-ar-vr .lightbox {
position: fixed; inset: 0; z-index: 200; background: rgba(6,14,28,0.93);
display: none; align-items: center; justify-content: center; padding: 48px;
opacity: 0; transition: opacity 0.2s;
}
.tc-style-ar-vr .lightbox.is-open { display: flex; opacity: 1; }
.tc-style-ar-vr .lightbox img {
max-width: 92vw; max-height: 88vh; object-fit: contain;
border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); background: #fff;
}
.tc-style-ar-vr .lightbox__cap {
position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: #fff;
font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.06em;
}
.tc-style-ar-vr .lightbox__close {
position: absolute; top: 24px; right: 30px; width: 44px; height: 44px;
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
border-radius: 50%; color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.tc-style-ar-vr .lightbox__close:hover { background: rgba(255,255,255,0.2); }
/* ─────────────────────────────────────────── RESPONSIVE ───── */
@media (max-width: 1100px) {
.tc-style-ar-vr .hero--video .hero__inner { padding: 104px 30px 56px; min-height: 520px; }
.tc-style-ar-vr .hero--video .hero__title { font-size: 74px; }
.tc-style-ar-vr .split { grid-template-columns: 1fr; }
.tc-style-ar-vr .cap-grid { grid-template-columns: 1fr; }
.tc-style-ar-vr .process__inner { grid-template-columns: 1fr; gap: 32px; }
.tc-style-ar-vr .process__media { order: -1; margin-top: 0; }
.tc-style-ar-vr .showcase { grid-template-columns: 1fr; gap: 30px; }
.tc-style-ar-vr .showcase__media { margin-top: 0; }
.tc-style-ar-vr .vfeature { grid-template-columns: 1fr; gap: 28px; }
.tc-style-ar-vr .vfeature__media { order: -1; margin-top: 0; }
.tc-style-ar-vr .markets { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
.tc-style-ar-vr .market:not(:last-child)::after { display: none; }
.tc-style-ar-vr .hero__stats--3 .hero__stats-inner { grid-template-columns: 1fr; gap: 22px; }
.tc-style-ar-vr .hero__stats--3 .hero__stats-inner > div:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
.tc-style-ar-vr .hero--video .hero__title { font-size: 54px; }
.tc-style-ar-vr .markets { grid-template-columns: 1fr; }
.tc-style-ar-vr .split-card__abbr { font-size: 52px; }
}
/* ─────────────────────────────────────────── TEAMMATE TWEAKS (Rick) ───── */
/* Footer/CTA band uses the global stacked-CTA styling from site.css. */
/* Keep these two headings on a single line at desktop. Fluid clamp() sizes the
type to the available width so it never overflows, and nowrap forbids the wrap. */
.tc-style-ar-vr [data-comment-anchor="e13e636820-h2"] { /* From overlay to full immersion. */
white-space: nowrap; font-size: clamp(30px, 3.4vw, 48px);
}
.tc-style-ar-vr #markets .two-col__text h2 { /* Where seeing is understanding. */
white-space: nowrap; font-size: clamp(28px, 3.2vw, 48px);
}
@media (max-width: 1100px) {
/* On mobile let them wrap normally and follow the global 36px heading size */
.tc-style-ar-vr [data-comment-anchor="e13e636820-h2"], .tc-style-ar-vr #markets .two-col__text h2 { white-space: normal; font-size: 36px; }
}
/* ============================== 3. PAGE: about (about.css) ============================== */
/* =====================================================================
* About / Capabilities — page overlay on site.css
* Merges the legacy About + Capabilities pages into one. Leads with the
* company story + CEO overview video, then the full capability/board
* overview: core competencies (cross-linked), codes & certs, and
* past-performance highlights with PDF summary-sheet downloads.
* Self-contained: replicates video-hero / modal / clients patterns.
* ===================================================================== */
.tc-style-about #story, .tc-style-about #competencies, .tc-style-about #codes, .tc-style-about #performance, .tc-style-about #cutaways, .tc-style-about #cta { scroll-margin-top: 168px; }
@media (max-width: 1100px) {
}
/* ─────────────────────────────────────────── VIDEO HERO ───── */
.tc-style-about .hero--video { padding: 0; min-height: 660px; overflow: hidden; position: relative; }
.tc-style-about .hero--video .hero__video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; z-index: 0; filter: contrast(1.04) saturate(1.04);
}
.tc-style-about .hero--video .hero__scrim {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(108deg, rgba(10,26,48,0.95) 0%, rgba(10,26,48,0.8) 38%, rgba(10,26,48,0.34) 64%, rgba(10,26,48,0.64) 100%),
radial-gradient(80% 60% at 70% 92%, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%);
}
.tc-style-about .hero--video .hero__inner {
position: relative; z-index: 2; grid-template-columns: 1fr;
padding: 124px 56px 80px 56px; min-height: 600px; align-items: flex-end; gap: 26px;
}
.tc-style-about .hero--video .hero__text { max-width: 960px; }
.tc-style-about .hero--video .hero__title { margin-top: 18px; font-size: 104px; line-height: 0.9; letter-spacing: -0.025em; }
.tc-style-about .hero--video .hero__title .accent { color: var(--tc-red); }
.tc-style-about .hero--video .hero__title .dot { color: var(--tc-red); margin-left: -0.04em; }
.tc-style-about .hero--video .hero__lede { margin-top: 22px; font-size: 19px; line-height: 1.62; color: rgba(255,255,255,0.88); max-width: 680px; }
.tc-style-about .hero--video .hero__ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.tc-style-about .hero__stats--4 .hero__stats-inner { grid-template-columns: repeat(4, 1fr); }
.tc-style-about .hero__stats--4 .hero__stats-inner > div {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; position: relative; border-right: 0;
}
.tc-style-about .hero__stats--4 .hero__stats-inner > div:not(:last-child)::after {
content: ""; position: absolute; top: 50%; right: -16px; transform: translateY(-50%);
width: 1px; height: 50px; background: var(--tc-navy-700);
}
/* ─────────────────────────────────────────── WHO WE ARE (video play-modal) ───── */
.tc-style-about .story { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; }
.tc-style-about .story__media {
position: relative; border-radius: 10px; overflow: hidden; cursor: pointer;
box-shadow: 0 28px 64px rgba(15,30,60,0.22); border: 1px solid var(--tc-rule); background: #08111f;
}
.tc-style-about .story__media img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; filter: brightness(0.82); transition: filter 0.3s, transform 0.6s cubic-bezier(.2,.7,.2,1); }
.tc-style-about .story__media:hover img { filter: brightness(0.95); transform: scale(1.03); }
.tc-style-about .story__play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
width: 78px; height: 78px; border-radius: 50%; background: rgba(193,39,45,0.94);
display: flex; align-items: center; justify-content: center; transition: transform 0.22s, background 0.22s;
}
.tc-style-about .story__media:hover .story__play { transform: translate(-50%,-50%) scale(1.08); background: var(--tc-red); }
.tc-style-about .story__play::after { content: ""; width: 0; height: 0; margin-left: 6px; border-left: 26px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.tc-style-about .story__tag {
position: absolute; left: 16px; bottom: 16px; z-index: 2;
font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: #fff; background: rgba(8,18,34,0.7); border: 1px solid rgba(255,255,255,0.2); padding: 7px 13px; border-radius: 4px;
}
.tc-style-about .story__text h2 { font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 1.04; letter-spacing: -0.01em; color: var(--tc-ink); margin-bottom: 18px; }
.tc-style-about .story__text p { font-size: 16.5px; line-height: 1.64; color: var(--tc-ink-2); margin-bottom: 14px; }
.tc-style-about .story__text p:last-child { margin-bottom: 0; }
/* ─────────────────────────────────────────── WHAT WE DO (numbered groups) ───── */
.tc-style-about .wwd { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 52px; align-items: center; }
.tc-style-about .wwd__media { border-radius: 10px; overflow: hidden; box-shadow: 0 24px 56px rgba(15,30,60,0.2); border: 1px solid var(--tc-rule); background: #fff; }
.tc-style-about .wwd__media img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: contain; background: #fff; padding: 10px; }
.tc-style-about .wwd__groups { display: flex; flex-direction: column; }
.tc-style-about .wwd-row { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--tc-rule); }
.tc-style-about .wwd-row:last-child { border-bottom: 0; }
.tc-style-about .wwd-row__num { font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 1; color: var(--tc-red); width: 46px; }
.tc-style-about .wwd-row__t { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--tc-ink); margin-bottom: 6px; letter-spacing: -0.01em; }
.tc-style-about .wwd-row__d { font-size: 15px; line-height: 1.58; color: var(--tc-ink-2); }
/* ─────────────────────────────────────────── CERTIFIED CALLOUT BANNER ───── */
.tc-style-about .certbar { background: var(--tc-red); }
.tc-style-about .certbar__inner {
max-width: 1380px; margin: 0 auto; padding: 30px 40px;
display: flex; align-items: center; justify-content: center; gap: 16px 28px; flex-wrap: wrap; text-align: center;
}
.tc-style-about .certbar__txt { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #fff; letter-spacing: -0.01em; line-height: 1.2; }
.tc-style-about .certbar__txt strong { font-weight: 900; }
.tc-style-about .certbar__badges { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tc-style-about .certbar__badges span {
font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
color: #fff; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.34); border-radius: 4px; padding: 8px 13px;
}
/* ─────────────────────────────────────────── CORE COMPETENCIES CROSS-LINKS ───── */
.tc-style-about .cc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tc-style-about .cc-card {
display: flex; flex-direction: column; gap: 9px; min-height: 150px;
background: var(--tc-paper-white); border: 1px solid var(--tc-rule); border-radius: 9px;
padding: 24px 22px; text-decoration: none; color: inherit; border-top: 3px solid var(--tc-red);
transition: transform 0.2s, box-shadow 0.2s;
}
.tc-style-about .cc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,30,60,0.16); }
.tc-style-about .cc-card__num { font-family: var(--font-display); font-weight: 900; font-size: 13px; letter-spacing: 0.06em; color: var(--tc-red); }
.tc-style-about .cc-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.12; letter-spacing: -0.01em; color: var(--tc-ink); flex: 1; }
.tc-style-about .cc-card__link { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tc-red); display: inline-flex; align-items: center; gap: 6px; }
.tc-style-about .cc-card__link::after { content: "→"; transition: transform 0.2s; }
.tc-style-about .cc-card:hover .cc-card__link::after { transform: translateX(3px); }
/* Box with two cross-links side by side */
.tc-style-about .cc-card__links { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.tc-style-about .cc-card__links .cc-card__link:hover { color: var(--tc-ink); }
/* ─────────────────────────────────────────── CODES / CERTIFICATIONS PANEL ───── */
.tc-style-about .codes { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center; }
.tc-style-about .codes__head h2 { font-family: var(--font-display); font-weight: 900; font-size: 36px; line-height: 1.04; color: var(--tc-ink); margin-bottom: 14px; letter-spacing: -0.01em; }
.tc-style-about .codes__head p { font-size: 15.5px; line-height: 1.6; color: var(--tc-ink-2); margin-bottom: 22px; }
.tc-style-about .codes__id { display: flex; flex-direction: column; border-top: 1px solid var(--tc-rule); margin-bottom: 24px; }
.tc-style-about .codes__id div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--tc-rule); align-items: baseline; }
.tc-style-about .codes__id dt { font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tc-red); }
.tc-style-about .codes__id dd { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--tc-ink); letter-spacing: 0.01em; }
.tc-style-about .codes__panel { background: var(--tc-paper-white); border: 1px solid var(--tc-rule); border-radius: 10px; padding: 28px 28px 26px; }
.tc-style-about .codes__label { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tc-ink); margin-bottom: 4px; }
.tc-style-about .codes__sub { font-size: 13px; color: var(--tc-ink-2); margin-bottom: 14px; }
.tc-style-about .code-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tc-style-about .code-chips span {
font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
font-weight: 600; font-size: 13px; color: var(--tc-ink); background: var(--tc-paper-soft);
border: 1px solid var(--tc-rule); border-radius: 4px; padding: 7px 11px;
}
.tc-style-about .cert-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.tc-style-about .cert-badges span {
font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
color: #fff; background: var(--tc-red); border-radius: 4px; padding: 9px 14px;
}
.tc-style-about .cert-badges span.ghost { background: transparent; border: 1px solid var(--tc-rule); color: var(--tc-ink-2); }
/* ─────────────────────────────────────────── DOWNLOAD BUTTON ───── */
.tc-style-about .btn-dl {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
color: #fff; background: var(--tc-navy-1000); border: 1px solid var(--tc-navy-700);
border-radius: 6px; padding: 13px 20px; text-decoration: none; transition: background 0.18s, transform 0.18s;
}
.tc-style-about .btn-dl:hover { background: var(--tc-red); border-color: var(--tc-red); transform: translateY(-2px); }
.tc-style-about .btn-dl::before { content: "↓"; font-weight: 900; font-size: 15px; }
.tc-style-about .btn-dl--onred { background: rgba(0,0,0,0.18); border-color: rgba(255,255,255,0.3); }
.tc-style-about .btn-dl--onred:hover { background: #fff; color: var(--tc-red); border-color: #fff; }
/* ─────────────────────────────────────────── PERFORMANCE HIGHLIGHT BLOCKS ───── */
.tc-style-about .perf { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.tc-style-about .perf-card {
background: var(--tc-paper-white); border: 1px solid var(--tc-rule); border-radius: 10px;
padding: 32px 32px 30px; display: flex; flex-direction: column; gap: 18px;
}
.tc-style-about .perf-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 2px solid var(--tc-red); padding-bottom: 14px; }
.tc-style-about .perf-card__head h3 { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.01em; color: var(--tc-ink); }
.tc-style-about .perf-card__head span { font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tc-red); white-space: nowrap; }
.tc-style-about .perf-list { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.tc-style-about .perf-list > div { display: grid; grid-template-columns: 1fr; gap: 3px; }
.tc-style-about .perf-list dt { font-family: var(--font-display); font-weight: 800; font-size: 15.5px; color: var(--tc-ink); }
.tc-style-about .perf-list dd { font-size: 14px; line-height: 1.5; color: var(--tc-ink-2); }
.tc-style-about .perf-metrics { display: flex; gap: 26px; flex-wrap: wrap; }
.tc-style-about .perf-metrics div { display: flex; flex-direction: column; gap: 2px; }
.tc-style-about .perf-metrics dt { font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 1; color: var(--tc-red); letter-spacing: -0.01em; }
.tc-style-about .perf-metrics dd { font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tc-ink-2); }
/* ─────────────────────────────────────────── CUTAWAY PAST-PERFORMANCE COLUMNS ───── */
.tc-style-about .pp-cols { columns: 4; column-gap: 32px; }
.tc-style-about .pp-block { break-inside: avoid; margin-bottom: 22px; }
.tc-style-about .pp-block__m { font-family: var(--font-display); font-weight: 900; font-size: 14px; letter-spacing: 0.02em; color: #fff; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--tc-navy-600); }
.tc-style-about .pp-block ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tc-style-about .pp-block li { font-size: 12.5px; line-height: 1.4; color: var(--tc-steel-300); }
/* ─────────────────────────────────────────── VIDEO MODAL ───── */
.tc-style-about .vmodal { position: fixed; inset: 0; z-index: 200; background: rgba(6,14,28,0.94); display: none; align-items: center; justify-content: center; padding: 48px; opacity: 0; transition: opacity 0.2s; }
.tc-style-about .vmodal.is-open { display: flex; opacity: 1; }
.tc-style-about .vmodal__inner { width: min(1100px, 92vw); }
.tc-style-about .vmodal video { width: 100%; max-height: 82vh; border-radius: 8px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,0.6); display: block; }
.tc-style-about .vmodal__cap { margin-top: 14px; color: #fff; text-align: center; font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.05em; }
.tc-style-about .vmodal__close { position: absolute; top: 24px; right: 30px; width: 44px; height: 44px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tc-style-about .vmodal__close:hover { background: rgba(255,255,255,0.2); }
/* ─────────────────────────────────────────── RESPONSIVE ───── */
@media (max-width: 1100px) {
.tc-style-about .hero--video .hero__inner { padding: 104px 30px 56px; min-height: 520px; }
.tc-style-about .hero--video .hero__title { font-size: 66px; }
.tc-style-about .story { grid-template-columns: 1fr; gap: 30px; }
.tc-style-about .wwd { grid-template-columns: 1fr; gap: 30px; }
.tc-style-about .wwd__media { order: -1; max-width: 460px; }
.tc-style-about .cc-grid { grid-template-columns: repeat(2, 1fr); }
.tc-style-about .codes { grid-template-columns: 1fr; gap: 32px; }
.tc-style-about .perf { grid-template-columns: 1fr; }
.tc-style-about .pp-cols { columns: 2; }
.tc-style-about .certbar__inner { flex-direction: column; }
.tc-style-about .hero__stats--4 .hero__stats-inner { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.tc-style-about .hero__stats--4 .hero__stats-inner > div:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
.tc-style-about .hero--video .hero__title { font-size: 46px; }
.tc-style-about .cc-grid { grid-template-columns: 1fr; }
.tc-style-about .codes__id div { grid-template-columns: 96px 1fr; }
.tc-style-about .pp-cols { columns: 1; }
.tc-style-about .perf-card__head { flex-direction: column; gap: 6px; }
}
/* ─────────────────────────────────────────── LEADERSHIP ───── */
.tc-style-about .lead-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.tc-style-about .lead-card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--tc-paper-white); border: 1px solid var(--tc-rule); border-radius: 12px; padding: 32px 22px 28px; border-top: 3px solid var(--tc-red); transition: box-shadow 0.22s, transform 0.22s; }
.tc-style-about .lead-card:hover, .tc-style-about .lead-card.is-active { box-shadow: 0 18px 40px rgba(15,30,60,0.14); transform: translateY(-3px); }
.tc-style-about .lead-card__photo { width: 168px; height: 168px; border-radius: 50%; overflow: hidden; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--tc-rule); padding: 0; cursor: pointer; background: var(--tc-paper-soft); transition: box-shadow 0.2s; margin-bottom: 20px; }
.tc-style-about .lead-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; transform: scale(1.06); }
.tc-style-about .lead-card__photo:hover, .tc-style-about .lead-card.is-active .lead-card__photo { box-shadow: 0 0 0 3px var(--tc-red); }
.tc-style-about .lead-card__name { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.01em; color: var(--tc-ink); }
.tc-style-about .lead-card__title { font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tc-red); margin-top: 6px; margin-bottom: 20px; }
.tc-style-about .lead-card__btn { margin-top: auto; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tc-ink); background: transparent; border: 1.5px solid var(--tc-ink); border-radius: 100px; padding: 10px 22px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.18s; }
.tc-style-about .lead-card__btn::after { content: "+"; font-size: 15px; line-height: 1; }
.tc-style-about .lead-card__btn:hover, .tc-style-about .lead-card.is-active .lead-card__btn { background: var(--tc-red); border-color: var(--tc-red); color: #fff; }
.tc-style-about .lead-card.is-active .lead-card__btn::after { content: "–"; }
.tc-style-about .lead-bios { margin-top: 0; }
.tc-style-about .lead-bio { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, margin 0.3s; }
.tc-style-about .lead-bio.is-open { margin-top: 28px; }
.tc-style-about .lead-bio__inner { position: relative; display: block; align-items: start; background: var(--tc-navy-1000); border-radius: 12px; padding: 40px 56px 40px 40px; border-top: 4px solid var(--tc-red); }
.tc-style-about .lead-bio__img { width: 180px; height: 210px; object-fit: cover; object-position: center 20%; border-radius: 8px; }
.tc-style-about .lead-bio__name { font-family: var(--font-display); font-weight: 900; font-size: 30px; color: #fff; letter-spacing: -0.01em; }
.tc-style-about .lead-bio__title { font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tc-red-soft); margin: 6px 0 18px; }
.tc-style-about .lead-bio p { font-size: 15.5px; line-height: 1.66; color: var(--tc-steel-300); margin-bottom: 12px; }
.tc-style-about .lead-bio p:last-child { margin-bottom: 0; }
.tc-style-about .lead-bio__close { position: absolute; top: 16px; right: 18px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tc-style-about .lead-bio__close:hover { background: var(--tc-red); border-color: var(--tc-red); }
@media (max-width: 1100px) {
.tc-style-about .lead-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.tc-style-about .lead-grid { grid-template-columns: 1fr; }
.tc-style-about .lead-bio__inner { padding: 56px 24px 28px; }
.tc-style-about .lead-bio__img { width: 140px; height: 160px; }
}
/* ============================== 3. PAGE: blog (blog.css) ============================== */
/* =====================================================================
* Blog — landing + article overlay on site.css
* Self-contained. Reuses site.css header/subnav/footer/buttons/section.
* ===================================================================== */
@media (max-width: 1100px) {
}
/* ─────────────────────────────────────────── BLOG HERO ───── */
.tc-style-blog .bhero {
background:
linear-gradient(90deg, rgba(10,26,48,0.94) 0%, rgba(10,26,48,0.78) 42%, rgba(10,26,48,0.52) 100%),
url('../images/design/blog-header-building.jpg') center 38% / cover no-repeat,
var(--tc-navy-1000);
padding: 72px 0 64px;
}
.tc-style-blog .bhero__inner { max-width: 1380px; margin: 0 auto; padding: 0 40px; }
.tc-style-blog .bhero__eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tc-red-soft); }
.tc-style-blog .bhero h1 { font-family: var(--font-display); font-weight: 900; font-size: 72px; line-height: 0.94; letter-spacing: -0.025em; color: #fff; margin-top: 14px; }
.tc-style-blog .bhero h1 .dot { color: var(--tc-red); }
.tc-style-blog .bhero p { font-size: 18px; line-height: 1.6; color: var(--tc-steel-300); max-width: 580px; margin-top: 16px; }
/* ─────────────────────────────────────────── FEATURED POST ───── */
.tc-style-blog .feat { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 0; border: 1px solid var(--tc-rule); border-radius: 14px; overflow: hidden; background: var(--tc-paper-white); }
.tc-style-blog .feat__media { position: relative; overflow: hidden; min-height: 380px; background: var(--tc-navy-1000); }
.tc-style-blog .feat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.tc-style-blog .feat:hover .feat__media img { transform: scale(1.04); }
.tc-style-blog .feat__tag { position: absolute; top: 18px; left: 18px; z-index: 2; font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--tc-red); padding: 7px 13px; border-radius: 4px; }
.tc-style-blog .feat__body { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.tc-style-blog .feat__meta { font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tc-ink-2); margin-bottom: 14px; }
.tc-style-blog .feat__body h2 { font-family: var(--font-display); font-weight: 900; font-size: 36px; line-height: 1.06; letter-spacing: -0.015em; color: var(--tc-ink); margin-bottom: 16px; }
.tc-style-blog .feat__body p { font-size: 16px; line-height: 1.62; color: var(--tc-ink-2); margin-bottom: 24px; }
.tc-style-blog .feat__link { font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tc-red); display: inline-flex; align-items: center; gap: 8px; }
.tc-style-blog .feat__link::after { content: "→"; transition: transform 0.2s; }
.tc-style-blog .feat:hover .feat__link::after { transform: translateX(4px); }
/* ─────────────────────────────────────────── CATEGORY BAR ───── */
.tc-style-blog .cat-strip { background: transparent; padding: 22px 0 0; position: sticky; top: 104px; z-index: 40; }
@media (max-width: 1100px) {
.tc-style-blog .cat-strip { position: static; top: auto; }
}
.tc-style-blog .cat-strip .cat-bar { margin-bottom: 0; }
.tc-style-blog .cat-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-bottom: 36px; }
.tc-style-blog .cat-chip {
font-family: var(--font-sans); font-weight: 700; font-size: 12px; line-height: 1;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--tc-ink-2);
background: var(--tc-paper-white); border: 1px solid var(--tc-rule); border-radius: 100px;
padding: 11px 17px; cursor: pointer; transition: background 0.16s, color 0.16s, border-color 0.16s; white-space: nowrap;
}
.tc-style-blog .cat-chip:hover { border-color: var(--tc-red); color: var(--tc-ink); }
.tc-style-blog .cat-chip.is-active { background: var(--tc-red); border-color: var(--tc-red); color: #fff; }
.tc-style-blog .cat-chip .cat-chip__n { opacity: 0.6; margin-left: 6px; font-size: 11px; }
.tc-style-blog .cat-empty { display: none; text-align: center; padding: 56px 20px; }
.tc-style-blog .cat-empty.show { display: block; }
.tc-style-blog .cat-empty p { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--tc-ink); margin-bottom: 6px; }
.tc-style-blog .cat-empty span { font-size: 15px; color: var(--tc-ink-2); }
.tc-style-blog .pcard.is-hidden { display: none; }
/* category label on article detail */
.tc-style-blog .acat { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.tc-style-blog .acat__inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 28px 0 0; }
.tc-style-blog .acat__label { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tc-ink-2); }
.tc-style-blog .acat a {
font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--tc-red); text-decoration: none; border: 1px solid var(--tc-rule); border-radius: 100px; padding: 7px 15px; transition: all 0.16s;
}
.tc-style-blog .acat a:hover { border-color: var(--tc-red); background: var(--tc-red); color: #fff; }
/* ─────────────────────────────────────────── POST GRID ───── */
.tc-style-blog .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tc-style-blog .pcard { display: flex; flex-direction: column; background: var(--tc-paper-white); border: 1px solid var(--tc-rule); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.22s, box-shadow 0.22s; }
.tc-style-blog .pcard:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(15,30,60,0.16); }
.tc-style-blog .pcard__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--tc-navy-1000); }
.tc-style-blog .pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.tc-style-blog .pcard:hover .pcard__media img { transform: scale(1.05); }
.tc-style-blog .pcard__tag { position: absolute; top: 14px; left: 14px; font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--tc-red); padding: 6px 11px; border-radius: 4px; }
.tc-style-blog .pcard__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.tc-style-blog .pcard__meta { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tc-ink-2); margin-bottom: 10px; }
.tc-style-blog .pcard__body h3 { font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.14; letter-spacing: -0.01em; color: var(--tc-ink); margin-bottom: 10px; }
.tc-style-blog .pcard__body p { font-size: 14.5px; line-height: 1.55; color: var(--tc-ink-2); flex: 1; }
.tc-style-blog .pcard__more { margin-top: 16px; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tc-red); display: inline-flex; align-items: center; gap: 7px; }
.tc-style-blog .pcard__more::after { content: "→"; transition: transform 0.2s; }
.tc-style-blog .pcard:hover .pcard__more::after { transform: translateX(4px); }
/* ─────────────────────────────────────────── ARTICLE ───── */
.tc-style-blog .ahero { position: relative; min-height: 270px; display: flex; align-items: flex-end; overflow: hidden; background: var(--tc-navy-1000); }
.tc-style-blog .ahero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.tc-style-blog .ahero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8,18,34,0.94) 6%, rgba(8,18,34,0.55) 48%, rgba(8,18,34,0.35) 100%); }
.tc-style-blog .ahero__inner { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; width: 100%; padding: 40px 40px 52px; }
.tc-style-blog .ahero__tag { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: var(--tc-red); padding: 7px 13px; border-radius: 4px; display: inline-block; }
.tc-style-blog .ahero h1 { font-family: var(--font-display); font-weight: 900; font-size: 52px; line-height: 1.03; letter-spacing: -0.02em; color: #fff; margin-top: 18px; max-width: 880px; }
.tc-style-blog .ahero__meta { font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; color: rgba(255,255,255,0.82); margin-top: 18px; display: flex; gap: 18px; flex-wrap: wrap; }
.tc-style-blog .ahero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.tc-style-blog .article { max-width: 1100px; margin: 0 auto; padding: 75px 40px 75px; }
/* Collapse doubled padding between adjacent blocks so every gap is a single 75px */
.tc-style-blog .article + .article { padding-top: 0; }
.tc-style-blog .article + .agal-wrap { margin-top: 0; }
.tc-style-blog .agal-wrap + .article { padding-top: 0; }
.tc-style-blog .article + .faq { padding-top: 0; }
.tc-style-blog .agal-wrap + .faq { margin-top: 0; }
/* Let block padding fully control vertical rhythm — neutralize first/last child margins */
.tc-style-blog .article > :first-child { margin-top: 0; }
.tc-style-blog .article > :last-child { margin-bottom: 0; }
.tc-style-blog .article__lede { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.5; color: var(--tc-ink); margin-bottom: 32px; letter-spacing: -0.01em; }
.tc-style-blog .article h2:not(.article .tc-scope *) { font-family: var(--font-display); font-weight: 900; font-size: 30px; line-height: 1.1; letter-spacing: -0.015em; color: var(--tc-ink); margin: 44px 0 16px; }
.tc-style-blog .article h3:not(.article .tc-scope *) { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.15; color: var(--tc-ink); margin: 32px 0 12px; }
.tc-style-blog .article p:not(.article .tc-scope *) { font-size: 17.5px; line-height: 1.72; color: var(--tc-ink-2); margin-bottom: 20px; }
.tc-style-blog .article a:not(.article .tc-scope *) { color: var(--tc-red); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(181,64,46,0.3); }
.tc-style-blog .article a:hover:not(.article .tc-scope *) { border-bottom-color: var(--tc-red); }
.tc-style-blog .article strong:not(.article .tc-scope *) { color: var(--tc-ink); font-weight: 700; }
.tc-style-blog .article ul:not(.article .tc-scope *) { margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.tc-style-blog .article ul li:not(.article .tc-scope *) { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.62; color: var(--tc-ink-2); }
.tc-style-blog .article ul li:not(.article .tc-scope *)::before { content: ""; position: absolute; left: 4px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--tc-red); }
.tc-style-blog .article ul li strong:not(.article .tc-scope *) { color: var(--tc-ink); }
/* pull divider */
.tc-style-blog .article hr:not(.article .tc-scope *) { border: 0; height: 1px; background: var(--tc-rule); margin: 40px 0; }
/* inline figure */
.tc-style-blog .afig { margin: 36px 0; }
.tc-style-blog .afig img { width: 100%; border-radius: 10px; border: 1px solid var(--tc-rule); display: block; cursor: zoom-in; }
.tc-style-blog .afig figcaption { font-family: var(--font-sans); font-size: 13px; color: var(--tc-ink-2); margin-top: 10px; text-align: center; }
/* image gallery (within article, full-bleed-ish) */
.tc-style-blog .agal-wrap { max-width: 1100px; margin: 75px auto; padding: 0 40px; }
.tc-style-blog .agal { display: grid; gap: 14px; }
.tc-style-blog .agal--3 { grid-template-columns: repeat(3, 1fr); }
.tc-style-blog .agal--4 { grid-template-columns: repeat(4, 1fr); }
.tc-style-blog .agal--5 { grid-template-columns: repeat(5, 1fr); }
.tc-style-blog .agal figure { margin: 0; position: relative; overflow: hidden; border-radius: 9px; border: 1px solid var(--tc-rule); aspect-ratio: 1/1; cursor: zoom-in; background: #fff; }
.tc-style-blog .agal figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.tc-style-blog .agal figure:hover img { transform: scale(1.06); }
/* FAQ accordion (reused) */
.tc-style-blog .faq { max-width: 1100px; margin: 0 auto; padding: 75px 40px; }
.tc-style-blog .faq-item { border-bottom: 1px solid var(--tc-rule); }
.tc-style-blog .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--tc-ink); letter-spacing: -0.005em; }
.tc-style-blog .faq-q::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--font-sans); font-weight: 400; font-size: 26px; color: var(--tc-red); }
.tc-style-blog .faq-item.is-open .faq-q::after { content: "–"; }
.tc-style-blog .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.tc-style-blog .faq-a__inner { padding: 0 44px 22px 0; font-size: 16px; line-height: 1.66; color: var(--tc-ink-2); }
/* share / social row */
.tc-style-blog .ashare { max-width: 1100px; margin: 0 auto; padding: 75px 40px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tc-style-blog .ashare span { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tc-ink-2); }
.tc-style-blog .ashare a { font-family: var(--font-sans); font-weight: 700; font-size: 13px; color: var(--tc-ink); border: 1px solid var(--tc-rule); border-radius: 100px; padding: 8px 16px; text-decoration: none; transition: all 0.16s; }
.tc-style-blog .ashare a:hover { border-color: var(--tc-red); color: var(--tc-red); }
/* related posts */
.tc-style-blog .related { background: var(--tc-paper-soft); padding-top: 75px; padding-bottom: 75px; }
.tc-style-blog .related .post-grid { grid-template-columns: repeat(3, 1fr); }
/* lightbox */
.tc-style-blog .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6,14,28,0.93); display: none; align-items: center; justify-content: center; padding: 48px; opacity: 0; transition: opacity 0.2s; }
.tc-style-blog .lightbox.is-open { display: flex; opacity: 1; }
.tc-style-blog .lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); background: #fff; }
.tc-style-blog .lightbox__cap { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; }
.tc-style-blog .lightbox__close { position: absolute; top: 24px; right: 30px; width: 44px; height: 44px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tc-style-blog .lightbox__close:hover { background: rgba(255,255,255,0.2); }
/* ─────────────────────────────────────────── RESPONSIVE ───── */
@media (max-width: 1100px) {
.tc-style-blog .bhero h1 { font-size: 52px; }
.tc-style-blog .feat { grid-template-columns: 1fr; }
.tc-style-blog .feat__media { min-height: 280px; }
.tc-style-blog .post-grid { grid-template-columns: repeat(2, 1fr); }
.tc-style-blog .ahero h1 { font-size: 40px; }
.tc-style-blog .agal--4, .tc-style-blog .agal--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.tc-style-blog .bhero h1 { font-size: 40px; }
.tc-style-blog .post-grid { grid-template-columns: 1fr!important; }
.tc-style-blog .article { padding: 44px 24px 8px; }
.tc-style-blog .article__lede { font-size: 20px; }
.tc-style-blog .ahero h1 { font-size: 32px; }
.tc-style-blog .agal--3, .tc-style-blog .agal--4, .tc-style-blog .agal--5 { grid-template-columns: repeat(2, 1fr); }
.tc-style-blog .agal-wrap, .tc-style-blog .faq, .tc-style-blog .ashare { padding-left: 24px; padding-right: 24px; }
}
/* ============================== 3. PAGE: contact (contact.css) ============================== */
/* =====================================================================
* Contact — page overlay on site.css
* Modeled on the Mumford layout: dark "Let's Talk" info card beside a
* light form panel, opening with a building-photo hero and a map below.
* Self-contained. Reuses site.css header/subnav/footer/buttons.
* ===================================================================== */
@media (max-width: 1100px) {
}
/* ─────────────────────────────────────────── PHOTO HERO ───── */
.tc-style-contact .chero { position: relative; min-height: 420px; overflow: hidden; display: flex; align-items: flex-end; }
.tc-style-contact .chero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; z-index: 0; }
.tc-style-contact .chero__scrim {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(100deg, rgba(8,20,38,0.92) 0%, rgba(8,20,38,0.72) 40%, rgba(8,20,38,0.30) 70%, rgba(8,20,38,0.5) 100%);
}
.tc-style-contact .chero__inner { position: relative; z-index: 2; max-width: 1380px; margin: 0 auto; width: 100%; padding: 0 40px 56px; }
.tc-style-contact .chero__title { font-family: var(--font-display); font-weight: 900; font-size: 76px; line-height: 0.92; letter-spacing: -0.025em; color: #fff; margin-top: 16px; }
.tc-style-contact .chero__title .dot { color: var(--tc-red); }
.tc-style-contact .chero__sub { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.86); max-width: 560px; margin-top: 16px; }
/* ─────────────────────────────────────────── CONTACT GRID ───── */
.tc-style-contact .contact-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 32px; align-items: start; }
/* Left dark info card */
.tc-style-contact .lets-talk { background: var(--tc-navy-1000); border-radius: 14px; padding: 44px 40px; position: relative; overflow: hidden; }
.tc-style-contact .lets-talk::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--tc-red); }
.tc-style-contact .lets-talk h2 { font-family: var(--font-display); font-weight: 900; font-size: 34px; letter-spacing: -0.01em; color: #fff; margin-bottom: 12px; }
.tc-style-contact .lets-talk__lede { font-size: 15.5px; line-height: 1.6; color: var(--tc-steel-300); margin-bottom: 30px; }
.tc-style-contact .lt-row { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--tc-navy-700); }
.tc-style-contact .lt-row:first-of-type { border-top: 0; }
.tc-style-contact .lt-ico {
width: 44px; height: 44px; border-radius: 50%; background: var(--tc-red);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tc-style-contact .lt-ico svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-style-contact .lt-row__k { font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tc-red-soft); margin-bottom: 5px; }
.tc-style-contact .lt-row__v { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: #fff; line-height: 1.3; }
.tc-style-contact .lt-row__v a { color: #fff; }
.tc-style-contact .lt-row__v a:hover { color: var(--tc-red-soft); }
.tc-style-contact .lt-row__v small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 13.5px; color: var(--tc-steel-300); margin-top: 3px; }
.tc-style-contact .lt-certs { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--tc-navy-700); }
.tc-style-contact .lt-certs span {
font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 4px; padding: 8px 12px;
}
/* Right form panel */
.tc-style-contact .cform { background: var(--tc-paper-white); border: 1px solid var(--tc-rule); border-radius: 14px; padding: 44px 44px 40px; }
.tc-style-contact .cform__head { margin-bottom: 28px; }
.tc-style-contact .cform__head h2 { font-family: var(--font-display); font-weight: 900; font-size: 30px; letter-spacing: -0.01em; color: var(--tc-ink); }
.tc-style-contact .cform__head p { font-size: 14.5px; color: var(--tc-ink-2); margin-top: 6px; }
.tc-style-contact .cform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tc-style-contact .field { display: flex; flex-direction: column; gap: 7px; }
.tc-style-contact .field--full { grid-column: 1 / -1; }
.tc-style-contact .field label { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; color: var(--tc-ink); }
.tc-style-contact .field label .req { color: var(--tc-red); margin-left: 2px; }
.tc-style-contact .field input, .tc-style-contact .field textarea {
font-family: var(--font-body); font-size: 15px; color: var(--tc-ink);
background: #fff; border: 1px solid var(--tc-rule); border-radius: 7px;
padding: 13px 14px; width: 100%; transition: border-color 0.16s, box-shadow 0.16s;
}
.tc-style-contact .field input::placeholder, .tc-style-contact .field textarea::placeholder { color: #9aa7b6; }
.tc-style-contact .field input:focus, .tc-style-contact .field textarea:focus { outline: none; border-color: var(--tc-red); box-shadow: 0 0 0 3px rgba(181,64,46,0.14); }
.tc-style-contact .field textarea { resize: vertical; min-height: 130px; }
.tc-style-contact .field__hint { font-size: 12px; color: var(--tc-ink-2); }
.tc-style-contact .cform__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
/* faux reCAPTCHA */
.tc-style-contact .recaptcha {
display: inline-flex; align-items: center; gap: 12px;
background: #f9f9f9; border: 1px solid #d3d3d3; border-radius: 4px; padding: 12px 14px;
box-shadow: 0 1px 2px rgba(0,0,0,0.06); user-select: none;
}
.tc-style-contact .recaptcha__box { width: 26px; height: 26px; border: 2px solid #c1c1c1; border-radius: 3px; background: #fff; cursor: pointer; position: relative; transition: border-color 0.15s; }
.tc-style-contact .recaptcha__box.checked { border-color: var(--tc-red); }
.tc-style-contact .recaptcha__box.checked::after { content: ""; position: absolute; left: 7px; top: 2px; width: 7px; height: 13px; border: solid var(--tc-red); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.tc-style-contact .recaptcha__txt { font-family: var(--font-body); font-size: 14px; color: #3c4043; }
.tc-style-contact .recaptcha__brand { display: flex; flex-direction: column; align-items: center; margin-left: 6px; }
.tc-style-contact .recaptcha__logo { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(from 0deg, #4285F4 0deg 90deg, #34A853 90deg 180deg, #FBBC05 180deg 270deg, #EA4335 270deg 360deg); }
.tc-style-contact .recaptcha__brand small { font-size: 8px; color: #9aa0a6; margin-top: 2px; letter-spacing: 0.02em; }
.tc-style-contact .cform__note { font-size: 12.5px; color: var(--tc-ink-2); margin-top: 16px; }
.tc-style-contact .cform__note .req { color: var(--tc-red); }
/* success state */
.tc-style-contact .cform__success { display: none; text-align: center; padding: 40px 20px; }
.tc-style-contact .cform.is-sent .cform__head, .tc-style-contact .cform.is-sent form { display: none; }
.tc-style-contact .cform.is-sent .cform__success { display: block; }
.tc-style-contact .cform__success-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--tc-red); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.tc-style-contact .cform__success-ico svg { width: 30px; height: 30px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tc-style-contact .cform__success h2 { font-family: var(--font-display); font-weight: 900; font-size: 30px; color: var(--tc-ink); margin-bottom: 10px; }
.tc-style-contact .cform__success p { font-size: 15.5px; color: var(--tc-ink-2); line-height: 1.6; max-width: 420px; margin: 0 auto; }
/* ─────────────────────────────────────────── MAP ───── */
.tc-style-contact .map-wrap { position: relative; border-radius: 0; overflow: hidden; height: 460px; background: var(--tc-navy-1000); }
.tc-style-contact .map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.2) contrast(1.02); }
.tc-style-contact .map-card {
position: absolute; top: 32px; left: 32px; z-index: 2; max-width: 320px;
background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(8,20,38,0.3); padding: 24px 26px; border-top: 4px solid var(--tc-red);
}
.tc-style-contact .map-card h3 { font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--tc-ink); margin-bottom: 8px; }
.tc-style-contact .map-card p { font-size: 14px; line-height: 1.5; color: var(--tc-ink-2); margin-bottom: 14px; }
.tc-style-contact .map-card a { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tc-red); display: inline-flex; align-items: center; gap: 7px; }
.tc-style-contact .map-card a::after { content: "→"; transition: transform 0.2s; }
.tc-style-contact .map-card a:hover::after { transform: translateX(4px); }
/* ─────────────────────────────────────────── RESPONSIVE ───── */
@media (max-width: 1100px) {
.tc-style-contact .chero__title { font-size: 56px; }
.tc-style-contact .contact-grid { grid-template-columns: 1fr; gap: 24px; }
.tc-style-contact .cform { padding: 36px 30px 32px; }
.tc-style-contact .lets-talk { padding: 36px 30px; }
}
@media (max-width: 640px) {
.tc-style-contact .chero { min-height: 340px; }
.tc-style-contact .chero__title { font-size: 42px; }
.tc-style-contact .chero__inner { padding: 0 24px 40px; }
.tc-style-contact .cform__grid { grid-template-columns: 1fr; }
.tc-style-contact .cform__foot { flex-direction: column; align-items: stretch; }
.tc-style-contact .cform__foot .btn { width: 100%; }
.tc-style-contact .map-card { position: static; max-width: none; margin: 0; border-radius: 0; }
.tc-style-contact .map-wrap { height: auto; }
.tc-style-contact .map-wrap iframe { height: 360px; }
}
/* ============================== 3. PAGE: custom-crates (custom-crates.css) ============================== */
/* =====================================================================
* Custom Crates — page overlay on site.css
* Reuses the TECHCOM kit (header, subnav, hero+card, why-grid, two-col,
* collage, check-list, section--navy, clients-row, cta-band, footer)
* and adds: crate-type cards, red process strip, shipping-doc pair,
* 2-up duo collage, and a click-to-zoom lightbox.
* ===================================================================== */
/* Smooth anchor scroll clearing the sticky header + sub-nav */
.tc-style-custom-crates #types, .tc-style-custom-crates #cta, .tc-style-custom-crates #gallery { scroll-margin-top: 168px; }
@media (max-width: 1100px) {
}
/* ─────────────────────────────────────────── HERO (product-card style) ───── */
/* The crate is an isolated product shot, so it sits on a clean white plate
inside the hero card rather than full-bleed like the photo-hero pages. */
.tc-style-custom-crates .hero--crates .hero__card-photo {
aspect-ratio: 4 / 4.4;
background-size: contain;
background-color: #fff;
border-radius: 4px;
cursor: zoom-in;
}
/* ─────────────────────────────────────────── COLLAGE / DUO image tiles ───── */
.tc-style-custom-crates .collage__main, .tc-style-custom-crates .collage__alt-a, .tc-style-custom-crates .collage__alt-b {
background-size: cover;
background-position: center;
cursor: zoom-in;
}
.tc-style-custom-crates .section--navy .collage__main, .tc-style-custom-crates .section--navy .collage__alt-a, .tc-style-custom-crates .section--navy .collage__alt-b { border: 1px solid var(--tc-navy-600); }
/* two-image side-by-side (Lift Points: crate + interior) */
.tc-style-custom-crates .duo {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
height: 460px;
}
.tc-style-custom-crates .duo > div {
background-size: cover; background-position: center;
border-radius: 4px; cursor: zoom-in;
}
.tc-style-custom-crates .section--navy .duo > div { border: 1px solid var(--tc-navy-600); }
/* ─────────────────────────────────────────── CRATE-TYPE CARDS ───── */
.tc-style-custom-crates .crate-types {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.tc-style-custom-crates .crate-type {
background: var(--tc-paper-white);
border: 1px solid var(--tc-rule);
border-radius: 8px;
overflow: hidden;
display: flex; flex-direction: column;
}
.tc-style-custom-crates .crate-type__photo {
aspect-ratio: 16 / 11;
background-size: cover; background-position: center;
background-color: var(--tc-navy-1000);
border-bottom: 3px solid var(--tc-red);
cursor: zoom-in;
}
.tc-style-custom-crates .crate-type__body { padding: 28px 30px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tc-style-custom-crates .crate-type__kicker {
font-family: var(--font-sans);
font-weight: 700; font-size: 11px;
letter-spacing: 0.20em; text-transform: uppercase;
color: var(--tc-red);
}
.tc-style-custom-crates .crate-type h3 {
font-family: var(--font-display);
font-weight: 900; font-size: 26px; line-height: 1.08;
letter-spacing: -0.01em; color: var(--tc-ink);
}
.tc-style-custom-crates .crate-type p { font-size: 16px; line-height: 1.6; color: var(--tc-ink-2); }
.tc-style-custom-crates .crate-type__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tc-style-custom-crates .crate-type__tags span {
font-family: var(--font-sans);
font-weight: 700; font-size: 11px;
letter-spacing: 0.10em; text-transform: uppercase;
color: var(--tc-ink-2);
background: var(--tc-paper-soft);
border: 1px solid var(--tc-rule);
border-radius: 3px;
padding: 6px 11px;
}
/* ─────────────────────────────────────────── PROCESS STRIP (red band) ───── */
.tc-style-custom-crates .process-strip { background: var(--tc-red); }
.tc-style-custom-crates .process-strip__inner {
max-width: 1380px; margin: 0 auto;
display: grid; grid-template-columns: repeat(4, 1fr);
}
.tc-style-custom-crates .process-step {
padding: 48px 32px;
border-right: 1px solid rgba(255,255,255,0.18);
}
.tc-style-custom-crates .process-step:last-child { border-right: 0; }
.tc-style-custom-crates .process-step__num {
font-family: var(--font-display);
font-weight: 900; font-size: 56px; line-height: 1;
color: rgba(255,255,255,0.32);
margin-bottom: 14px;
}
.tc-style-custom-crates .process-step__title {
font-family: var(--font-sans);
font-weight: 700; font-size: 13px;
letter-spacing: 0.18em; text-transform: uppercase;
color: #fff; margin-bottom: 10px;
}
.tc-style-custom-crates .process-step__desc { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.85); }
/* ─────────────────────────────────────────── SHIPPING-DOC PAIR ───── */
.tc-style-custom-crates .doc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tc-style-custom-crates .doc-pair img {
width: 100%; height: 100%; object-fit: contain;
background: #fff; border-radius: 6px; padding: 10px;
box-shadow: 0 12px 30px rgba(0,0,0,0.28);
cursor: zoom-in;
}
/* ─────────────────────────────────────────── LIGHTBOX ───── */
.tc-style-custom-crates .lightbox {
position: fixed; inset: 0; z-index: 200;
background: rgba(6,14,28,0.92);
display: none; align-items: center; justify-content: center;
padding: 48px;
opacity: 0; transition: opacity 0.2s;
}
.tc-style-custom-crates .lightbox.is-open { display: flex; opacity: 1; }
.tc-style-custom-crates .lightbox img {
max-width: 92vw; max-height: 88vh;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 30px 80px rgba(0,0,0,0.6);
background: #fff;
}
.tc-style-custom-crates .lightbox__cap {
position: absolute; bottom: 26px; left: 0; right: 0;
text-align: center; color: #fff;
font-family: var(--font-sans);
font-weight: 600; font-size: 13px; letter-spacing: 0.06em;
}
.tc-style-custom-crates .lightbox__close {
position: absolute; top: 24px; right: 30px;
width: 44px; height: 44px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 50%;
color: #fff; font-size: 26px; line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.tc-style-custom-crates .lightbox__close:hover { background: rgba(255,255,255,0.2); }
/* ─────────────────────────────────────────── RESPONSIVE ───── */
@media (max-width: 1100px) {
.tc-style-custom-crates .crate-types { grid-template-columns: 1fr; }
.tc-style-custom-crates .process-strip__inner { grid-template-columns: repeat(2, 1fr); }
.tc-style-custom-crates .process-step:nth-child(2) { border-right: 0; }
.tc-style-custom-crates .doc-pair { grid-template-columns: 1fr; }
.tc-style-custom-crates .duo { height: auto; grid-template-rows: 1fr 1fr; }
.tc-style-custom-crates .duo > div { aspect-ratio: 16/10; }
}
@media (max-width: 640px) {
.tc-style-custom-crates .process-strip__inner { grid-template-columns: 1fr; }
.tc-style-custom-crates .process-step { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
.tc-style-custom-crates .process-step:last-child { border-bottom: 0; }
.tc-style-custom-crates .crate-types { grid-template-columns: 1fr; }
}
/* ============================== 3. PAGE: cutaway (cutaway.css) ============================== */
/* =====================================================================
* Cutaway Displays — page-specific overlay on top of site.css
* Hero is a full-bleed muted looping video (Jacobs engine-brake).
* ===================================================================== */
/* ─────────────────────────────────────────────── STICKY RED SUB-NAV ───── */
@media (max-width: 1100px) {
/* on narrow screens the header collapses to a single column; recompute */
}
/* ─────────────────────────────────────────────── HERO (cutaway override) ───── */
.tc-style-cutaway .hero--cut {
padding: 0;
min-height: 720px;
overflow: hidden;
position: relative;
}
.tc-style-cutaway .hero--cut .hero__video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
filter: contrast(1.05) saturate(1.05);
}
.tc-style-cutaway .hero--cut .hero__photo {
position: absolute; inset: 0;
width: 100%; height: 100%;
background-size: cover;
background-position: center;
z-index: 0;
display: none;
}
.tc-style-cutaway .hero--cut.is-photo .hero__video { display: none; }
.tc-style-cutaway .hero--cut.is-photo .hero__photo { display: block; }
.tc-style-cutaway .hero--cut .hero__scrim {
position: absolute; inset: 0;
background:
linear-gradient(115deg, rgba(10,26,48,0.92) 0%, rgba(10,26,48,0.72) 38%, rgba(10,26,48,0.20) 62%, rgba(10,26,48,0.55) 100%),
radial-gradient(80% 60% at 70% 90%, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%);
z-index: 1;
}
.tc-style-cutaway .hero--cut .hero__inner {
position: relative; z-index: 2;
grid-template-columns: 1fr;
padding: 120px 56px 80px 56px;
min-height: 600px;
align-items: flex-end;
gap: 32px;
}
.tc-style-cutaway .hero--cut .hero__text { max-width: 880px; }
.tc-style-cutaway .hero--cut .hero__title {
margin-top: 18px;
font-size: 120px;
line-height: 0.92;
letter-spacing: -0.025em;
}
.tc-style-cutaway .hero--cut .hero__title[data-variant="stop"] { font-size: 156px; line-height: 0.9; }
.tc-style-cutaway .hero--cut .hero__title[data-variant="spectacle"] { font-size: 104px; line-height: 0.98; }
.tc-style-cutaway .hero--cut .hero__title[data-variant="reveal"] { font-size: 120px; }
.tc-style-cutaway .hero--cut .hero__title[data-variant="cadence"] { font-size: 120px; }
.tc-style-cutaway .hero--cut .hero__title .accent {
color: var(--tc-red);
}
.tc-style-cutaway .hero--cut .hero__title .dot {
color: var(--tc-red);
margin-left: -0.04em;
}
.tc-style-cutaway .hero--cut .hero__lede {
margin-top: 24px;
font-size: 19px;
color: rgba(255,255,255,0.86);
max-width: 620px;
}
.tc-style-cutaway .hero--cut .hero__ctas {
display: flex; gap: 14px; margin-top: 32px;
flex-wrap: wrap;
}
/* Tiny "now playing" caption bottom-right of hero */
.tc-style-cutaway .hero__nowplaying {
position: absolute;
right: 56px; bottom: 130px;
z-index: 2;
display: flex; align-items: center; gap: 12px;
background: rgba(10,26,48,0.55);
border: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(6px);
padding: 10px 14px;
border-radius: 2px;
color: #fff;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.tc-style-cutaway .hero__nowplaying .dotpulse {
width: 8px; height: 8px; border-radius: 50%;
background: var(--tc-red);
box-shadow: 0 0 0 0 rgba(181,64,46,0.7);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(181,64,46,0.6); }
70% { box-shadow: 0 0 0 12px rgba(181,64,46,0); }
100% { box-shadow: 0 0 0 0 rgba(181,64,46,0); }
}
.tc-style-cutaway .hero__nowplaying b { color: var(--tc-red-soft); font-weight: 700; }
.tc-style-cutaway .hero--cut.is-photo .hero__nowplaying { display: none; }
/* Hero stats — narrower than crates page so it doesn't dominate */
.tc-style-cutaway .hero--cut + .hero__stats { margin-top: 0; }
.tc-style-cutaway .hero__stats--4 .hero__stats-inner {
grid-template-columns: repeat(4, 1fr);
}
.tc-style-cutaway .hero__stats--3 .hero__stats-inner {
grid-template-columns: 0.85fr 0.85fr 1.5fr;
}
/* keep all three columns vertically aligned despite differing number sizes */
.tc-style-cutaway .hero__stats--3 .hero__stats-inner > div {
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.tc-style-cutaway .hero__stats--3 .stat-n { display: flex; align-items: center; min-height: 56px; }
/* ─────────────────────────────────────────────── MOTORIZED vs STATIC ───── */
.tc-style-cutaway .compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid var(--tc-rule);
border-radius: 6px;
overflow: hidden;
background: var(--tc-paper-white);
}
.tc-style-cutaway .compare__col {
display: flex; flex-direction: column;
border-right: 1px solid var(--tc-rule);
}
.tc-style-cutaway .compare__col:last-child { border-right: 0; }
.tc-style-cutaway .compare__media {
position: relative;
aspect-ratio: 16/10;
background-size: cover; background-position: center;
background-color: #0c1726;
overflow: hidden;
}
.tc-style-cutaway .compare__media video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.tc-style-cutaway .compare__badge {
position: absolute;
top: 18px; left: 18px;
background: var(--tc-red); color: #fff;
font-family: var(--font-sans);
font-weight: 700; font-size: 11px;
letter-spacing: 0.22em; text-transform: uppercase;
padding: 7px 12px; border-radius: 2px;
display: inline-flex; align-items: center; gap: 8px;
}
.tc-style-cutaway .compare__badge .liveDot {
width: 6px; height: 6px; border-radius: 50%;
background: #fff; opacity: 0.95;
animation: pulse 1.5s infinite;
}
.tc-style-cutaway .compare__badge--neutral {
background: var(--tc-navy-900);
color: #fff;
}
.tc-style-cutaway .compare__body { padding: 36px 36px 40px; }
.tc-style-cutaway .compare__body h3 {
font-family: var(--font-display);
font-weight: 900;
font-size: 32px;
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--tc-ink);
margin-bottom: 14px;
}
.tc-style-cutaway .compare__body p {
font-size: 16px;
line-height: 1.6;
color: var(--tc-ink-2);
margin-bottom: 22px;
}
.tc-style-cutaway .compare__list {
display: flex; flex-direction: column; gap: 10px;
}
.tc-style-cutaway .compare__list li {
position: relative;
padding-left: 22px;
font-size: 15px;
color: var(--tc-ink);
line-height: 1.5;
}
.tc-style-cutaway .compare__list li::before {
content: "";
position: absolute; left: 0; top: 8px;
width: 8px; height: 8px;
background: var(--tc-red);
}
/* ─────────────────────────────────────────────── FILTER GALLERY ───── */
.tc-style-cutaway .gallery-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 48px; margin-bottom: 40px;
}
.tc-style-cutaway .gallery-head .section-head { margin-bottom: 0; }
.tc-style-cutaway .filters {
display: flex; flex-wrap: wrap; gap: 8px;
justify-content: flex-end;
align-items: center;
}
.tc-style-cutaway .filters__label {
font-family: var(--font-sans);
font-weight: 700; font-size: 11px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--tc-ink-2);
margin-right: 8px;
}
.tc-style-cutaway .filter-chip {
font-family: var(--font-sans);
font-weight: 700; font-size: 12px;
letter-spacing: 0.16em; text-transform: uppercase;
padding: 10px 16px;
background: var(--tc-paper-white);
color: var(--tc-ink-2);
border: 1px solid var(--tc-rule);
border-radius: 2px;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
user-select: none;
}
.tc-style-cutaway .filter-chip:hover { color: var(--tc-ink); border-color: var(--tc-ink-2); }
.tc-style-cutaway .filter-chip.is-active {
background: var(--tc-red);
color: #fff;
border-color: var(--tc-red);
}
.tc-style-cutaway .filter-chip .count {
opacity: 0.55;
font-weight: 600;
margin-left: 6px;
}
.tc-style-cutaway .filter-chip.is-active .count { opacity: 0.8; color: #fff; }
.tc-style-cutaway .gallery {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
grid-auto-flow: dense;
}
.tc-style-cutaway .g-card {
position: relative;
background: var(--tc-paper-white);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0,0,0,0.06);
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 0.3s, box-shadow 0.2s;
cursor: default;
}
.tc-style-cutaway .g-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.tc-style-cutaway .g-card[hidden] {
display: none;
}
.tc-style-cutaway .g-card__photo {
aspect-ratio: 4/3;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: var(--tc-paper-soft);
border-bottom: 1px solid var(--tc-rule);
}
/* full-bleed photos for the tradeshow-style images */
.tc-style-cutaway .g-card.is-scene .g-card__photo {
background-size: cover;
background-color: var(--tc-navy-900);
border-bottom: 0;
}
.tc-style-cutaway .g-card__body {
padding: 20px 22px 22px;
display: flex; flex-direction: column; gap: 8px;
}
.tc-style-cutaway .g-card__client {
font-family: var(--font-sans);
font-weight: 700; font-size: 11px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--tc-red);
}
.tc-style-cutaway .g-card h4 {
font-family: var(--font-display);
font-weight: 900;
font-size: 19px;
line-height: 1.15;
letter-spacing: -0.005em;
color: var(--tc-ink);
}
.tc-style-cutaway .g-card__tags {
margin-top: 4px;
display: flex; flex-wrap: wrap; gap: 6px;
}
.tc-style-cutaway .g-card__tag {
font-family: var(--font-sans);
font-weight: 700; font-size: 10px;
letter-spacing: 0.16em; text-transform: uppercase;
padding: 4px 8px;
background: var(--tc-paper);
color: var(--tc-ink-2);
border: 1px solid var(--tc-rule);
border-radius: 2px;
}
.tc-style-cutaway .g-card__tag.is-motorized {
background: var(--tc-red);
color: #fff;
border-color: var(--tc-red);
}
/* span variations across the 12-col grid */
.tc-style-cutaway .g-card { grid-column: span 4; }
.tc-style-cutaway .g-card.is-wide { grid-column: span 6; }
.tc-style-cutaway .g-card.is-tall { grid-column: span 4; grid-row: span 1; }
.tc-style-cutaway .g-card.is-feature { grid-column: span 8; }
.tc-style-cutaway .gallery__empty {
grid-column: 1 / -1;
text-align: center;
padding: 80px 20px;
color: var(--tc-ink-2);
font-size: 16px;
display: none;
}
.tc-style-cutaway .gallery.is-empty .gallery__empty { display: block; }
/* ─────────────────────────────────────────────── IMPACT (dark testimonial-like) ───── */
.tc-style-cutaway .impact {
background: var(--tc-navy-900);
color: #fff;
padding: 120px 0;
position: relative;
overflow: hidden;
}
.tc-style-cutaway .impact__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.tc-style-cutaway .impact__quote {
font-family: var(--font-display);
font-weight: 900;
font-size: 56px;
line-height: 1.04;
letter-spacing: -0.012em;
color: #fff;
text-wrap: balance;
}
.tc-style-cutaway .impact__quote .accent { color: var(--tc-red-soft); }
.tc-style-cutaway .impact__sub {
margin-top: 28px;
font-size: 17px;
line-height: 1.65;
color: var(--tc-steel-300);
max-width: 520px;
}
.tc-style-cutaway .impact__media {
display: grid;
grid-template-columns: 1.4fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 12px;
height: 520px;
}
.tc-style-cutaway .impact__media > div {
background-size: cover;
background-position: center;
border-radius: 4px;
border: 1px solid var(--tc-navy-600);
}
.tc-style-cutaway .impact__media .a { grid-row: span 2; }
.tc-style-cutaway .impact__stats {
margin-top: 36px;
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 48px;
}
.tc-style-cutaway .impact__stats .s-n {
text-align: center;
font-family: var(--font-display);
font-weight: 900;
font-size: 48px;
color: var(--tc-red-soft);
line-height: 1;
letter-spacing: -0.01em;
}
.tc-style-cutaway .impact__stats .s-l {
text-align: center;
margin-top: 6px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 12px;
color: var(--tc-steel-300);
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* ─────────────────────────────────────────────── PROCESS (cutaway labels) ───── */
/* Reuses .process from site.css — no extra rules needed */
/* ─────────────────────────────────────────────── WHY 3-UP (cutaway eyebrow over number) ───── */
.tc-style-cutaway .why-card .why-card__tag {
display: inline-block;
font-family: var(--font-sans);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--tc-red);
margin-bottom: 12px;
}
/* Footer cert badges use the shared site.css styling (logos on navy, no card). */
.tc-style-cutaway .tweaks {
position: fixed;
right: 24px; bottom: 24px;
z-index: 200;
width: 280px;
background: #fff;
border: 1px solid var(--tc-rule);
border-top: 3px solid var(--tc-red);
border-radius: 4px;
box-shadow: 0 16px 48px rgba(0,0,0,0.25);
font-family: var(--font-body);
display: none;
}
.tc-style-cutaway .tweaks.is-open { display: block; }
.tc-style-cutaway .tweaks__hd {
padding: 14px 18px;
border-bottom: 1px solid var(--tc-rule);
display: flex; justify-content: space-between; align-items: center;
}
.tc-style-cutaway .tweaks__hd h4 {
font-family: var(--font-display);
font-weight: 900;
font-size: 16px;
letter-spacing: 0.02em;
}
.tc-style-cutaway .tweaks__hd button {
background: transparent; border: 0; cursor: pointer;
font-size: 18px; color: var(--tc-ink-2);
width: 24px; height: 24px;
}
.tc-style-cutaway .tweaks__body { padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.tc-style-cutaway .tweak-row {
display: flex; flex-direction: column; gap: 8px;
}
.tc-style-cutaway .tweak-row label {
font-family: var(--font-sans);
font-weight: 700; font-size: 10px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--tc-ink-2);
}
.tc-style-cutaway .tweak-seg {
display: flex;
border: 1px solid var(--tc-rule);
border-radius: 2px;
overflow: hidden;
}
.tc-style-cutaway .tweak-seg button {
flex: 1;
border: 0;
background: #fff;
padding: 9px 8px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--tc-ink-2);
cursor: pointer;
border-right: 1px solid var(--tc-rule);
}
.tc-style-cutaway .tweak-seg button:last-child { border-right: 0; }
.tc-style-cutaway .tweak-seg button.is-active {
background: var(--tc-red);
color: #fff;
}
.tc-style-cutaway .tweak-swatches { display: flex; gap: 8px; }
.tc-style-cutaway .tweak-swatches button {
width: 32px; height: 32px;
border: 2px solid var(--tc-rule);
border-radius: 2px;
cursor: pointer;
}
.tc-style-cutaway .tweak-swatches button.is-active {
border-color: var(--tc-ink);
box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}
/* vertical multi-row tweak list (used for headline picker) */
.tc-style-cutaway .tweak-list {
display: flex; flex-direction: column;
border: 1px solid var(--tc-rule);
border-radius: 2px;
overflow: hidden;
}
.tc-style-cutaway .tweak-list button {
text-align: left;
background: #fff;
border: 0;
border-bottom: 1px solid var(--tc-rule);
padding: 10px 12px;
cursor: pointer;
font-family: var(--font-body);
display: flex; flex-direction: column;
gap: 2px;
transition: background 0.12s;
}
.tc-style-cutaway .tweak-list button:last-child { border-bottom: 0; }
.tc-style-cutaway .tweak-list button:hover { background: var(--tc-paper); }
.tc-style-cutaway .tweak-list .tw-h {
font-family: var(--font-display);
font-weight: 900;
font-size: 13px;
color: var(--tc-ink);
letter-spacing: -0.005em;
}
.tc-style-cutaway .tweak-list .tw-s {
font-family: var(--font-sans);
font-size: 10px;
color: var(--tc-ink-2);
letter-spacing: 0.04em;
}
.tc-style-cutaway .tweak-list button.is-active {
background: var(--tc-navy-900);
}
.tc-style-cutaway .tweak-list button.is-active .tw-h { color: #fff; }
.tc-style-cutaway .tweak-list button.is-active .tw-s { color: var(--tc-steel-300); }
/* density: compact reduces section padding */
/* accent overrides driven by data-accent on body */
/* ─────────────────────────────────────────────── RESPONSIVE ───── */
@media (max-width: 1100px) {
.tc-style-cutaway .hero--cut .hero__title { font-size: 64px; }
.tc-style-cutaway .hero--cut .hero__title[data-variant="stop"] { font-size: 80px; }
.tc-style-cutaway .hero--cut .hero__title[data-variant="spectacle"] { font-size: 56px; }
.tc-style-cutaway .hero__nowplaying { right: 32px; bottom: 24px; }
.tc-style-cutaway .compare { grid-template-columns: 1fr; }
.tc-style-cutaway .compare__col { border-right: 0; border-bottom: 1px solid var(--tc-rule); }
.tc-style-cutaway .gallery { grid-template-columns: repeat(2, 1fr); }
.tc-style-cutaway .g-card, .tc-style-cutaway .g-card.is-wide, .tc-style-cutaway .g-card.is-feature, .tc-style-cutaway .g-card.is-tall { grid-column: span 1; }
.tc-style-cutaway .gallery-head { flex-direction: column; align-items: flex-start; }
.tc-style-cutaway .filters { justify-content: flex-start; }
.tc-style-cutaway .impact__inner { grid-template-columns: 1fr; gap: 48px; }
.tc-style-cutaway .impact__quote { font-size: 36px; }
.tc-style-cutaway .impact__media { height: 360px; }
.tc-style-cutaway .tweaks { right: 12px; bottom: 12px; width: 240px; }
}
@media (max-width: 640px) {
.tc-style-cutaway .gallery { grid-template-columns: 1fr; }
}
/* ============================== 3. PAGE: government (government.css) ============================== */
/* CTA band uses the global stacked-CTA styling from site.css. */
/* =====================================================================
* Government & Military — page overlay on site.css
* The capstone capability page: positions TECHCOM as a trusted DoD partner
* ("Concept to Crate"). Consolidates the defense cluster (3D printing for
* defense, AR/VR training, IETMs, military cutaways, multimedia) and adds
* a formal CAPABILITY STATEMENT data panel (CAGE/UEI/NAICS/PSC) + past
* performance. Self-contained: replicates video-hero / filter-gallery /
* FAQ / lightbox patterns.
* ===================================================================== */
.tc-style-government #capabilities, .tc-style-government #work, .tc-style-government #statement, .tc-style-government #performance, .tc-style-government #faq, .tc-style-government #cta { scroll-margin-top: 168px; }
@media (max-width: 1100px) {
}
/* ─────────────────────────────────────────── VIDEO HERO ───── */
.tc-style-government .hero--video { padding: 0; min-height: 680px; overflow: hidden; position: relative; }
.tc-style-government .hero--video .hero__video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; z-index: 0;
filter: contrast(1.05) saturate(1.04);
}
.tc-style-government .hero--video .hero__scrim {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(108deg, rgba(8,20,38,0.96) 0%, rgba(8,20,38,0.82) 36%, rgba(8,20,38,0.34) 64%, rgba(8,20,38,0.66) 100%),
radial-gradient(80% 60% at 70% 92%, rgba(0,0,0,0.6), rgba(0,0,0,0) 70%);
}
.tc-style-government .hero--video .hero__inner {
position: relative; z-index: 2; grid-template-columns: 1fr;
padding: 124px 56px 80px 56px; min-height: 620px; align-items: flex-end; gap: 26px;
}
.tc-style-government .hero--video .hero__text { max-width: 960px; }
.tc-style-government .hero--video .hero__title { margin-top: 18px; font-size: 100px; line-height: 0.9; letter-spacing: -0.025em; }
.tc-style-government .hero--video .hero__title .accent { color: var(--tc-red); }
.tc-style-government .hero--video .hero__title .dot { color: var(--tc-red); margin-left: -0.04em; }
.tc-style-government .hero--video .hero__lede {
margin-top: 22px; font-size: 19px; line-height: 1.62;
color: rgba(255,255,255,0.88); max-width: 700px;
}
.tc-style-government .hero--video .hero__ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.tc-style-government .hero__stats--4 .hero__stats-inner { grid-template-columns: repeat(4, 1fr); }
.tc-style-government .hero__stats--4 .hero__stats-inner > div {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; position: relative; border-right: 0;
}
.tc-style-government .hero__stats--4 .hero__stats-inner > div:not(:last-child)::after {
content: ""; position: absolute; top: 50%; right: -16px; transform: translateY(-50%);
width: 1px; height: 50px; background: var(--tc-navy-700);
}
/* ─────────────────────────────────────────── CONCEPT-TO-CRATE PILLARS ───── */
.tc-style-government .pillars5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.tc-style-government .p5 {
display: flex; flex-direction: column; gap: 11px;
background: var(--tc-paper-white); border: 1px solid var(--tc-rule);
border-radius: 9px; padding: 26px 22px 24px; text-decoration: none; color: inherit;
border-top: 3px solid var(--tc-red); transition: transform 0.2s, box-shadow 0.2s;
}
.tc-style-government .p5:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,30,60,0.16); }
.tc-style-government .p5__num { font-family: var(--font-display); font-weight: 900; font-size: 13px; letter-spacing: 0.08em; color: var(--tc-red); }
.tc-style-government .p5 h3 { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.1; letter-spacing: -0.01em; color: var(--tc-ink); }
.tc-style-government .p5 p { font-size: 13.5px; line-height: 1.55; color: var(--tc-ink-2); flex: 1; }
.tc-style-government .p5__link { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tc-red); display: inline-flex; align-items: center; gap: 6px; }
.tc-style-government .p5__link::after { content: "→"; transition: transform 0.2s; }
.tc-style-government .p5:hover .p5__link::after { transform: translateX(3px); }
/* ─────────────────────────────────────────── FEATURE (booth/team photo) ───── */
.tc-style-government .gov-feature { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 48px; align-items: center; }
.tc-style-government .gov-feature__media { border-radius: 10px; overflow: hidden; box-shadow: 0 28px 64px rgba(0,0,0,0.36); cursor: zoom-in; border: 1px solid var(--tc-navy-700); }
.tc-style-government .gov-feature__media img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.tc-style-government .gov-feature__badge {
display: inline-block; font-family: var(--font-sans); font-weight: 700;
font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase;
color: #fff; background: var(--tc-red); padding: 6px 13px; border-radius: 3px; margin-bottom: 18px;
}
/* ─────────────────────────────────────────── FILTERABLE MILITARY GALLERY ───── */
.tc-style-government .gal-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.tc-style-government .gal-filter button {
font-family: var(--font-sans); font-weight: 700; font-size: 12px;
letter-spacing: 0.10em; text-transform: uppercase;
color: var(--tc-ink-2); background: var(--tc-paper-white);
border: 1px solid var(--tc-rule); border-radius: 100px;
padding: 10px 20px; cursor: pointer; transition: all 0.18s;
}
.tc-style-government .gal-filter button:hover { border-color: var(--tc-red); color: var(--tc-ink); }
.tc-style-government .gal-filter button.is-active { background: var(--tc-red); border-color: var(--tc-red); color: #fff; }
.tc-style-government .work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tc-style-government .work-tile {
position: relative; overflow: hidden; border-radius: 8px; cursor: zoom-in;
background: #fff; border: 1px solid var(--tc-rule); aspect-ratio: 1/1;
}
.tc-style-government .work-tile img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.tc-style-government .work-tile:hover img { transform: scale(1.05); }
.tc-style-government .work-tile__overlay {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 18px;
background: linear-gradient(to top, rgba(8,18,34,0.9) 2%, rgba(8,18,34,0.12) 46%, rgba(8,18,34,0) 68%);
opacity: 0; transition: opacity 0.25s;
}
.tc-style-government .work-tile:hover .work-tile__overlay { opacity: 1; }
.tc-style-government .work-tile__cat { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tc-red-soft); margin-bottom: 4px; }
.tc-style-government .work-tile__title { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 16px; line-height: 1.12; }
.tc-style-government .work-tile.is-hidden { display: none; }
/* ─────────────────────────────────────────── CAPABILITY STATEMENT PANEL ───── */
.tc-style-government .capstmt { background: var(--tc-navy-1000); }
.tc-style-government .capstmt__inner { max-width: 1380px; margin: 0 auto; padding: 0 40px; }
.tc-style-government .capstmt__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 52px; align-items: start; }
.tc-style-government .capstmt__head h2 { color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 1.02; letter-spacing: -0.01em; margin-bottom: 16px; }
.tc-style-government .capstmt__head p { color: var(--tc-steel-300); font-size: 16px; line-height: 1.62; margin-bottom: 26px; }
.tc-style-government .capstmt__id { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--tc-navy-700); }
.tc-style-government .capstmt__id div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--tc-navy-700); align-items: baseline; }
.tc-style-government .capstmt__id dt { font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tc-red-soft); }
.tc-style-government .capstmt__id dd { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #fff; letter-spacing: 0.01em; }
.tc-style-government .capstmt__id dd small { display: block; font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: var(--tc-steel-300); letter-spacing: 0; margin-top: 2px; }
.tc-style-government .capstmt__codes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tc-style-government .codebox { background: rgba(255,255,255,0.03); border: 1px solid var(--tc-navy-700); border-radius: 8px; padding: 22px 22px 20px; }
.tc-style-government .codebox--wide { grid-column: 1 / -1; }
.tc-style-government .codebox__label { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; margin-bottom: 4px; }
.tc-style-government .codebox__sub { font-size: 12.5px; color: var(--tc-steel-300); margin-bottom: 14px; line-height: 1.4; }
.tc-style-government .code-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-style-government .code-chips span {
font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
font-weight: 600; font-size: 13px; letter-spacing: 0.02em;
color: #fff; background: var(--tc-navy-900); border: 1px solid var(--tc-navy-700);
border-radius: 4px; padding: 7px 11px;
}
.tc-style-government .code-chips--naics span { color: var(--tc-steel-300); }
.tc-style-government .capstmt__cta { margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
/* certifications row */
.tc-style-government .certs-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.tc-style-government .cert-badge {
font-family: var(--font-sans); font-weight: 700; font-size: 11px;
letter-spacing: 0.10em; text-transform: uppercase; color: #fff;
background: var(--tc-red); border-radius: 4px; padding: 9px 14px;
}
.tc-style-government .cert-badge--ghost { background: transparent; border: 1px solid var(--tc-navy-600); color: var(--tc-steel-300); }
/* ─────────────────────────────────────────── FAQ ACCORDION ───── */
.tc-style-government .faq { max-width: 880px; margin: 0 auto; }
.tc-style-government .faq-item { border-bottom: 1px solid var(--tc-rule); }
.tc-style-government .faq-q {
width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
padding: 24px 44px 24px 0; position: relative;
font-family: var(--font-display); font-weight: 700; font-size: 20px;
color: var(--tc-ink); letter-spacing: -0.005em;
}
.tc-style-government .faq-q::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--font-sans); font-weight: 400; font-size: 28px; color: var(--tc-red); transition: transform 0.25s; }
.tc-style-government .faq-item.is-open .faq-q::after { content: "–"; }
.tc-style-government .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.tc-style-government .faq-a__inner { padding: 0 44px 26px 0; font-size: 16px; line-height: 1.68; color: var(--tc-ink-2); }
/* ─────────────────────────────────────────── LIGHTBOX ───── */
.tc-style-government .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6,14,28,0.93); display: none; align-items: center; justify-content: center; padding: 48px; opacity: 0; transition: opacity 0.2s; }
.tc-style-government .lightbox.is-open { display: flex; opacity: 1; }
.tc-style-government .lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); background: #fff; }
.tc-style-government .lightbox__cap { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; }
.tc-style-government .lightbox__close { position: absolute; top: 24px; right: 30px; width: 44px; height: 44px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tc-style-government .lightbox__close:hover { background: rgba(255,255,255,0.2); }
/* ─────────────────────────────────────────── RESPONSIVE ───── */
@media (max-width: 1100px) {
.tc-style-government .hero--video .hero__inner { padding: 104px 30px 56px; min-height: 520px; }
.tc-style-government .hero--video .hero__title { font-size: 64px; }
.tc-style-government .pillars5 { grid-template-columns: repeat(2, 1fr); }
.tc-style-government .gov-feature { grid-template-columns: 1fr; gap: 30px; }
.tc-style-government .gov-feature__media { order: -1; }
.tc-style-government .work-grid { grid-template-columns: repeat(2, 1fr); }
.tc-style-government .capstmt__grid { grid-template-columns: 1fr; gap: 36px; }
.tc-style-government .hero__stats--4 .hero__stats-inner { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.tc-style-government .hero__stats--4 .hero__stats-inner > div:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
.tc-style-government .hero--video .hero__title { font-size: 46px; }
.tc-style-government .pillars5 { grid-template-columns: 1fr; }
.tc-style-government .work-grid { grid-template-columns: 1fr; }
.tc-style-government .capstmt__codes { grid-template-columns: 1fr; }
.tc-style-government .capstmt__id div { grid-template-columns: 100px 1fr; }
}
/* ============================== 3. PAGE: home (home.css) ============================== */
/* =====================================================================
* Home (DRAFT) — hero VAP comparison overlay on site.css
* Three full-height hero treatments stacked for side-by-side judging.
* Self-contained video-hero pattern; remove the option chrome once a
* direction is chosen and keep the winning hero.
* ===================================================================== */
@media (max-width: 1100px) {
}
/* option separator label */
.tc-style-home .opt-label {
background: var(--tc-navy-1000); color: #fff;
padding: 20px 0; border-top: 3px solid var(--tc-red);
}
.tc-style-home .opt-label__inner { max-width: 1380px; margin: 0 auto; padding: 0 40px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.tc-style-home .opt-label__n { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.01em; color: #fff; }
.tc-style-home .opt-label__n b { color: var(--tc-red-soft); }
.tc-style-home .opt-label__note { font-family: var(--font-body); font-size: 14.5px; color: var(--tc-steel-300); }
/* hero shell */
.tc-style-home .vhero { position: relative; min-height: 660px; overflow: hidden; display: flex; align-items: flex-end; }
.tc-style-home .vhero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; filter: contrast(1.04) saturate(1.04); }
.tc-style-home .vhero__scrim { position: absolute; inset: 0; z-index: 1; }
.tc-style-home .vhero__inner { position: relative; z-index: 2; max-width: 1380px; margin: 0 auto; width: 100%; padding: 120px 40px 72px; }
.tc-style-home .vhero__eyebrow { display: inline-block; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; background: var(--tc-red); padding: 8px 15px; border-radius: 4px; }
.tc-style-home .vhero h1 { font-family: var(--font-display); font-weight: 900; line-height: 0.9; letter-spacing: -0.03em; color: #fff; margin-top: 20px; }
.tc-style-home .vhero h1 .accent { color: var(--tc-red); }
.tc-style-home .vhero h1 .dot { color: var(--tc-red); }
.tc-style-home .vhero__sub { font-size: 20px; line-height: 1.55; color: rgba(255,255,255,0.9); max-width: 660px; margin-top: 22px; }
.tc-style-home .vhero__ctas { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
/* scrim flavors */
.tc-style-home .scrim--left { background: linear-gradient(100deg, rgba(8,20,38,0.94) 0%, rgba(8,20,38,0.74) 42%, rgba(8,20,38,0.22) 72%, rgba(8,20,38,0.4) 100%); }
.tc-style-home .scrim--bottom { background: linear-gradient(to top, rgba(8,20,38,0.95) 8%, rgba(8,20,38,0.5) 46%, rgba(8,20,38,0.18) 100%), linear-gradient(100deg, rgba(8,20,38,0.5), rgba(8,20,38,0) 60%); }
/* Option 1 — big condensed display */
.tc-style-home .vhero--1 h1 { font-size: 128px; }
/* Option 2 — editorial, lighter weight feel via size */
.tc-style-home .vhero--2 h1 { font-size: 92px; font-weight: 800; line-height: 0.98; max-width: 14ch; }
/* Option 3 — benefit-forward, centered */
.tc-style-home .vhero--3 { align-items: center; text-align: center; }
.tc-style-home .vhero--3 .vhero__inner { padding-top: 140px; padding-bottom: 120px; }
.tc-style-home .vhero--3 .scrim, .tc-style-home .scrim--center { background: radial-gradient(120% 100% at 50% 50%, rgba(8,20,38,0.55), rgba(8,20,38,0.86) 80%); }
.tc-style-home .vhero--3 h1 { font-size: 104px; margin-left: auto; margin-right: auto; }
.tc-style-home .vhero--3 .vhero__sub { margin-left: auto; margin-right: auto; }
.tc-style-home .vhero--3 .vhero__ctas { justify-content: center; }
/* ─────────────────────────────────────────── CAPABILITY GRID ───── */
.tc-style-home .cap9 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tc-style-home .cap9 a {
display: flex; flex-direction: column; gap: 10px; min-height: 168px;
background: var(--tc-paper-white); border: 1px solid var(--tc-rule);
border-radius: 10px; padding: 28px 26px; text-decoration: none; color: inherit;
border-top: 3px solid var(--tc-red); transition: transform 0.2s, box-shadow 0.2s;
}
.tc-style-home .cap9 a:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(15,30,60,0.16); }
.tc-style-home .cap9 .cap9__n { font-family: var(--font-display); font-weight: 900; font-size: 13px; letter-spacing: 0.06em; color: var(--tc-red); }
.tc-style-home .cap9 h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.1; letter-spacing: -0.01em; color: var(--tc-ink); }
.tc-style-home .cap9 p { font-size: 14.5px; line-height: 1.55; color: var(--tc-ink-2); flex: 1; }
.tc-style-home .cap9 .cap9__go { font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tc-red); display: inline-flex; align-items: center; gap: 7px; }
.tc-style-home .cap9 .cap9__go::after { content: "→"; transition: transform 0.2s; }
.tc-style-home .cap9 a:hover .cap9__go::after { transform: translateX(4px); }
/* Home sections inherit the global fluid section padding from site.css. */
/* ─────────────────────────────────────────── HOME STAT STRIP (3-up) ───── */
.tc-style-home .hstats { background: var(--tc-navy-1000); }
.tc-style-home .hstats__inner { max-width: 1380px; margin: 0 auto; padding: 44px 40px; display: grid; grid-template-columns: repeat(3, 1fr); }
.tc-style-home .hstats__inner > div { text-align: center; position: relative; }
.tc-style-home .hstats__inner > div:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 52px; background: var(--tc-navy-700); }
.tc-style-home .hstat-n { font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 1; color: #fff; letter-spacing: -0.01em; }
.tc-style-home .hstat-l { font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tc-steel-300); margin-top: 9px; }
@media (max-width: 1100px) {
.tc-style-home .vhero__inner { padding: 96px 26px 56px; }
.tc-style-home .vhero--1 h1 { font-size: 76px; }
.tc-style-home .vhero--2 h1 { font-size: 60px; }
.tc-style-home .vhero--3 h1 { font-size: 64px; }
.tc-style-home .cap9 { grid-template-columns: repeat(2, 1fr); }
.tc-style-home .hstats__inner { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
.tc-style-home .hstats__inner > div:nth-child(2)::after { display: none; }
}
@media (max-width: 640px) {
.tc-style-home .vhero--1 h1 { font-size: 52px; }
.tc-style-home .vhero--2 h1 { font-size: 44px; }
.tc-style-home .vhero--3 h1 { font-size: 46px; }
.tc-style-home .vhero__sub { font-size: 17px; }
.tc-style-home .cap9 { grid-template-columns: 1fr; }
.tc-style-home .hstats__inner { grid-template-columns: 1fr; gap: 24px; }
.tc-style-home .hstats__inner > div::after { display: none !important; }
}
/* ============================== 3. PAGE: marketing (marketing.css) ============================== */
/* =====================================================================
* Marketing — page overlay on site.css
* The UMBRELLA capability page: positions TECHCOM as a one-stop technical
* marketing shop that integrates Cutaways, 3D Print, AR/VR & Multimedia.
* Self-contained: replicates video-hero / gallery+modal / FAQ patterns.
*
* Reuses from site.css: header, subnav, buttons, section--*, section-head,
* why-grid/why-card, two-col, check-list, clients-row, cta-band, footer.
* Adds: video hero, integrated-stack cross-link cards, video gallery +
* modal, marketing case-study feature video, FAQ accordion.
* ===================================================================== */
.tc-style-marketing #why, .tc-style-marketing #stack, .tc-style-marketing #work, .tc-style-marketing #launch, .tc-style-marketing #faq, .tc-style-marketing #cta { scroll-margin-top: 168px; }
@media (max-width: 1100px) {
}
/* ─────────────────────────────────────────── VIDEO HERO ───── */
.tc-style-marketing .hero--video { padding: 0; min-height: 680px; overflow: hidden; position: relative; }
.tc-style-marketing .hero--video .hero__video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; z-index: 0;
filter: contrast(1.04) saturate(1.05);
}
.tc-style-marketing .hero--video .hero__scrim {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(108deg, rgba(10,26,48,0.95) 0%, rgba(10,26,48,0.78) 38%, rgba(10,26,48,0.30) 64%, rgba(10,26,48,0.62) 100%),
radial-gradient(80% 60% at 70% 92%, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%);
}
.tc-style-marketing .hero--video .hero__inner {
position: relative; z-index: 2; grid-template-columns: 1fr;
padding: 124px 56px 80px 56px; min-height: 620px; align-items: flex-end; gap: 26px;
}
.tc-style-marketing .hero--video .hero__text { max-width: 960px; }
.tc-style-marketing .hero--video .hero__title { margin-top: 18px; font-size: 104px; line-height: 0.92; letter-spacing: -0.025em; }
.tc-style-marketing .hero--video .hero__title .accent { color: var(--tc-red); }
.tc-style-marketing .hero--video .hero__title .dot { color: var(--tc-red); margin-left: -0.04em; }
.tc-style-marketing .hero--video .hero__lede {
margin-top: 22px; font-size: 19px; line-height: 1.62;
color: rgba(255,255,255,0.88); max-width: 700px;
}
.tc-style-marketing .hero--video .hero__ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.tc-style-marketing .hero__stats--3 .hero__stats-inner { grid-template-columns: repeat(3, 1fr); }
.tc-style-marketing .hero__stats--3 .hero__stats-inner > div {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; position: relative; border-right: 0;
}
.tc-style-marketing .hero__stats--3 .hero__stats-inner > div:not(:last-child)::after {
content: ""; position: absolute; top: 50%; right: -16px; transform: translateY(-50%);
width: 1px; height: 56px; background: var(--tc-navy-700);
}
/* ─────────────────────────────────────────── INTEGRATED STACK (cross-links) ───── */
.tc-style-marketing .stack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tc-style-marketing .stack-card {
display: flex; flex-direction: column; gap: 12px;
background: var(--tc-paper-white); border: 1px solid var(--tc-rule);
border-radius: 10px; padding: 30px 28px; position: relative;
text-decoration: none; color: inherit;
transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.tc-style-marketing .stack-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(15,30,60,0.16); border-color: var(--tc-red); }
.tc-style-marketing .stack-card__num {
font-family: var(--font-display); font-weight: 900; font-size: 15px;
letter-spacing: 0.04em; color: var(--tc-red);
}
.tc-style-marketing .stack-card__kicker {
font-family: var(--font-sans); font-weight: 700; font-size: 10.5px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--tc-ink-2);
}
.tc-style-marketing .stack-card h3 {
font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.08;
letter-spacing: -0.01em; color: var(--tc-ink);
}
.tc-style-marketing .stack-card p { font-size: 14.5px; line-height: 1.58; color: var(--tc-ink-2); flex: 1; }
.tc-style-marketing .stack-card__link {
font-family: var(--font-sans); font-weight: 700; font-size: 12px;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--tc-red);
display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
}
.tc-style-marketing .stack-card__link::after { content: "→"; transition: transform 0.2s; }
.tc-style-marketing .stack-card:hover .stack-card__link::after { transform: translateX(4px); }
/* ─────────────────────────────────────────── VIDEO GALLERY (click-to-play) ───── */
.tc-style-marketing .vgal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tc-style-marketing .vgal-card {
position: relative; overflow: hidden; border-radius: 8px; cursor: pointer;
background: #08111f; border: 1px solid var(--tc-navy-700); aspect-ratio: 16/9;
}
.tc-style-marketing .vgal-card__video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: 0;
filter: brightness(0.78) contrast(1.02);
transition: transform 0.6s cubic-bezier(.2,.7,.2,1), filter 0.3s;
}
.tc-style-marketing .vgal-card:hover .vgal-card__video { transform: scale(1.05); filter: brightness(0.92); }
.tc-style-marketing .vgal-card__grad {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(to top, rgba(6,14,28,0.92) 4%, rgba(6,14,28,0.15) 46%, rgba(6,14,28,0) 70%);
}
.tc-style-marketing .vgal-card__play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 60px; height: 60px; border-radius: 50%; z-index: 2;
background: rgba(193,39,45,0.92); backdrop-filter: blur(2px);
display: flex; align-items: center; justify-content: center;
transition: transform 0.22s, background 0.22s;
}
.tc-style-marketing .vgal-card:hover .vgal-card__play { transform: translate(-50%,-50%) scale(1.1); background: var(--tc-red); }
.tc-style-marketing .vgal-card__play::after {
content: ""; width: 0; height: 0; margin-left: 4px;
border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.tc-style-marketing .vgal-card__meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 20px; pointer-events: none; }
.tc-style-marketing .vgal-card__cat {
font-family: var(--font-sans); font-weight: 700; font-size: 10px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--tc-red-soft); margin-bottom: 5px;
}
.tc-style-marketing .vgal-card__title {
font-family: var(--font-display); font-weight: 800; color: #fff; line-height: 1.12;
font-size: 18px; letter-spacing: -0.005em;
}
/* video modal player */
.tc-style-marketing .vmodal {
position: fixed; inset: 0; z-index: 200; background: rgba(6,14,28,0.94);
display: none; align-items: center; justify-content: center; padding: 48px;
opacity: 0; transition: opacity 0.2s;
}
.tc-style-marketing .vmodal.is-open { display: flex; opacity: 1; }
.tc-style-marketing .vmodal__inner { width: min(1100px, 92vw); }
.tc-style-marketing .vmodal video { width: 100%; max-height: 82vh; border-radius: 8px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,0.6); display: block; }
.tc-style-marketing .vmodal__cap {
margin-top: 14px; color: #fff; text-align: center;
font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.05em;
}
.tc-style-marketing .vmodal__close {
position: absolute; top: 24px; right: 30px; width: 44px; height: 44px;
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
border-radius: 50%; color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.tc-style-marketing .vmodal__close:hover { background: rgba(255,255,255,0.2); }
/* ─────────────────────────────────────────── CASE-STUDY FEATURE VIDEO ───── */
.tc-style-marketing .mk-video {
position: relative; border-radius: 10px; overflow: hidden; background: #000;
border: 1px solid var(--tc-navy-700); box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.tc-style-marketing .mk-video video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.tc-style-marketing .mk-video__tag {
position: absolute; top: 14px; left: 14px; white-space: nowrap;
font-family: var(--font-sans); font-weight: 700; font-size: 11px;
letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
background: rgba(193,39,45,0.92); padding: 6px 12px; border-radius: 3px;
}
/* ─────────────────────────────────────────── FAQ ACCORDION ───── */
.tc-style-marketing .faq { max-width: 880px; margin: 0 auto; }
.tc-style-marketing .faq-item { border-bottom: 1px solid var(--tc-rule); }
.tc-style-marketing .faq-q {
width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
padding: 24px 44px 24px 0; position: relative;
font-family: var(--font-display); font-weight: 700; font-size: 20px;
color: var(--tc-ink); letter-spacing: -0.005em;
}
.tc-style-marketing .faq-q::after {
content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
font-family: var(--font-sans); font-weight: 400; font-size: 28px; color: var(--tc-red);
transition: transform 0.25s;
}
.tc-style-marketing .faq-item.is-open .faq-q::after { content: "–"; }
.tc-style-marketing .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.tc-style-marketing .faq-a__inner { padding: 0 44px 26px 0; font-size: 16px; line-height: 1.68; color: var(--tc-ink-2); }
/* ─────────────────────────────────────────── RESPONSIVE ───── */
@media (max-width: 1100px) {
.tc-style-marketing .hero--video .hero__inner { padding: 104px 30px 56px; min-height: 520px; }
.tc-style-marketing .hero--video .hero__title { font-size: 70px; }
.tc-style-marketing .stack-grid { grid-template-columns: repeat(2, 1fr); }
.tc-style-marketing .vgal { grid-template-columns: repeat(2, 1fr); }
.tc-style-marketing .hero__stats--3 .hero__stats-inner { grid-template-columns: 1fr; gap: 22px; }
.tc-style-marketing .hero__stats--3 .hero__stats-inner > div:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
.tc-style-marketing .hero--video .hero__title { font-size: 52px; }
.tc-style-marketing .stack-grid { grid-template-columns: 1fr; }
.tc-style-marketing .vgal { grid-template-columns: 1fr; }
}
/* ============================== 3. PAGE: multimedia (multimedia.css) ============================== */
/* =====================================================================
* Multimedia — page overlay on site.css
* Consolidates the multimedia cluster (computer visualization, training
* videos, interactive galleries/presentations, full-service production,
* interactive documentation: wiring diagrams / IETP / IPC, industries).
* Self-contained: replicates video-hero / process / markets / FAQ patterns.
*
* Reuses from site.css: header, subnav, buttons, section--*, section-head,
* two-col, clients-row, cta-band, footer, eyebrow, check-list.
* Adds: video hero, numbered service pillars, click-to-play video gallery
* + modal player, three-minute-rule feature, production process strip,
* interactive-docs cards, industries band, FAQ accordion.
* ===================================================================== */
.tc-style-multimedia #services, .tc-style-multimedia #work, .tc-style-multimedia #production, .tc-style-multimedia #marketing, .tc-style-multimedia #industries, .tc-style-multimedia #faq, .tc-style-multimedia #cta { scroll-margin-top: 168px; }
@media (max-width: 1100px) {
}
/* ─────────────────────────────────────────── VIDEO HERO ───── */
.tc-style-multimedia .hero--video { padding: 0; min-height: 660px; overflow: hidden; position: relative; }
.tc-style-multimedia .hero--video .hero__video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; z-index: 0;
filter: contrast(1.04) saturate(1.05);
}
.tc-style-multimedia .hero--video .hero__scrim {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(110deg, rgba(10,26,48,0.95) 0%, rgba(10,26,48,0.78) 38%, rgba(10,26,48,0.30) 64%, rgba(10,26,48,0.62) 100%),
radial-gradient(80% 60% at 70% 92%, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%);
}
.tc-style-multimedia .hero--video .hero__inner {
position: relative; z-index: 2; grid-template-columns: 1fr;
padding: 120px 56px 76px 56px; min-height: 600px; align-items: flex-end; gap: 26px;
}
.tc-style-multimedia .hero--video .hero__text { max-width: 940px; }
.tc-style-multimedia .hero--video .hero__title { margin-top: 18px; font-size: 104px; line-height: 0.92; letter-spacing: -0.025em; }
.tc-style-multimedia .hero--video .hero__title .accent { color: var(--tc-red); }
.tc-style-multimedia .hero--video .hero__title .dot { color: var(--tc-red); margin-left: -0.04em; }
.tc-style-multimedia .hero--video .hero__lede {
margin-top: 22px; font-size: 19px; line-height: 1.62;
color: rgba(255,255,255,0.88); max-width: 680px;
}
.tc-style-multimedia .hero--video .hero__ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.tc-style-multimedia .hero__stats--3 .hero__stats-inner { grid-template-columns: repeat(3, 1fr); }
.tc-style-multimedia .hero__stats--3 .hero__stats-inner > div {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; position: relative; border-right: 0;
}
.tc-style-multimedia .hero__stats--3 .hero__stats-inner > div:not(:last-child)::after {
content: ""; position: absolute; top: 50%; right: -16px; transform: translateY(-50%);
width: 1px; height: 56px; background: var(--tc-navy-700);
}
/* ─────────────────────────────────────────── SERVICE PILLARS (numbered) ───── */
.tc-style-multimedia .pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--tc-rule); border: 1px solid var(--tc-rule); border-radius: 10px; overflow: hidden; }
.tc-style-multimedia .pillar {
background: var(--tc-paper-white); padding: 36px 36px 34px;
display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start;
}
.tc-style-multimedia .pillar__num {
font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 0.9;
color: var(--tc-red); width: 56px;
}
.tc-style-multimedia .pillar__kicker {
font-family: var(--font-sans); font-weight: 700; font-size: 10.5px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--tc-red); margin-bottom: 9px;
}
.tc-style-multimedia .pillar h3 {
font-family: var(--font-display); font-weight: 800; font-size: 23px; line-height: 1.1;
letter-spacing: -0.01em; color: var(--tc-ink); margin-bottom: 10px;
}
.tc-style-multimedia .pillar p { font-size: 15px; line-height: 1.6; color: var(--tc-ink-2); }
/* ─────────────────────────────────────────── VIDEO GALLERY (click-to-play) ───── */
.tc-style-multimedia .vgal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.tc-style-multimedia .vgal-card {
position: relative; overflow: hidden; border-radius: 8px; cursor: pointer;
background: #08111f; border: 1px solid var(--tc-navy-700);
aspect-ratio: 16/9;
}
.tc-style-multimedia .vgal-card--feature { grid-column: span 4; grid-row: span 2; }
.tc-style-multimedia .vgal-card--feature.is-tall { aspect-ratio: 16/10; }
.tc-style-multimedia .vgal-card--small { grid-column: span 2; }
/* Revamped 4-up gallery: uniform 2×2 grid of equal cards (no feature) */
.tc-style-multimedia .vgal--quad { grid-template-columns: repeat(2, 1fr); gap: 22px; }
/* AxTrax 2 full-width feature banner in the last row (contain so labels show) */
.tc-style-multimedia .vgal--quad .vgal-card--wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.tc-style-multimedia .vgal-card--wide .vgal-card__video { object-fit: contain; background: #08111f; }
.tc-style-multimedia .vgal-card__video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: 0;
filter: brightness(0.74) contrast(1.02);
transition: transform 0.6s cubic-bezier(.2,.7,.2,1), filter 0.3s;
}
.tc-style-multimedia .vgal-card:hover .vgal-card__video { transform: scale(1.05); filter: brightness(0.9); }
.tc-style-multimedia .vgal-card__grad {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(to top, rgba(6,14,28,0.92) 4%, rgba(6,14,28,0.15) 46%, rgba(6,14,28,0) 70%);
}
.tc-style-multimedia .vgal-card__play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 64px; height: 64px; border-radius: 50%; z-index: 2;
background: rgba(193,39,45,0.92); backdrop-filter: blur(2px);
display: flex; align-items: center; justify-content: center;
transition: transform 0.22s, background 0.22s;
}
.tc-style-multimedia .vgal-card--small .vgal-card__play { width: 50px; height: 50px; }
.tc-style-multimedia .vgal-card:hover .vgal-card__play { transform: translate(-50%,-50%) scale(1.1); background: var(--tc-red); }
.tc-style-multimedia .vgal-card__play::after {
content: ""; width: 0; height: 0; margin-left: 4px;
border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.tc-style-multimedia .vgal-card--small .vgal-card__play::after { border-left-width: 15px; border-top-width: 9px; border-bottom-width: 9px; }
.tc-style-multimedia .vgal-card__meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 22px; pointer-events: none; }
.tc-style-multimedia .vgal-card__cat {
font-family: var(--font-sans); font-weight: 700; font-size: 10px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--tc-red-soft); margin-bottom: 5px;
}
.tc-style-multimedia .vgal-card__title {
font-family: var(--font-display); font-weight: 800; color: #fff; line-height: 1.12;
font-size: 21px; letter-spacing: -0.005em;
}
.tc-style-multimedia .vgal-card--small .vgal-card__title { font-size: 15.5px; }
/* video modal player */
.tc-style-multimedia .vmodal {
position: fixed; inset: 0; z-index: 200; background: rgba(6,14,28,0.94);
display: none; align-items: center; justify-content: center; padding: 48px;
opacity: 0; transition: opacity 0.2s;
}
.tc-style-multimedia .vmodal.is-open { display: flex; opacity: 1; }
.tc-style-multimedia .vmodal__inner { width: min(1100px, 92vw); }
.tc-style-multimedia .vmodal video { width: 100%; max-height: 82vh; border-radius: 8px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,0.6); display: block; }
.tc-style-multimedia .vmodal__cap {
margin-top: 14px; color: #fff; text-align: center;
font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.05em;
}
.tc-style-multimedia .vmodal__close {
position: absolute; top: 24px; right: 30px; width: 44px; height: 44px;
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
border-radius: 50%; color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.tc-style-multimedia .vmodal__close:hover { background: rgba(255,255,255,0.2); }
/* ─────────────────────────────────────────── THREE-MINUTE RULE (navy feature) ───── */
.tc-style-multimedia .rule { background: var(--tc-navy-1000); }
.tc-style-multimedia .rule__inner {
max-width: 1380px; margin: 0 auto; padding: 0 40px;
display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: center;
}
.tc-style-multimedia .rule__big {
font-family: var(--font-display); font-weight: 900; line-height: 0.86;
font-size: clamp(96px, 13vw, 184px); color: #fff; letter-spacing: -0.03em;
}
.tc-style-multimedia .rule__big small { display: block; font-size: 0.18em; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tc-red-soft); font-weight: 700; margin-top: 14px; }
.tc-style-multimedia .rule__video {
margin-top: 30px; border-radius: 10px; overflow: hidden;
background: #000; border: 1px solid var(--tc-navy-700);
box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.tc-style-multimedia .rule__video video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.tc-style-multimedia .rule__list { display: flex; flex-direction: column; gap: 0; }
.tc-style-multimedia .rule-row { padding: 22px 0; border-bottom: 1px solid var(--tc-navy-700); }
.tc-style-multimedia .rule-row:last-child { border-bottom: 0; }
.tc-style-multimedia .rule-row__t {
font-family: var(--font-sans); font-weight: 700; font-size: 13px;
letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin-bottom: 8px;
}
.tc-style-multimedia .rule-row__d { font-size: 15.5px; line-height: 1.58; color: var(--tc-steel-300); }
/* ─────────────────────────────────────────── PRODUCTION PROCESS (red strip) ───── */
.tc-style-multimedia .prod-strip { background: var(--tc-red); }
.tc-style-multimedia .prod-strip__inner { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.tc-style-multimedia .prod-step { padding: 46px 30px; border-right: 1px solid rgba(255,255,255,0.18); }
.tc-style-multimedia .prod-step:last-child { border-right: 0; }
.tc-style-multimedia .prod-step__num {
font-family: var(--font-display); font-weight: 900; font-size: 15px;
letter-spacing: 0.1em; color: rgba(255,255,255,0.6); margin-bottom: 14px;
}
.tc-style-multimedia .prod-step__t {
font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 1.55vw, 22px); color: #fff; margin-bottom: 9px; letter-spacing: -0.015em; white-space: nowrap;
}
.tc-style-multimedia .prod-step__d { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.86); }
/* ─────────────────────────────────────────── MARKETING FEATURE + VIDEO ───── */
.tc-style-multimedia .mkt-feature { margin-bottom: 72px; }
.tc-style-multimedia .two-col__text strong { color: var(--tc-ink); font-weight: 700; }
.tc-style-multimedia .mkt-video {
position: relative; border-radius: 10px; overflow: hidden; background: #000;
border: 1px solid var(--tc-rule); box-shadow: 0 24px 60px rgba(15,30,60,0.18);
}
.tc-style-multimedia .mkt-video video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.tc-style-multimedia .mkt-video__tag {
position: absolute; top: 14px; left: 14px; white-space: nowrap;
font-family: var(--font-sans); font-weight: 700; font-size: 11px;
letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
background: rgba(193,39,45,0.92); padding: 6px 12px; border-radius: 3px;
}
/* ─────────────────────────────────────────── INTERACTIVE DOCS CARDS ───── */
.tc-style-multimedia .docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tc-style-multimedia .doc-card {
background: var(--tc-paper-white); border: 1px solid var(--tc-rule);
border-radius: 8px; padding: 32px 30px 30px;
display: flex; flex-direction: column; gap: 11px; border-top: 3px solid var(--tc-red);
}
.tc-style-multimedia .doc-card__abbr {
font-family: var(--font-display); font-weight: 900; font-size: 13px;
letter-spacing: 0.16em; color: var(--tc-red);
}
.tc-style-multimedia .doc-card h3 {
font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.1;
letter-spacing: -0.01em; color: var(--tc-ink);
}
.tc-style-multimedia .doc-card p { font-size: 15px; line-height: 1.6; color: var(--tc-ink-2); }
/* ─────────────────────────────────────────── INDUSTRIES BAND ───── */
.tc-style-multimedia .markets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.tc-style-multimedia .market { padding: 6px 0; position: relative; }
.tc-style-multimedia .market:not(:last-child)::after {
content: ""; position: absolute; top: 0; bottom: 0; right: -22px;
width: 1px; background: var(--tc-navy-600);
}
.tc-style-multimedia .market__n {
font-family: var(--font-display); font-weight: 900; font-size: 15px;
letter-spacing: 0.03em; color: #fff; margin-bottom: 12px;
padding-bottom: 12px; border-bottom: 2px solid var(--tc-red); display: inline-block;
}
.tc-style-multimedia .market p { font-size: 14.5px; line-height: 1.6; color: var(--tc-steel-300); }
/* ─────────────────────────────────────────── FAQ ACCORDION ───── */
.tc-style-multimedia .faq { max-width: 880px; margin: 0 auto; }
.tc-style-multimedia .faq-item { border-bottom: 1px solid var(--tc-rule); }
.tc-style-multimedia .faq-q {
width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
padding: 24px 44px 24px 0; position: relative;
font-family: var(--font-display); font-weight: 700; font-size: 20px;
color: var(--tc-ink); letter-spacing: -0.005em;
}
.tc-style-multimedia .faq-q::after {
content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
font-family: var(--font-sans); font-weight: 400; font-size: 28px; color: var(--tc-red);
transition: transform 0.25s;
}
.tc-style-multimedia .faq-item.is-open .faq-q::after { content: "–"; }
.tc-style-multimedia .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.tc-style-multimedia .faq-a__inner { padding: 0 44px 26px 0; font-size: 16px; line-height: 1.68; color: var(--tc-ink-2); }
/* ─────────────────────────────────────────── RESPONSIVE ───── */
@media (max-width: 1100px) {
.tc-style-multimedia .hero--video .hero__inner { padding: 104px 30px 56px; min-height: 520px; }
.tc-style-multimedia .hero--video .hero__title { font-size: 70px; }
.tc-style-multimedia .pillars { grid-template-columns: 1fr; }
.tc-style-multimedia .vgal { grid-template-columns: repeat(2, 1fr); }
.tc-style-multimedia .vgal-card--feature { grid-column: span 2; grid-row: auto; aspect-ratio: 16/9; }
.tc-style-multimedia .vgal-card--small { grid-column: span 1; }
.tc-style-multimedia .rule__inner { grid-template-columns: 1fr; gap: 30px; }
.tc-style-multimedia .prod-strip__inner { grid-template-columns: repeat(2, 1fr); }
.tc-style-multimedia .prod-step:nth-child(2) { border-right: 0; }
.tc-style-multimedia .docs-grid { grid-template-columns: 1fr; }
.tc-style-multimedia .markets { grid-template-columns: 1fr; gap: 28px; }
.tc-style-multimedia .market:not(:last-child)::after { display: none; }
.tc-style-multimedia .hero__stats--3 .hero__stats-inner { grid-template-columns: 1fr; gap: 22px; }
.tc-style-multimedia .hero__stats--3 .hero__stats-inner > div:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
.tc-style-multimedia .hero--video .hero__title { font-size: 52px; }
.tc-style-multimedia .vgal { grid-template-columns: 1fr; }
.tc-style-multimedia .vgal-card--feature, .tc-style-multimedia .vgal-card--small { grid-column: span 1; }
.tc-style-multimedia .prod-strip__inner { grid-template-columns: 1fr; }
.tc-style-multimedia .prod-step { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
.tc-style-multimedia .prod-step:last-child { border-bottom: 0; }
.tc-style-multimedia .pillar { grid-template-columns: 1fr; gap: 8px; }
.tc-style-multimedia .pillar__num { font-size: 32px; }
}
/* ============================== 3. PAGE: ppc (ppc-cutaways.css) ============================== */
/* =====================================================================
* PPC Landing — Custom Cutaways (AdWords). Standalone: no nav, no phone.
* Reuses colors_and_type.css + site.css tokens/buttons/footer bits.
* ===================================================================== */
/* ─────────── HERO: video bg, copy left + form card right ─────────── */
.tc-style-ppc .pphero { position: relative; overflow: hidden; background: var(--tc-navy-1000); }
.tc-style-ppc .pphero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: contrast(1.04) saturate(1.05); }
.tc-style-ppc .pphero__scrim { position: absolute; inset: 0; z-index: 1;
background: linear-gradient(105deg, rgba(10,26,48,0.96) 0%, rgba(10,26,48,0.85) 45%, rgba(10,26,48,0.55) 75%, rgba(10,26,48,0.7) 100%); }
.tc-style-ppc .pphero__inner { position: relative; z-index: 2; max-width: 1380px; margin: 0 auto; padding: 64px 40px 72px;
display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.tc-style-ppc .pphero__brand { display: flex; align-items: center; margin-bottom: 40px; }
.tc-style-ppc .pphero__brand img { height: 96px; width: auto; filter: brightness(0) invert(1); }
.tc-style-ppc .pphero__text h1 { font-family: var(--font-display); font-weight: 900; font-size: 54px; line-height: 1.0; letter-spacing: -0.02em; color: #fff; }
.tc-style-ppc .pphero__text h1 .accent { color: var(--tc-red-soft); }
.tc-style-ppc .pphero__lede { margin-top: 18px; font-size: 18px; line-height: 1.62; color: rgba(255,255,255,0.88); max-width: 560px; }
.tc-style-ppc .pphero__points { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.tc-style-ppc .pphero__points li { list-style: none; position: relative; padding-left: 28px; color: #fff; font-size: 15.5px; font-weight: 600; }
.tc-style-ppc .pphero__points li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--tc-red-soft); font-weight: 900; }
/* form card */
.tc-style-ppc .ppform { background: #FCFBFB; border-radius: 12px; box-shadow: 0 30px 70px rgba(0,0,0,0.4); padding: 34px 32px 30px; border-top: 5px solid var(--tc-red); }
.tc-style-ppc .ppform h2 { font-family: var(--font-display); font-weight: 900; font-size: 24px; color: var(--tc-ink); letter-spacing: -0.01em; }
.tc-style-ppc .ppform__sub { font-size: 13.5px; color: var(--tc-ink-2); margin: 6px 0 20px; }
.tc-style-ppc .ppform .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.tc-style-ppc .ppform input::placeholder { color: #8d9aab; }
.tc-style-ppc .ppform label { font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; letter-spacing: 0.04em; color: var(--tc-ink); }
.tc-style-ppc .ppform label .req { color: var(--tc-red); }
.tc-style-ppc .ppform input, .tc-style-ppc .ppform select {
font-family: var(--font-body); font-size: 15px; color: var(--tc-ink);
background: #fff; border: 1px solid #cbd4e1; border-radius: 7px; padding: 12px 13px; width: 100%;
transition: border-color 0.16s, box-shadow 0.16s; }
.tc-style-ppc .ppform input:focus, .tc-style-ppc .ppform select:focus { outline: none; border-color: var(--tc-red); box-shadow: 0 0 0 3px rgba(181,64,46,0.14); }
.tc-style-ppc .ppform .btn { width: 100%; justify-content: center; margin-top: 6px; }
.tc-style-ppc .ppform__fine { font-size: 11.5px; color: var(--tc-ink-2); margin-top: 12px; line-height: 1.5; }
/* success state */
.tc-style-ppc .ppform__success { display: none; text-align: center; padding: 26px 4px 12px; }
.tc-style-ppc .ppform.is-sent form, .tc-style-ppc .ppform.is-sent .ppform__sub { display: none; }
.tc-style-ppc .ppform.is-sent .ppform__success { display: block; }
.tc-style-ppc .ppform__success-ico { width: 58px; height: 58px; border-radius: 50%; background: var(--tc-red); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.tc-style-ppc .ppform__success-ico svg { width: 26px; height: 26px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tc-style-ppc .ppform__success h3 { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--tc-ink); margin-bottom: 8px; }
.tc-style-ppc .ppform__success p { font-size: 14.5px; line-height: 1.6; color: var(--tc-ink-2); margin-bottom: 18px; }
/* ─────────── STATS STRIP ─────────── */
.tc-style-ppc .ppstats { background: var(--tc-navy-1000); border-top: 1px solid var(--tc-navy-700); }
.tc-style-ppc .ppstats__inner { max-width: 1380px; margin: 0 auto; padding: 34px 40px; display: grid; grid-template-columns: repeat(4, 1fr); }
.tc-style-ppc .ppstats__inner > div { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; }
.tc-style-ppc .ppstats__inner > div:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 48px; background: var(--tc-navy-700); }
.tc-style-ppc .ppstats .stat-n { font-family: var(--font-display); font-weight: 900; font-size: 40px; color: #fff; line-height: 1; }
.tc-style-ppc .ppstats .stat-l { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tc-steel-300); margin-top: 8px; }
/* ─────────── SECTIONS ─────────── */
.tc-style-ppc .ppsection { padding: 71px 0; }
.tc-style-ppc .ppsection--soft { background: var(--tc-paper-soft); }
.tc-style-ppc .ppcontainer { max-width: 1380px; margin: 0 auto; padding: 0 40px; }
.tc-style-ppc .pphead { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.tc-style-ppc .pphead .eyebrow { display: inline-block; }
.tc-style-ppc .pphead h2 { font-family: var(--font-display); font-weight: 900; font-size: 38px; line-height: 1.05; letter-spacing: -0.015em; color: var(--tc-ink); margin-top: 10px; }
.tc-style-ppc .pphead p { font-size: 16.5px; line-height: 1.6; color: var(--tc-ink-2); margin-top: 12px; }
/* gallery: curated 6 */
.tc-style-ppc .ppgal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tc-style-ppc .ppgal figure { margin: 0; position: relative; overflow: hidden; border-radius: 9px; border: 1px solid var(--tc-rule); aspect-ratio: 4/3; background: #fff; }
.tc-style-ppc .ppgal img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.tc-style-ppc .ppgal figure:hover img { transform: scale(1.05); }
.tc-style-ppc .ppgal figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px;
background: linear-gradient(to top, rgba(8,18,34,0.9), rgba(8,18,34,0)); color: #fff;
font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; letter-spacing: 0.04em; }
/* process strip */
.tc-style-ppc .ppproc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tc-style-ppc .ppproc > div { background: var(--tc-paper-white); border: 1px solid var(--tc-rule); border-radius: 9px; padding: 26px 24px; border-top: 3px solid var(--tc-red); }
.tc-style-ppc .ppproc__num { font-family: var(--font-display); font-weight: 900; font-size: 15px; color: var(--tc-red); margin-bottom: 10px; }
.tc-style-ppc .ppproc h3 { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--tc-ink); margin-bottom: 8px; letter-spacing: -0.01em; }
.tc-style-ppc .ppproc p { font-size: 14px; line-height: 1.55; color: var(--tc-ink-2); }
/* clients + certs */
.tc-style-ppc .ppclients { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tc-style-ppc .ppclients span { font-family: var(--font-sans); font-weight: 700; font-size: 13px; color: var(--tc-ink);
background: var(--tc-paper-white); border: 1px solid var(--tc-rule); border-radius: 100px; padding: 10px 20px; }
.tc-style-ppc .ppcerts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.tc-style-ppc .ppcerts span { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--tc-red); border-radius: 4px; padding: 9px 14px; }
/* bottom CTA band */
.tc-style-ppc .ppcta { background: var(--tc-navy-1000); text-align: center; padding: 71px 24px; }
.tc-style-ppc .ppcta h2 { font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 1.04; letter-spacing: -0.015em; color: #fff; margin-bottom: 12px; }
.tc-style-ppc .ppcta p { font-size: 16.5px; color: var(--tc-steel-300); margin-bottom: 28px; }
.tc-style-ppc .ppcta .btn { width: 301px; height: 51px; justify-content: center; }
/* minimal footer (no nav/phone) */
.tc-style-ppc .ppfooter { background: var(--tc-navy-1000); border-top: 1px solid var(--tc-navy-700); padding: 22px 24px; text-align: center;
font-family: var(--font-sans); font-weight: 600; font-size: 12px; color: var(--tc-steel-300); letter-spacing: 0.04em; }
/* ─────────── RESPONSIVE ─────────── */
@media (max-width: 1100px) {
.tc-style-ppc .pphero__inner { grid-template-columns: 1fr; gap: 36px; padding: 44px 24px 56px; }
.tc-style-ppc .pphero__text h1 { font-size: 40px; }
.tc-style-ppc .ppstats__inner { grid-template-columns: repeat(2, 1fr); gap: 26px 0; padding: 30px 24px; }
.tc-style-ppc .ppstats__inner > div:nth-child(2)::after { display: none; }
.tc-style-ppc .ppgal { grid-template-columns: repeat(2, 1fr); }
.tc-style-ppc .ppproc { grid-template-columns: repeat(2, 1fr); }
.tc-style-ppc .ppcontainer { padding: 0 24px; }
}
@media (max-width: 640px) {
.tc-style-ppc .pphero__text h1 { font-size: 33px; }
.tc-style-ppc .pphero__brand img { height: 68px; }
.tc-style-ppc .ppform { padding: 28px 22px 24px; }
.tc-style-ppc .ppgal { grid-template-columns: 1fr; }
.tc-style-ppc .ppproc { grid-template-columns: 1fr; }
.tc-style-ppc .ppstats__inner { grid-template-columns: 1fr; }
.tc-style-ppc .ppstats__inner > div::after { display: none !important; }
.tc-style-ppc .pphead h2 { font-size: 30px; }
.tc-style-ppc .ppcta h2 { font-size: 30px; }
.tc-style-ppc .ppcta .btn { width: 100%; max-width: 301px; }
}
/* ============================== 3. PAGE: techpub (techpub.css) ============================== */
/* =====================================================================
* Tech Pub — page overlay on site.css
* Consolidates the technical-publications cluster (IETP, IETM Class 1–5,
* IPC/EPC, service/O&M/technical manuals, illustration, wiring/circuit/
* flow diagrams, photo-to-line-art, manufacturing process docs, markets).
* Image-driven: the signature section is a FILTERABLE gallery of TECHCOM's
* real documentation work + a click-to-zoom lightbox.
* Self-contained: replicates video-hero / process / markets / FAQ patterns.
* ===================================================================== */
.tc-style-techpub #capabilities, .tc-style-techpub #work, .tc-style-techpub #ietm, .tc-style-techpub #manuals, .tc-style-techpub #process, .tc-style-techpub #faq, .tc-style-techpub #cta { scroll-margin-top: 168px; }
@media (max-width: 1100px) {
}
/* ─────────────────────────────────────────── VIDEO HERO ───── */
.tc-style-techpub .hero--video { padding: 0; min-height: 660px; overflow: hidden; position: relative; }
.tc-style-techpub .hero--video .hero__video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; z-index: 0;
filter: contrast(1.04) saturate(1.05);
}
.tc-style-techpub .hero--video .hero__scrim {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(108deg, rgba(10,26,48,0.95) 0%, rgba(10,26,48,0.78) 38%, rgba(10,26,48,0.30) 64%, rgba(10,26,48,0.62) 100%),
radial-gradient(80% 60% at 70% 92%, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%);
}
.tc-style-techpub .hero--video .hero__inner {
position: relative; z-index: 2; grid-template-columns: 1fr;
padding: 124px 56px 80px 56px; min-height: 620px; align-items: flex-end; gap: 26px;
}
.tc-style-techpub .hero--video .hero__text { max-width: 960px; }
.tc-style-techpub .hero--video .hero__title { margin-top: 18px; font-size: 100px; line-height: 0.92; letter-spacing: -0.025em; }
.tc-style-techpub .hero--video .hero__title .accent { color: var(--tc-red); }
.tc-style-techpub .hero--video .hero__title .dot { color: var(--tc-red); margin-left: -0.04em; }
.tc-style-techpub .hero--video .hero__lede {
margin-top: 22px; font-size: 19px; line-height: 1.62;
color: rgba(255,255,255,0.88); max-width: 700px;
}
.tc-style-techpub .hero--video .hero__ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.tc-style-techpub .hero__stats--3 .hero__stats-inner { grid-template-columns: repeat(3, 1fr); }
.tc-style-techpub .hero__stats--3 .hero__stats-inner > div {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; position: relative; border-right: 0;
}
.tc-style-techpub .hero__stats--3 .hero__stats-inner > div:not(:last-child)::after {
content: ""; position: absolute; top: 50%; right: -16px; transform: translateY(-50%);
width: 1px; height: 56px; background: var(--tc-navy-700);
}
/* ─────────────────────────────────────────── CAPABILITY CARDS ───── */
.tc-style-techpub .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tc-style-techpub .cap-card {
background: var(--tc-paper-white); border: 1px solid var(--tc-rule);
border-radius: 8px; padding: 32px 30px 30px;
display: flex; flex-direction: column; gap: 11px; border-top: 3px solid var(--tc-red);
}
.tc-style-techpub .cap-card__kicker {
font-family: var(--font-sans); font-weight: 700; font-size: 11px;
letter-spacing: 0.20em; text-transform: uppercase; color: var(--tc-red);
}
.tc-style-techpub .cap-card h3 {
font-family: var(--font-display); font-weight: 900; font-size: 23px;
line-height: 1.1; letter-spacing: -0.01em; color: var(--tc-ink);
}
.tc-style-techpub .cap-card p { font-size: 15px; line-height: 1.6; color: var(--tc-ink-2); }
.tc-style-techpub .cap-card__list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tc-style-techpub .cap-card__list li {
font-size: 13.5px; color: var(--tc-ink-2); padding-left: 16px; position: relative; line-height: 1.4;
}
.tc-style-techpub .cap-card__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--tc-red); border-radius: 50%; }
/* ─────────────────────────────────────────── FILTERABLE WORK GALLERY ───── */
.tc-style-techpub .gal-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.tc-style-techpub .gal-filter button {
font-family: var(--font-sans); font-weight: 700; font-size: 12px;
letter-spacing: 0.10em; text-transform: uppercase;
color: var(--tc-ink-2); background: var(--tc-paper-white);
border: 1px solid var(--tc-rule); border-radius: 100px;
padding: 10px 20px; cursor: pointer; transition: all 0.18s;
}
.tc-style-techpub .gal-filter button:hover { border-color: var(--tc-red); color: var(--tc-ink); }
.tc-style-techpub .gal-filter button.is-active { background: var(--tc-red); border-color: var(--tc-red); color: #fff; }
.tc-style-techpub .work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; grid-auto-flow: dense; }
.tc-style-techpub .work-tile {
position: relative; overflow: hidden; border-radius: 8px; cursor: zoom-in;
background: #fff; border: 1px solid var(--tc-rule); aspect-ratio: 3/2;
transition: opacity 0.3s, transform 0.3s;
}
.tc-style-techpub .work-tile img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.tc-style-techpub .work-tile:hover img { transform: scale(1.04); }
.tc-style-techpub .work-tile--w6 { grid-column: span 6; }
.tc-style-techpub .work-tile--w4 { grid-column: span 4; }
.tc-style-techpub .work-tile--w3 { grid-column: span 3; }
.tc-style-techpub .work-tile__overlay {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 20px;
background: linear-gradient(to top, rgba(8,18,34,0.88) 2%, rgba(8,18,34,0.12) 44%, rgba(8,18,34,0) 66%);
opacity: 0; transition: opacity 0.25s;
}
.tc-style-techpub .work-tile:hover .work-tile__overlay { opacity: 1; }
.tc-style-techpub .work-tile__cat {
font-family: var(--font-sans); font-weight: 700; font-size: 10px;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--tc-red-soft); margin-bottom: 4px;
}
.tc-style-techpub .work-tile__title { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 17px; line-height: 1.12; }
.tc-style-techpub .work-tile.is-hidden { display: none; }
/* ─────────────────────────────────────────── IETM CLASS LADDER ───── */
.tc-style-techpub .ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--tc-navy-700); border-radius: 10px; overflow: hidden; }
.tc-style-techpub .rung {
background: var(--tc-navy-1000); padding: 30px 24px 28px;
border-right: 1px solid var(--tc-navy-700); position: relative;
display: flex; flex-direction: column; gap: 12px;
transition: background 0.2s;
}
.tc-style-techpub .rung:last-child { border-right: 0; }
.tc-style-techpub .rung:hover { background: var(--tc-navy-900); }
.tc-style-techpub .rung--top { background: var(--tc-red); }
.tc-style-techpub .rung__class {
font-family: var(--font-sans); font-weight: 700; font-size: 10.5px;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--tc-red-soft);
}
.tc-style-techpub .rung--top .rung__class { color: rgba(255,255,255,0.85); }
.tc-style-techpub .rung__num {
font-family: var(--font-display); font-weight: 900; font-size: 52px; line-height: 0.85;
color: #fff; letter-spacing: -0.02em;
}
.tc-style-techpub .rung__bar { height: 3px; width: 32px; background: var(--tc-red); border-radius: 2px; }
.tc-style-techpub .rung--top .rung__bar { background: #fff; }
.tc-style-techpub .rung h3 { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.12; color: #fff; }
.tc-style-techpub .rung p { font-size: 13.5px; line-height: 1.5; color: var(--tc-steel-300); }
.tc-style-techpub .rung--top p { color: rgba(255,255,255,0.9); }
/* ─────────────────────────────────────────── MANUAL TYPES (two-col list) ───── */
.tc-style-techpub .mtypes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px; }
.tc-style-techpub .mtype {
display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline;
padding: 18px 0; border-bottom: 1px solid var(--tc-rule);
}
.tc-style-techpub .mtype__k {
font-family: var(--font-display); font-weight: 900; font-size: 15px; color: var(--tc-red);
letter-spacing: 0.02em; white-space: nowrap;
}
.tc-style-techpub .mtype__t { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--tc-ink); margin-bottom: 4px; }
.tc-style-techpub .mtype__d { font-size: 14px; line-height: 1.5; color: var(--tc-ink-2); }
/* ─────────────────────────────────────────── PROCESS STRIP (red) ───── */
.tc-style-techpub .proc-strip { background: var(--tc-red); }
.tc-style-techpub .proc-strip__inner { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); }
.tc-style-techpub .proc-step { padding: 44px 26px; border-right: 1px solid rgba(255,255,255,0.18); }
.tc-style-techpub .proc-step:last-child { border-right: 0; }
.tc-style-techpub .proc-step__num { font-family: var(--font-display); font-weight: 900; font-size: 15px; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); margin-bottom: 12px; }
.tc-style-techpub .proc-step__t { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #fff; margin-bottom: 8px; letter-spacing: -0.01em; }
.tc-style-techpub .proc-step__d { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.86); }
/* ─────────────────────────────────────────── MARKETS BAND ───── */
.tc-style-techpub .markets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.tc-style-techpub .market { padding: 6px 0; position: relative; }
.tc-style-techpub .market:not(:last-child)::after { content: ""; position: absolute; top: 0; bottom: 0; right: -20px; width: 1px; background: var(--tc-navy-600); }
.tc-style-techpub .market__n {
font-family: var(--font-display); font-weight: 900; font-size: 15px;
letter-spacing: 0.03em; color: #fff; margin-bottom: 12px;
padding-bottom: 12px; border-bottom: 2px solid var(--tc-red); display: inline-block;
}
.tc-style-techpub .market p { font-size: 14.5px; line-height: 1.6; color: var(--tc-steel-300); }
/* ─────────────────────────────────────────── FAQ ACCORDION ───── */
.tc-style-techpub .faq { max-width: 880px; margin: 0 auto; }
.tc-style-techpub .faq-item { border-bottom: 1px solid var(--tc-rule); }
.tc-style-techpub .faq-q {
width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
padding: 24px 44px 24px 0; position: relative;
font-family: var(--font-display); font-weight: 700; font-size: 20px;
color: var(--tc-ink); letter-spacing: -0.005em;
}
.tc-style-techpub .faq-q::after {
content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
font-family: var(--font-sans); font-weight: 400; font-size: 28px; color: var(--tc-red);
transition: transform 0.25s;
}
.tc-style-techpub .faq-item.is-open .faq-q::after { content: "–"; }
.tc-style-techpub .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.tc-style-techpub .faq-a__inner { padding: 0 44px 26px 0; font-size: 16px; line-height: 1.68; color: var(--tc-ink-2); }
/* ─────────────────────────────────────────── LIGHTBOX ───── */
.tc-style-techpub .lightbox {
position: fixed; inset: 0; z-index: 200; background: rgba(6,14,28,0.93);
display: none; align-items: center; justify-content: center; padding: 48px;
opacity: 0; transition: opacity 0.2s;
}
.tc-style-techpub .lightbox.is-open { display: flex; opacity: 1; }
.tc-style-techpub .lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); background: #fff; }
.tc-style-techpub .lightbox__cap {
position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: #fff;
font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.06em;
}
.tc-style-techpub .lightbox__close {
position: absolute; top: 24px; right: 30px; width: 44px; height: 44px;
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
border-radius: 50%; color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.tc-style-techpub .lightbox__close:hover { background: rgba(255,255,255,0.2); }
/* ─────────────────────────────────────────── RESPONSIVE ───── */
@media (max-width: 1100px) {
.tc-style-techpub .hero--video .hero__inner { padding: 104px 30px 56px; min-height: 520px; }
.tc-style-techpub .hero--video .hero__title { font-size: 66px; }
.tc-style-techpub .cap-grid { grid-template-columns: 1fr; }
.tc-style-techpub .work-tile--w6, .tc-style-techpub .work-tile--w4, .tc-style-techpub .work-tile--w3 { grid-column: span 6; }
.tc-style-techpub .ladder { grid-template-columns: repeat(2, 1fr); }
.tc-style-techpub .rung { border-bottom: 1px solid var(--tc-navy-700); }
.tc-style-techpub .rung:nth-child(2n) { border-right: 0; }
.tc-style-techpub .mtypes { grid-template-columns: 1fr; }
.tc-style-techpub .proc-strip__inner { grid-template-columns: repeat(2, 1fr); }
.tc-style-techpub .proc-step:nth-child(2n) { border-right: 0; }
.tc-style-techpub .markets { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
.tc-style-techpub .market:not(:last-child)::after { display: none; }
.tc-style-techpub .hero__stats--3 .hero__stats-inner { grid-template-columns: 1fr; gap: 22px; }
.tc-style-techpub .hero__stats--3 .hero__stats-inner > div:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
.tc-style-techpub .hero--video .hero__title { font-size: 50px; }
.tc-style-techpub .work-tile--w6, .tc-style-techpub .work-tile--w4, .tc-style-techpub .work-tile--w3 { grid-column: span 12; }
.tc-style-techpub .ladder { grid-template-columns: 1fr; }
.tc-style-techpub .rung { border-right: 0; }
.tc-style-techpub .proc-strip__inner { grid-template-columns: 1fr; }
.tc-style-techpub .proc-step { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
.tc-style-techpub .markets { grid-template-columns: 1fr; }
}
/* ============================== 3. PAGE: agencies (agencies.css) ============================== */
/* =====================================================================
* Techcom for Agencies — page overlay on site.css + blog.css
* Uses the blog-post shell (ahero 270px banner, 1100px article, 75px
* rhythm, agal gallery + lightbox) and adds: equation strip, capability
* cards, challenge→build swap rows, and the agency-pact navy band.
* ===================================================================== */
/* ── VIDEO HERO (agencies) ── */
.tc-style-agencies .ahero--agencies { min-height: 440px; }
.tc-style-agencies .ahero--agencies .ahero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: contrast(1.04) saturate(1.05); }
/* ── EQUATION STRIP ── */
.tc-style-agencies .eq-wrap { max-width: 1100px; margin: 0 auto; padding: 0 40px 75px; }
.tc-style-agencies .eq { background: var(--tc-navy-1000); border-radius: 12px; padding: 56px 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.tc-style-agencies .eq__row { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.tc-style-agencies .eq__part { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.02em; line-height: 1.06; color: #fff; max-width: 520px; }
.tc-style-agencies .eq__part--result { font-size: clamp(34px, 4.8vw, 63px); max-width: 900px; }
.tc-style-agencies .eq__part small { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tc-steel-300); margin-bottom: 10px; }
.tc-style-agencies .eq__op { font-family: var(--font-display); font-weight: 900; font-size: 48px; color: var(--tc-red-soft); line-height: 1; }
.tc-style-agencies .eq__part--result { color: var(--tc-red-soft); }
/* ── WHAT WE BUILD ── */
.tc-style-agencies .ab-wrap { max-width: 1100px; margin: 0 auto; padding: 0 40px 75px; }
.tc-style-agencies .ab-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tc-style-agencies .ab-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tc-style-agencies .ab-grid--2 .ab-card__photo { aspect-ratio: 2/1; }
.tc-style-agencies .ab-grid--2 h3 { font-size: 20px; }
.tc-style-agencies .ab-card { background: var(--tc-paper-white); border: 1px solid var(--tc-rule); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.tc-style-agencies .ab-card__photo { aspect-ratio: 16/11; background-size: cover; background-position: center; border-bottom: 3px solid var(--tc-red); cursor: zoom-in; }
.tc-style-agencies .ab-card__photo--video { cursor: default; position: relative; overflow: hidden; background: #08111f; }
.tc-style-agencies .ab-card__photo--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc-style-agencies .ab-card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tc-style-agencies .ab-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 17.5px; line-height: 1.14; letter-spacing: -0.01em; color: var(--tc-ink); }
.tc-style-agencies .ab-card p { font-size: 13.5px; line-height: 1.55; color: var(--tc-ink-2); }
.tc-style-agencies .ab-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; }
/* ── CHALLENGE → BUILD SWAP ROWS ── */
.tc-style-agencies .swap { display: flex; flex-direction: column; }
.tc-style-agencies .swap-row { display: grid; grid-template-columns: 1.05fr auto 0.95fr; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--tc-rule); }
.tc-style-agencies .swap-row:last-child { border-bottom: 0; }
.tc-style-agencies .swap-row__q { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.35; color: var(--tc-ink); font-style: italic; }
.tc-style-agencies .swap-row__q::before { content: "“"; color: var(--tc-red); font-weight: 900; }
.tc-style-agencies .swap-row__q::after { content: "”"; color: var(--tc-red); font-weight: 900; }
.tc-style-agencies .swap-row__arrow { font-family: var(--font-display); font-weight: 900; font-size: 26px; color: var(--tc-red); }
.tc-style-agencies .swap-row__a { font-size: 15.5px; line-height: 1.55; color: var(--tc-ink-2); }
.tc-style-agencies .swap-row__a strong { color: var(--tc-ink); }
/* ── AGENCY PACT (navy band) ── */
.tc-style-agencies .pact { background: var(--tc-navy-1000); padding: 75px 0; }
.tc-style-agencies .pact__inner { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.tc-style-agencies .pact__head { margin-bottom: 40px; }
.tc-style-agencies .pact__head .eyebrow--on-dark { color: var(--tc-red-soft); }
.tc-style-agencies .pact__head h2 { font-family: var(--font-display); font-weight: 900; font-size: 34px; letter-spacing: -0.015em; color: #fff; margin-top: 10px; }
.tc-style-agencies .pact__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.tc-style-agencies .pact__item { position: relative; padding: 6px 0; }
.tc-style-agencies .pact__item:not(:last-child)::after { content: ""; position: absolute; top: 0; bottom: 0; right: -20px; width: 1px; background: var(--tc-navy-600); }
.tc-style-agencies .pact__item h3 { font-family: var(--font-display); font-weight: 900; font-size: 17px; color: #fff; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--tc-red); display: inline-block; }
.tc-style-agencies .pact__item p { font-size: 14.5px; line-height: 1.6; color: var(--tc-steel-300); }
/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
.tc-style-agencies .eq__row { flex-direction: column; gap: 12px; }
.tc-style-agencies .ab-grid, .tc-style-agencies .ab-mini { grid-template-columns: repeat(2, 1fr); }
.tc-style-agencies .ab-grid--2 { grid-template-columns: 1fr; }
.tc-style-agencies .swap-row { grid-template-columns: 1fr; gap: 8px; }
.tc-style-agencies .swap-row__arrow { transform: rotate(90deg); width: fit-content; }
.tc-style-agencies .pact__grid { grid-template-columns: 1fr; gap: 28px; }
.tc-style-agencies .pact__item:not(:last-child)::after { display: none; }
.tc-style-agencies .eq { padding: 40px 28px; }
}
@media (max-width: 640px) {
.tc-style-agencies .ab-grid, .tc-style-agencies .ab-mini { grid-template-columns: 1fr; }
.tc-style-agencies .eq-wrap, .tc-style-agencies .ab-wrap { padding-left: 24px; padding-right: 24px; }
.tc-style-agencies .eq { padding: 32px 24px; }
}
/* ============================== 3. PAGE: tradeshows (tradeshows.css) ============================== */
/* =====================================================================
* Tradeshows hub + Tradeshow Event recap — page overlay on site.css
* Reuses the TECHCOM kit (header, subnav, buttons, sections, footer,
* why-grid, impact, cta-band) and adds: photo hero, event-card grid,
* filter chips, event-detail meta bar + gallery + related rail.
* ===================================================================== */
/* Smooth in-page anchor scrolling, with offset so targets clear the
sticky header (104px) + sticky sub-nav (~58px) instead of hiding under it. */
.tc-style-tradeshows #shows, .tc-style-tradeshows #cta, .tc-style-tradeshows #hero { scroll-margin-top: 168px; }
/* ─────────────────────────────────────────── STICKY RED SUB-NAV ───── */
@media (max-width: 1100px) {
}
/* 4-up stat strip — force a single row of four, centered (site.css base is 3) */
.tc-style-tradeshows .hero__stats--4 .hero__stats-inner {
grid-template-columns: repeat(4, 1fr);
}
/* Guarantee number + label sit dead-center in each column (e.g. "50+", "In-House") */
.tc-style-tradeshows .hero__stats--4 .hero__stats-inner > div {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
position: relative;
border-right: 0; /* replaced by gap-centered divider below */
}
/* Center the vertical rule in the gap between columns (gap is 32px → offset 16px) */
.tc-style-tradeshows .hero__stats--4 .hero__stats-inner > div:not(:last-child)::after {
content: "";
position: absolute;
top: 50%; right: -16px;
transform: translateY(-50%);
width: 1px; height: 56px;
background: var(--tc-navy-700);
}
/* ─────────────────────────────────────────── PHOTO / VIDEO HERO ───── */
.tc-style-tradeshows .hero--show {
padding: 0;
min-height: 660px;
overflow: hidden;
position: relative;
}
.tc-style-tradeshows .hero--show .hero__photo {
position: absolute; inset: 0;
width: 100%; height: 100%;
background-size: cover;
background-position: center;
z-index: 0;
}
.tc-style-tradeshows .hero--show .hero__video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
filter: contrast(1.04) saturate(1.04);
}
.tc-style-tradeshows .hero--show .hero__scrim {
position: absolute; inset: 0;
background:
linear-gradient(112deg, rgba(10,26,48,0.94) 0%, rgba(10,26,48,0.74) 40%, rgba(10,26,48,0.22) 66%, rgba(10,26,48,0.58) 100%),
radial-gradient(80% 60% at 72% 92%, rgba(0,0,0,0.5), rgba(0,0,0,0) 70%);
z-index: 1;
}
.tc-style-tradeshows .hero--show .hero__inner {
position: relative; z-index: 2;
grid-template-columns: 1fr;
padding: 116px 56px 76px 56px;
min-height: 560px;
align-items: flex-end;
gap: 28px;
}
.tc-style-tradeshows .hero--show .hero__text { max-width: 900px; }
.tc-style-tradeshows .hero--show .hero__title {
margin-top: 18px;
font-size: 116px;
line-height: 0.92;
letter-spacing: -0.025em;
}
.tc-style-tradeshows .hero--show .hero__title .accent { color: var(--tc-red); }
.tc-style-tradeshows .hero--show .hero__title .dot { color: var(--tc-red); margin-left: -0.04em; }
.tc-style-tradeshows .hero--show .hero__lede {
margin-top: 24px;
font-size: 19px;
line-height: 1.62;
color: rgba(255,255,255,0.86);
max-width: 640px;
}
.tc-style-tradeshows .hero--show .hero__ctas {
display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap;
}
/* ─────────────────────────────────────────── EVENT GRID ───── */
.tc-style-tradeshows .shows-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 48px; margin-bottom: 40px;
}
.tc-style-tradeshows .shows-head .section-head { margin-bottom: 0; }
.tc-style-tradeshows .show-filters {
display: flex; flex-wrap: wrap; gap: 8px;
justify-content: flex-end; align-items: center;
}
.tc-style-tradeshows .show-filters__label {
font-family: var(--font-sans);
font-weight: 700; font-size: 11px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--tc-ink-2); margin-right: 8px;
}
.tc-style-tradeshows .show-chip {
font-family: var(--font-sans);
font-weight: 700; font-size: 12px;
letter-spacing: 0.16em; text-transform: uppercase;
padding: 10px 16px;
background: var(--tc-paper-white);
color: var(--tc-ink-2);
border: 1px solid var(--tc-rule);
border-radius: 2px;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
user-select: none;
}
.tc-style-tradeshows .show-chip:hover { color: var(--tc-ink); border-color: var(--tc-ink-2); }
.tc-style-tradeshows .show-chip.is-active {
background: var(--tc-red); color: #fff; border-color: var(--tc-red);
}
.tc-style-tradeshows .show-chip .count { opacity: 0.55; font-weight: 600; margin-left: 6px; }
.tc-style-tradeshows .show-chip.is-active .count { opacity: 0.8; }
.tc-style-tradeshows .shows-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 22px;
grid-auto-flow: dense;
}
/* Event card = clickable recap link */
.tc-style-tradeshows .show-card {
position: relative;
display: flex; flex-direction: column;
background: var(--tc-paper-white);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0,0,0,0.06);
text-decoration: none; color: inherit; border: 0;
transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.2s;
grid-column: span 4;
}
.tc-style-tradeshows .show-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(0,0,0,0.16);
color: inherit;
}
.tc-style-tradeshows .show-card[hidden] { display: none; }
.tc-style-tradeshows .show-card.is-feature { grid-column: span 8; }
.tc-style-tradeshows .show-card.is-wide { grid-column: span 6; }
.tc-style-tradeshows .show-card__photo {
position: relative;
aspect-ratio: 4/3;
background-size: cover; background-position: center;
background-color: var(--tc-navy-900);
}
.tc-style-tradeshows .show-card.is-feature .show-card__photo { aspect-ratio: 16/9; }
.tc-style-tradeshows .show-card__photo::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,26,48,0) 45%, rgba(10,26,48,0.55) 100%);
}
.tc-style-tradeshows .show-card__year {
position: absolute; top: 14px; left: 14px; z-index: 2;
background: var(--tc-red); color: #fff;
font-family: var(--font-sans);
font-weight: 700; font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase;
padding: 6px 11px; border-radius: 2px;
}
.tc-style-tradeshows .show-card__loc {
position: absolute; bottom: 14px; left: 16px; right: 16px; z-index: 2;
color: #fff;
font-family: var(--font-sans);
font-weight: 600; font-size: 12px;
letter-spacing: 0.14em; text-transform: uppercase;
display: flex; align-items: center; gap: 7px;
}
.tc-style-tradeshows .show-card__loc svg { width: 13px; height: 13px; flex: none; opacity: 0.9; }
.tc-style-tradeshows .show-card__body {
padding: 22px 24px 24px;
display: flex; flex-direction: column; gap: 9px;
flex: 1;
}
.tc-style-tradeshows .show-card__client {
font-family: var(--font-sans);
font-weight: 700; font-size: 11px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--tc-red);
}
.tc-style-tradeshows .show-card h3 {
font-family: var(--font-display);
font-weight: 900;
font-size: 22px;
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--tc-ink);
}
.tc-style-tradeshows .show-card.is-feature h3 { font-size: 30px; }
.tc-style-tradeshows .show-card__desc {
font-size: 15px; line-height: 1.55; color: var(--tc-ink-2);
}
.tc-style-tradeshows .show-card__more {
margin-top: auto; padding-top: 6px;
font-family: var(--font-sans);
font-weight: 700; font-size: 12px;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--tc-blue-bright);
display: inline-flex; align-items: center; gap: 8px;
}
.tc-style-tradeshows .show-card__more svg { width: 16px; height: 16px; transition: transform 0.2s; }
.tc-style-tradeshows .show-card:hover .show-card__more svg { transform: translateX(4px); }
.tc-style-tradeshows .shows-grid__empty {
grid-column: 1 / -1; text-align: center; padding: 80px 20px;
color: var(--tc-ink-2); font-size: 16px; display: none;
}
.tc-style-tradeshows .shows-grid.is-empty .shows-grid__empty { display: block; }
/* ─────────────────────────────────────────── EVENT DETAIL ───── */
/* Event hero meta line */
.tc-style-tradeshows .show-meta-line {
display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
margin-bottom: 4px;
}
.tc-style-tradeshows .show-meta-line .pill {
font-family: var(--font-sans);
font-weight: 700; font-size: 12px;
letter-spacing: 0.16em; text-transform: uppercase;
color: #fff;
display: inline-flex; align-items: center; gap: 8px;
}
.tc-style-tradeshows .show-meta-line .pill svg { width: 15px; height: 15px; opacity: 0.85; }
.tc-style-tradeshows .show-meta-line .sep { width: 4px; height: 4px; background: var(--tc-red-soft); border-radius: 50%; }
/* At-a-glance bar under hero */
.tc-style-tradeshows .glance {
background: var(--tc-navy-1000);
border-top: 3px solid var(--tc-red);
}
.tc-style-tradeshows .glance__inner {
max-width: 1380px; margin: 0 auto;
padding: 30px 56px;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.tc-style-tradeshows .glance__cell { border-right: 1px solid var(--tc-navy-700); padding-right: 24px; }
.tc-style-tradeshows .glance__cell:last-child { border-right: 0; }
.tc-style-tradeshows .glance__k {
font-family: var(--font-sans);
font-weight: 700; font-size: 11px;
letter-spacing: 0.20em; text-transform: uppercase;
color: var(--tc-steel-300); margin-bottom: 8px;
}
.tc-style-tradeshows .glance__v {
font-family: var(--font-display);
font-weight: 900; font-size: 22px;
line-height: 1.1; letter-spacing: -0.005em; color: #fff;
}
.tc-style-tradeshows .glance__v small {
display: block; font-family: var(--font-body);
font-weight: 500; font-size: 13px; color: var(--tc-steel-300);
letter-spacing: 0; margin-top: 4px;
}
/* Event body two-column: narrative + sticky facts */
.tc-style-tradeshows .show-body {
display: grid; grid-template-columns: 1.55fr 0.95fr; gap: 72px;
align-items: start;
}
.tc-style-tradeshows .show-body__main h2 {
font-family: var(--font-display);
font-weight: 900; font-size: 40px; line-height: 1.03;
letter-spacing: -0.01em; color: var(--tc-ink);
margin-bottom: 22px;
}
.tc-style-tradeshows .show-body__main h3 {
font-family: var(--font-display);
font-weight: 900; font-size: 24px; line-height: 1.1;
letter-spacing: -0.005em; color: var(--tc-ink);
margin: 40px 0 14px;
}
.tc-style-tradeshows .show-body__main p {
font-size: 17px; line-height: 1.7; color: var(--tc-ink-2);
margin-bottom: 20px;
}
.tc-style-tradeshows .show-aside {
position: sticky; top: 180px;
background: var(--tc-paper-white);
border: 1px solid var(--tc-rule);
border-top: 3px solid var(--tc-red);
border-radius: 6px;
padding: 30px 30px 32px;
}
.tc-style-tradeshows .show-aside h4 {
font-family: var(--font-sans);
font-weight: 700; font-size: 11px;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--tc-ink-2); margin-bottom: 18px;
}
.tc-style-tradeshows .show-aside dl { display: flex; flex-direction: column; gap: 16px; }
.tc-style-tradeshows .show-aside dt {
font-family: var(--font-sans);
font-weight: 700; font-size: 10px;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--tc-red); margin-bottom: 3px;
}
.tc-style-tradeshows .show-aside dd { font-size: 16px; line-height: 1.4; color: var(--tc-ink); }
.tc-style-tradeshows .show-aside .btn { width: 100%; margin-top: 26px; min-width: 0; }
/* Event photo gallery */
.tc-style-tradeshows .show-gallery {
display: grid; grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 220px; gap: 16px;
}
.tc-style-tradeshows .show-gallery figure {
margin: 0; position: relative; overflow: hidden;
border-radius: 6px; background: var(--tc-navy-900);
}
.tc-style-tradeshows .show-gallery img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.tc-style-tradeshows .show-gallery figure:hover img { transform: scale(1.04); }
.tc-style-tradeshows .show-gallery figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 26px 18px 14px;
background: linear-gradient(180deg, rgba(10,26,48,0) 0%, rgba(10,26,48,0.78) 100%);
color: #fff;
font-family: var(--font-sans);
font-weight: 600; font-size: 12px;
letter-spacing: 0.06em;
}
.tc-style-tradeshows .show-gallery .span-3 { grid-column: span 3; }
.tc-style-tradeshows .show-gallery .span-2 { grid-column: span 2; }
.tc-style-tradeshows .show-gallery .span-4 { grid-column: span 4; }
.tc-style-tradeshows .show-gallery .row-2 { grid-row: span 2; }
/* Related shows rail */
.tc-style-tradeshows .related-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
/* ─────────────────────────────────────────── IMPACT (dark blue band) ───── */
/* NOTE: these .impact* classes also exist in cutaway.css; redefined here so
the Tradeshows hub + event template (which don't load cutaway.css) render
the section correctly over dark blue. */
.tc-style-tradeshows .impact {
background: var(--tc-navy-900);
color: #fff;
padding: 120px 0;
position: relative;
overflow: hidden;
}
.tc-style-tradeshows .impact__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.tc-style-tradeshows .impact__quote {
font-family: var(--font-display);
font-weight: 900;
font-size: 56px;
line-height: 1.04;
letter-spacing: -0.012em;
color: #fff;
text-wrap: balance;
}
.tc-style-tradeshows .impact__quote .accent { color: var(--tc-red-soft); }
/* Rick: bold, solid-white header treatment (no accent tint) */
.tc-style-tradeshows .impact__quote--header { color: #fff; }
.tc-style-tradeshows .impact__quote--header .accent { color: #fff; }
.tc-style-tradeshows .impact__sub {
margin-top: 28px;
font-size: 17px;
line-height: 1.65;
color: var(--tc-steel-300);
max-width: 520px;
}
.tc-style-tradeshows .impact__stats {
margin-top: 36px;
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 48px;
}
.tc-style-tradeshows .impact__stats .s-n {
font-family: var(--font-display);
font-weight: 900;
font-size: 48px;
color: var(--tc-red-soft);
line-height: 1;
letter-spacing: -0.01em;
}
.tc-style-tradeshows .impact__stats .s-l {
margin-top: 6px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 12px;
color: var(--tc-steel-300);
letter-spacing: 0.16em;
text-transform: uppercase;
}
.tc-style-tradeshows .impact__media {
display: grid;
grid-template-columns: 1.4fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 12px;
height: 520px;
}
.tc-style-tradeshows .impact__media > div {
background-size: cover;
background-position: center;
border-radius: 4px;
border: 1px solid var(--tc-navy-600);
}
.tc-style-tradeshows .impact__media .a { grid-row: span 2; }
/* ─────────────────────────────────────────── RESPONSIVE ───── */
@media (max-width: 1100px) {
.tc-style-tradeshows .hero__stats--4 .hero__stats-inner { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
.tc-style-tradeshows .hero__stats--4 .hero__stats-inner > div::after { display: none; }
.tc-style-tradeshows .hero--show .hero__title { font-size: 64px; }
.tc-style-tradeshows .hero--show .hero__inner { padding: 96px 32px 56px; min-height: 460px; }
.tc-style-tradeshows .shows-head { flex-direction: column; align-items: flex-start; }
.tc-style-tradeshows .show-filters { justify-content: flex-start; }
.tc-style-tradeshows .shows-grid { grid-template-columns: repeat(2, 1fr); }
.tc-style-tradeshows .show-card, .tc-style-tradeshows .show-card.is-feature, .tc-style-tradeshows .show-card.is-wide { grid-column: span 1; }
.tc-style-tradeshows .glance__inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.tc-style-tradeshows .glance__cell:nth-child(2) { border-right: 0; }
.tc-style-tradeshows .show-body { grid-template-columns: 1fr; gap: 40px; }
.tc-style-tradeshows .show-aside { position: static; }
.tc-style-tradeshows .show-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
.tc-style-tradeshows .show-gallery .span-3, .tc-style-tradeshows .show-gallery .span-2, .tc-style-tradeshows .show-gallery .span-4 { grid-column: span 2; }
.tc-style-tradeshows .show-gallery .row-2 { grid-row: span 1; }
.tc-style-tradeshows .related-grid { grid-template-columns: 1fr; }
.tc-style-tradeshows .impact__inner { grid-template-columns: 1fr; gap: 48px; }
.tc-style-tradeshows .impact__quote { font-size: 36px; }
.tc-style-tradeshows .impact__media { height: 360px; }
}
@media (max-width: 640px) {
.tc-style-tradeshows .hero__stats--4 .hero__stats-inner { grid-template-columns: 1fr; gap: 20px 0; }
.tc-style-tradeshows .hero--show .hero__title { font-size: 48px; }
.tc-style-tradeshows .shows-grid { grid-template-columns: 1fr; }
.tc-style-tradeshows .glance__inner { grid-template-columns: 1fr; }
.tc-style-tradeshows .glance__cell { border-right: 0; border-bottom: 1px solid var(--tc-navy-700); padding-bottom: 18px; }
.tc-style-tradeshows .glance__cell:last-child { border-bottom: 0; padding-bottom: 0; }
.tc-style-tradeshows .show-gallery { grid-template-columns: 1fr; }
.tc-style-tradeshows .show-gallery .span-3, .tc-style-tradeshows .show-gallery .span-2, .tc-style-tradeshows .show-gallery .span-4 { grid-column: span 1; }
}
/* ============================== 4. THEME ADDITIONS ============================== */
/* Global overlays (the design only styled these on some pages). */
.lightbox {
position: fixed; inset: 0; z-index: 200; background: rgba(6,14,28,0.93);
display: none; align-items: center; justify-content: center; padding: 48px;
opacity: 0; transition: opacity 0.2s;
}
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox img {
max-width: 92vw; max-height: 88vh; object-fit: contain;
border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); background: #fff;
}
.lightbox__cap {
position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: #fff;
font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.06em;
}
.lightbox__close, .vmodal__close {
position: absolute; top: 24px; right: 30px; width: 44px; height: 44px;
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
border-radius: 50%; color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.lightbox__close:hover, .vmodal__close:hover { background: rgba(255,255,255,0.2); }
.vmodal {
position: fixed; inset: 0; z-index: 200; background: rgba(6,14,28,0.94);
display: none; align-items: center; justify-content: center; padding: 48px;
opacity: 0; transition: opacity 0.2s;
}
.vmodal.is-open { display: flex; opacity: 1; }
.vmodal__inner { width: min(1100px, 92vw); }
.vmodal video { width: 100%; max-height: 82vh; border-radius: 8px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,0.6); display: block; }
.vmodal__cap {
margin-top: 14px; color: #fff; text-align: center;
font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.05em;
}
[data-lightbox], [data-video] { cursor: zoom-in; }
[data-video] { cursor: pointer; }
/* Sticky header + bar under the WordPress admin bar. */
.admin-bar .tc-header { top: 32px; }
.admin-bar .tc-subnav { top: 136px; }
@media (max-width: 782px) { .admin-bar .tc-header { top: 0; } }
/* Design used inline styles for these — moved to classes. */
.section-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head--center .section-sub { margin-left: auto; margin-right: auto; }
.section-head--tight { margin-bottom: 34px; }
.nowrap { white-space: nowrap; }
.u-accent { color: var(--tc-red); }
.u-m0 { margin: 0; }
.u-mb40 { margin: 0 0 40px; }
.u-pt0 { padding-top: 0; }
.u-pb28 { padding-bottom: 28px; }
.u-pb18 { padding-bottom: 18px; }
.u-mt0 { margin-top: 0; }
.btn--w234 { width: 234px; height: 51px; }
@media (max-width: 640px) { .nowrap { white-space: normal; } .btn--w234 { width: 100%; } }
/* Small-screen fixes on top of the design. */
.tc-subnav__inner a { white-space: nowrap; }
@media (max-width: 640px) {
.hstats__inner { padding: 36px 20px; }
.hstat-n { font-size: 34px; }
}
/* WPBakery: theme elements render full-width sections; strip the builder's
default element spacing inside them only. */
.tc-el { margin-bottom: 0; }
.wpb_wrapper > .tc-el + .tc-el { margin-top: 0; }
/* Page content wrapper (page.php) — no padding; sections own their spacing. */
.tc-page-content { display: block; }
.tc-page-content > .vc_row:last-child { margin-bottom: 0; }
/* Plain (non-WPBakery) page content falls back to readable text. */
.tc-entry { max-width: 820px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) 24px; }
.tc-entry > * + * { margin-top: 1.1em; }
.tc-entry a { color: var(--tc-red); border-bottom: 1px solid currentColor; }
.tc-entry h2 { font-size: 36px; margin-top: 1.4em; }
.tc-entry h3 { font-size: 26px; margin-top: 1.3em; }
.tc-entry ul { list-style: disc; padding-left: 1.3em; }
.tc-entry ol { list-style: decimal; padding-left: 1.3em; }
.tc-entry img { height: auto; }
/* Scroll reveal — elements animate as they enter the viewport, replay when
scrolled back into view (down or up), and never twice in one pass. */
.tc-js .tc-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.tc-js .tc-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tc-js .tc-reveal, .tc-js .tc-reveal.is-in { opacity: 1; transform: none; transition: none; } }
/* Screen-reader text. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
/* Pagination (blog). */
.tc-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.tc-pagination .page-numbers { min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--tc-rule); background: #fff; color: var(--tc-ink); font-family: var(--font-sans); font-weight: 700; font-size: 14px; border-radius: 2px; }
.tc-pagination .page-numbers.current, .tc-pagination .page-numbers:hover { background: var(--tc-red); border-color: var(--tc-red); color: #fff; }
/* Article body (single posts) — WordPress content typography. */
.tc-style-blog .article .entry-content > :first-child:not(.article .tc-scope *) { margin-top: 0; }
.tc-style-blog .article .entry-content > :last-child:not(.article .tc-scope *) { margin-bottom: 0; }
.tc-style-blog .article .entry-content img:not(.article .tc-scope *) { height: auto; border-radius: 6px; }
.tc-style-blog .article .entry-content ol:not(.article .tc-scope *) { list-style: decimal; padding-left: 1.3em; }
.tc-style-blog .article .entry-content a:not(.article .tc-scope *) { color: var(--tc-red); border-bottom: 1px solid currentColor; }
.tc-style-blog .article .entry-content .wp-caption:not(.article .tc-scope *), .tc-style-blog .article .entry-content figure:not(.article .tc-scope *) { max-width: 100%; }
.tc-style-blog .article .entry-content figcaption:not(.article .tc-scope *), .tc-style-blog .article .entry-content .wp-caption-text:not(.article .tc-scope *) { font-size: 13px; color: var(--tc-ink-2); margin-top: 8px; }
.tc-style-blog .article .entry-content .alignleft:not(.article .tc-scope *) { float: left; margin: 6px 24px 16px 0; }
.tc-style-blog .article .entry-content .alignright:not(.article .tc-scope *) { float: right; margin: 6px 0 16px 24px; }
.tc-style-blog .article .entry-content .aligncenter:not(.article .tc-scope *) { margin-left: auto; margin-right: auto; }
/* 404 / search. */
.tc-404 { text-align: center; }
.tc-404 .btn { margin-top: 28px; }
.tc-search-form { display: flex; gap: 10px; max-width: 520px; margin: 28px auto 0; }
.tc-search-form input[type="search"] { flex: 1; height: 54px; border: 1px solid var(--tc-rule); padding: 0 16px; font: inherit; font-size: 16px; background: #fff; }
.tc-search-form .btn { min-width: 0; }
/* Background photos are real ![]()
elements (no inline styles). */
:where(.tc-has-bg) { position: relative; overflow: hidden; }
.tc-bgimg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; }
.tc-bgimg--contain { object-fit: contain; }
.tc-bgimg--top { object-position: center top; }
.tc-feat-pad { padding-top: 117px; padding-bottom: 117px; }
.u-mb24 { margin-bottom: 24px; }
.u-mb30 { margin-bottom: 30px; }
.tc-page-content { overflow-x: clip; }
/* Headings the design styled inline. */
.process__title { color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 1.04; letter-spacing: -0.01em; margin-top: 8px; }
.showcase__title { font-family: var(--font-display); font-weight: 900; font-size: 38px; line-height: 1.05; letter-spacing: -0.01em; color: var(--tc-ink); margin-bottom: 18px; }
.showcase__text { font-size: 16.5px; line-height: 1.62; color: var(--tc-ink-2); margin-bottom: 20px; }
@media (max-width: 640px) { .process__title { font-size: 32px; } .showcase__title { font-size: 30px; } }
.u-mb36 { margin: 0 0 36px; }
.u-mb8 { margin: 0 0 8px; }
.u-white { color: #fff; }
.btn--w350 { width: 350px; }
@media (max-width: 640px) { .btn--w350 { width: 100%; } }
.h-wide { white-space: nowrap; width: max-content; max-width: none; position: relative; left: 50%; transform: translateX(-50%); text-align: center; }
@media (max-width: 900px) { .h-wide { white-space: normal; width: auto; max-width: 100%; left: 0; transform: none; } }
/* Photo backdrops (replace the design's inline background colors). */
.tc-has-bg.tc-bd--cream { background-color: #f3efe6; }
.tc-has-bg.tc-bd--light { background-color: #efefef; }
.tc-has-bg.tc-bd--soft { background-color: #f5f5f5; }
.tc-has-bg.tc-bd--cool { background-color: #eef0f4; }
.tc-has-bg.tc-bd--dark { background-color: #1a0d0c; }
.tc-has-bg.tc-bd--ink { background-color: #0c0c10; }
.tc-has-bg.tc-bd--ink2 { background-color: #0a0a14; }
.section-head--540 { max-width: 540px; margin-bottom: 0; }
.u-center { text-align: center; }
.u-fs22 { font-size: 22px; }
.u-mt28 { margin-top: 28px; }
.tc-scope:has(.hero--cut) + .tc-page-content > .vc_row:first-of-type .hero__stats { margin-top: 0; }
.tc-el .show-card.is-feature h3.u-fs22 { font-size: 22px; }
.u-mt34 { margin-top: 34px; }
.u-mb48 { margin-bottom: 48px; }
/* Form plugin output (Formidable / Gravity / WPForms / CF7) inside the design's form cards. */
.tc-form label, .tc-form .frm_primary_label, .tc-form .gfield_label { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; color: var(--tc-ink); display: block; margin-bottom: 7px; }
.tc-form input[type="text"], .tc-form input[type="email"], .tc-form input[type="tel"], .tc-form input[type="url"], .tc-form input[type="number"], .tc-form select, .tc-form textarea {
font-family: var(--font-body); font-size: 15px; color: var(--tc-ink); background: #fff; border: 1px solid var(--tc-rule); border-radius: 7px;
padding: 13px 14px; width: 100%; max-width: 100%; transition: border-color 0.16s, box-shadow 0.16s; height: auto; line-height: 1.4;
}
.tc-form input:focus, .tc-form select:focus, .tc-form textarea:focus { outline: none; border-color: var(--tc-red); box-shadow: 0 0 0 3px rgba(181,64,46,0.14); }
.tc-form textarea { resize: vertical; min-height: 130px; }
.tc-form input[type="submit"], .tc-form button[type="submit"], .tc-form .frm_button_submit, .tc-form .gform_button {
display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 700; font-size: 14px; letter-spacing: 0.2em;
text-transform: uppercase; padding: 18px 28px; border-radius: 2px; border: 0; cursor: pointer; background: var(--tc-red); color: #fff; min-width: 200px; transition: background 0.15s;
}
.tc-form input[type="submit"]:hover, .tc-form button[type="submit"]:hover, .tc-form .frm_button_submit:hover, .tc-form .gform_button:hover { background: var(--tc-red-soft); }
.tc-form-note { padding: 22px; border: 2px dashed var(--tc-rule); border-radius: 8px; color: var(--tc-ink-2); font-size: 14px; text-align: center; }
.ppform .tc-form label, .ppform .tc-form .frm_primary_label { color: #fff; }
/* Article blocks (Agencies / long-form pages) — spacing options. */
.article.u-pt0, .agal-wrap.u-pt0 { padding-top: 0; }
.agal-wrap.u-mt0 { margin-top: 0; }
.article.u-pb28 { padding-bottom: 28px; }
.ab-wrap.u-pb18 { padding-bottom: 18px; }
.article h2.u-mt0:not(.article .tc-scope *) { margin-top: 0; }
.pact__eyebrow { color: var(--tc-red-soft); font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
@media (max-width: 640px) { .tc-style-custom-crates .hero--crates .hero__title { font-size: 42px; } .hero__inner > * { min-width: 0; } }
@media (max-width: 640px) {
.tc-el.hstats .hstats__inner { padding: 36px 20px; }
.tc-el.hstats .hstat-n { font-size: 34px; }
.tc-el.hero__stats .hero__stats-inner { grid-template-columns: 1fr 1fr; gap: 24px 12px; padding-left: 20px; padding-right: 20px; }
.tc-el.hero__stats .hero__stats-inner > div { border-right: 0; }
.tc-el.hero__stats .stat-n { font-size: 30px; }
}
/* Red capabilities bar: sticky under the header (same on every design page). */
.tc-subnav { position: sticky; top: 104px; z-index: 49; box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
@media (max-width: 1100px) { .tc-subnav { position: static; top: auto; } .admin-bar .tc-subnav { top: auto; } }
/* Element style scopes are plain wrappers. */
.tc-scope { display: block; }
/* ───────────────────────────── Mobile header + off-canvas menu ───── */
.tc-burger, .tc-drawer, .tc-drawer-overlay { display: none; }
@media (max-width: 1100px) {
.tc-header { grid-template-columns: 1fr auto; height: 76px; position: sticky; top: 0; border-bottom: 4px solid var(--tc-red); }
.admin-bar .tc-header { top: 46px; }
.tc-header__white { clip-path: polygon(0 0, 100% 0, calc(100% - 64px) 100%, 0 100%); padding: 8px 88px 8px 16px; min-width: 0; }
.tc-header__logo img { height: 52px; }
.tc-header__navy { padding: 0 16px; }
.tc-header__nav { display: none; }
.tc-subnav { display: none; }
.tc-burger { display: flex; flex-direction: column; justify-content: center; gap: 7px; width: 44px; height: 44px; padding: 0 6px; background: none; border: 0; cursor: pointer; }
.tc-burger span { display: block; height: 2px; background: #fff; border-radius: 1px; }
.tc-drawer-overlay { display: block; position: fixed; inset: 0; z-index: 300; background: rgba(6,14,28,0.6); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.tc-drawer { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 310; width: min(400px, 87vw); background: var(--tc-blue); transform: translateX(-100%); visibility: hidden; transition: transform 0.3s cubic-bezier(.2,.7,.2,1), visibility 0s 0.3s; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.admin-bar .tc-drawer { top: 46px; }
.tc-menu-open .tc-drawer { transform: none; visibility: visible; transition: transform 0.3s cubic-bezier(.2,.7,.2,1); }
.tc-menu-open .tc-drawer-overlay { opacity: 1; pointer-events: auto; }
.tc-menu-open { overflow: hidden; }
.tc-drawer__head { position: relative; background: #fff; padding: 16px 56px; display: flex; justify-content: center; }
.tc-drawer__logo img { height: 90px; width: auto; }
.tc-drawer__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; }
.tc-drawer__close::before, .tc-drawer__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 2px; background: var(--tc-ink); }
.tc-drawer__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.tc-drawer__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.tc-drawer__body { padding-bottom: 32px; }
.tc-drawer__label { font-family: var(--font-display); font-weight: 900; font-size: 17px; color: var(--tc-red-soft); padding: 22px 16px 14px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.tc-drawer__nav { display: flex; flex-direction: column; }
.tc-drawer__nav a { display: block; padding: 14px 30px; font-family: var(--font-body); font-weight: 500; font-size: 17px; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.1); }
.tc-drawer__nav a:hover { background: rgba(0,0,0,0.14); color: #fff; }
.tc-drawer__nav a.is-current { background: #8E2E20; color: #fff; }
.tc-drawer__phone { display: block; margin: 12px 30px 0; padding: 12px; text-align: center; font-family: var(--font-display); font-weight: 900; font-size: 22px; color: #fff; border: 1px solid rgba(255,255,255,0.22); border-radius: 3px; }
.tc-drawer__phone:hover { background: rgba(255,255,255,0.08); color: #fff; }
}
@media (max-width: 782px) { .admin-bar .tc-header { top: 0; } }
/* Active menu item: deep red (#8E2E20) on every menu. */
/* Top menu: current page = thin red text (no box); hover = red text. */
.tc-header .tc-header__nav a:not(.phone) { transition: color 0.15s; }
.tc-header .tc-header__nav a:not(.phone):hover { color: var(--tc-red-soft); }
.tc-header .tc-header__nav a.is-current:not(.phone) { color: var(--tc-red-soft); font-weight: 400; }
.tc-subnav a.is-current, .tc-subnav a.is-current:hover { background: #8E2E20; color: #fff; }
/* Hero / banner intro (matches the live slider), used on every banner type:
red tag appears and its text slides in, title then text sweep in from the
left, buttons fade in one after the other. Uses the reveal observer, so it
replays on each pass. */
.tc-hero-anim { overflow-x: clip; }
span.tc-a-tagtxt { display: inline-block; }
.tc-js .tc-hero-anim .tc-a-tag,
.tc-js .tc-hero-anim .tc-a-tagtxt,
.tc-js .tc-hero-anim .tc-a-btns .btn,
.tc-js .tc-hero-anim .tc-a-fade { opacity: 0; }
.tc-js .tc-hero-anim .tc-a-tagtxt { transform: translateX(-70px); }
.tc-js .tc-hero-anim .tc-a-title,
.tc-js .tc-hero-anim .tc-a-text { transform: translateX(-100vw); }
.tc-js .tc-hero-anim .tc-a-title .accent,
.tc-js .tc-hero-anim .tc-a-title .dot { opacity: 0.35; }
.tc-js .tc-hero-anim .tc-a-fade { transform: translateY(24px); }
.tc-js .tc-hero-anim.is-in .tc-a-tag { opacity: 1; transition: opacity 0.3s ease 0.1s; }
.tc-js .tc-hero-anim.is-in .tc-a-tagtxt { opacity: 1; transform: none; transition: opacity 0.5s ease 0.3s, transform 0.6s cubic-bezier(.2,.8,.2,1) 0.3s; }
.tc-js .tc-hero-anim.is-in .tc-a-title { transform: none; transition: transform 0.75s cubic-bezier(.2,.8,.2,1) 0.8s; }
.tc-js .tc-hero-anim.is-in .tc-a-text { transform: none; transition: transform 0.75s cubic-bezier(.2,.8,.2,1) 1.05s; }
.tc-js .tc-hero-anim.is-in .tc-a-title .accent,
.tc-js .tc-hero-anim.is-in .tc-a-title .dot { opacity: 1; transition: opacity 0.6s ease 1.55s; }
.tc-js .tc-hero-anim.is-in .tc-a-btns .btn { opacity: 1; transition: opacity 0.5s ease 1.45s, background 0.15s, color 0.15s, transform 0.15s; }
.tc-js .tc-hero-anim.is-in .tc-a-btns .btn + .btn { transition-delay: 1.7s, 0s, 0s, 0s; }
.tc-js .tc-hero-anim.is-in .tc-a-fade { opacity: 1; transform: none; transition: opacity 0.7s ease 1.2s, transform 0.8s cubic-bezier(.2,.8,.2,1) 1.2s; }
@media (prefers-reduced-motion: reduce) {
.tc-js .tc-hero-anim *, .tc-js .tc-hero-anim.is-in * { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* Blog Listing element (filterable, AJAX). */
.tc-style-blog .tc-blog-listing { padding-top: 0; }
.tc-style-blog .tc-blog-listing .cat-strip { position: sticky; top: var(--bl-top, 104px); z-index: 40; background: var(--tc-paper); padding: 26px 0 18px; margin-bottom: 26px; }
.tc-style-blog .tc-blog-listing .cat-chip { cursor: pointer; }
.tc-bl-results { transition: opacity 0.2s ease; }
.tc-bl-results.is-loading { opacity: 0.45; pointer-events: none; }
.tc-style-blog .tc-bl-feat { margin-bottom: 28px; }
.tc-bl-more { text-align: center; margin-top: 44px; }
.tc-bl-more .btn[disabled] { opacity: 0.6; cursor: wait; }
.tc-style-blog .post-grid--c2 { grid-template-columns: repeat(2, 1fr); }
.tc-style-blog .post-grid--c4 { grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1100px) {
.tc-style-blog .post-grid--c4 { grid-template-columns: repeat(2, 1fr); }
.tc-style-blog .tc-blog-listing .cat-strip { padding: 16px 0 12px; margin-bottom: 20px; }
}
@media (max-width: 640px) {
.tc-style-blog .post-grid--c2, .tc-style-blog .post-grid--c4 { grid-template-columns: 1fr; }
.tc-style-blog .tc-blog-listing .cat-bar { gap: 7px; }
}
/* Stat strip sits directly under the banner (no gap). */
.hero__stats { margin-top: 0; }
/* Lightbox gallery navigation + counter. */
.lightbox__cap { display: flex; flex-direction: column; gap: 4px; }
.lightbox__count { font-weight: 500; font-size: 12px; letter-spacing: 0.04em; color: rgba(255,255,255,0.7); }
.lightbox__count:empty { display: none; }
.lightbox__nav { display: none; position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); cursor: pointer; z-index: 2; }
.lightbox__nav::before { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border: solid #fff; border-width: 0 2px 2px 0; }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--prev::before { transform: translate(-30%, -50%) rotate(135deg); }
.lightbox__nav--next { right: 24px; }
.lightbox__nav--next::before { transform: translate(-70%, -50%) rotate(-45deg); }
.lightbox__nav:hover { background: rgba(255,255,255,0.22); }
.lightbox.has-nav .lightbox__nav { display: block; }
@media (max-width: 640px) {
.lightbox { padding: 48px 12px 72px; }
.lightbox__nav { top: auto; bottom: 14px; margin-top: 0; width: 44px; height: 44px; }
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }
.lightbox__cap { bottom: 18px; padding: 0 70px; }
}
/* Portfolio Gallery (masonry + filter). */
.pgal__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pgal__filter button { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1; color: var(--tc-ink); background: transparent; border: 1px solid var(--tc-ink-2); border-radius: 2px; padding: 9px 13px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.pgal__filter button:hover, .pgal__filter button.is-active { color: var(--tc-red); border-color: var(--tc-red); }
.pgal__grid { --pgal-cols: 4; --pgal-gap: 6px; display: grid; grid-template-columns: repeat(var(--pgal-cols), 1fr); gap: var(--pgal-gap); align-items: start; }
.pgal--c2 .pgal__grid { --pgal-cols: 2; }
.pgal--c3 .pgal__grid { --pgal-cols: 3; }
.pgal--c5 .pgal__grid { --pgal-cols: 5; }
@media (max-width: 1100px) { .pgal--c4 .pgal__grid, .pgal--c5 .pgal__grid { --pgal-cols: 3; } }
@media (max-width: 760px) { .pgal__grid, .pgal--c3 .pgal__grid, .pgal--c4 .pgal__grid, .pgal--c5 .pgal__grid { --pgal-cols: 2; } }
.pgal__grid.is-masonry { display: block; position: relative; }
.pgal__grid.is-masonry .pgal__item { position: absolute; top: 0; left: 0; }
.pgal__grid.is-ready .pgal__item { transition: transform 0.5s cubic-bezier(.2,.7,.2,1), opacity 0.4s ease; }
.pgal__grid.is-ready { transition: height 0.5s cubic-bezier(.2,.7,.2,1); }
.pgal__item { display: block; position: relative; overflow: hidden; background: #fff; border: 1px solid rgba(99,136,198,0.45); color: inherit; text-decoration: none; }
.pgal__item.is-out { opacity: 0; pointer-events: none; }
.pgal__item img { display: block; width: 100%; height: auto; }
.pgal__over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; text-align: center; background: rgba(255,255,255,0.8); opacity: 0; transition: opacity 0.3s ease; }
.pgal__item:hover .pgal__over, .pgal__item:focus-visible .pgal__over { opacity: 1; }
.pgal__title { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.15; letter-spacing: 0.01em; text-transform: uppercase; color: var(--tc-ink); }
.pgal__text { font-size: 13px; line-height: 1.45; color: var(--tc-ink-2); }
@media (prefers-reduced-motion: reduce) { .pgal__grid.is-ready, .pgal__grid.is-ready .pgal__item { transition: none; } }
/* Red service bar spans the full content width (logo edge to phone edge). */
.tc-subnav__inner { justify-content: space-between; }
@media (min-width: 1101px) and (max-width: 1360px) { .tc-subnav a { padding-left: 12px; padding-right: 12px; font-size: 16px; } }
/* One look per element on every page: columns follow the number of items. */
@media (min-width: 1101px) {
.tc-scope .cap-grid.cap-grid--n2, .tc-scope .cap-grid.cap-grid--n4 { grid-template-columns: repeat(2, 1fr); }
.tc-scope .markets.markets--n2 { grid-template-columns: repeat(2, 1fr); }
.tc-scope .markets.markets--n3 { grid-template-columns: repeat(3, 1fr); }
}
/* Stat strip "Clean": white numbers, centered, no dividers, any number of stats. */
.tc-scope .hero__stats--clean .hero__stats-inner { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.tc-scope .hero__stats--clean .hero__stats-inner > div { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 0; padding: 0; }
.tc-scope .hero__stats--clean .hero__stats-inner > div::after { display: none; }
.tc-scope .hero__stats--clean .stat-n { color: #fff; }
@media (max-width: 640px) {
.tc-scope .hero__stats--clean .hero__stats-inner { grid-auto-flow: row; grid-template-columns: 1fr; gap: 22px; }
}
/* Competency card with a description. */
.tc-scope .cc-card.cc-card--desc h3 { flex: none; font-size: 22px; }
.tc-scope .cc-card__text { flex: 1; font-size: 15px; line-height: 1.6; color: var(--tc-ink-2); margin: 0 0 12px; }
/* Competency cards: cards per row (desktop). */
@media (min-width: 1101px) {
.tc-scope .cc-grid.cc-grid--c2 { grid-template-columns: repeat(2, 1fr); }
.tc-scope .cc-grid.cc-grid--c3 { grid-template-columns: repeat(3, 1fr); }
.tc-scope .cc-grid.cc-grid--c4 { grid-template-columns: repeat(4, 1fr); }
.tc-scope .cc-grid.cc-grid--c5 { grid-template-columns: repeat(5, 1fr); }
}
/* Client Work columns: aligned rows (equal height per row). */
.tc-scope .pp-cols { columns: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 32px; }
.tc-scope .pp-cols .pp-block { margin-bottom: 0; }
@media (min-width: 1101px) {
.tc-scope .pp-cols--r1 { grid-auto-flow: column; grid-template-rows: repeat(1, auto); }
.tc-scope .pp-cols--r2 { grid-auto-flow: column; grid-template-rows: repeat(2, auto); }
.tc-scope .pp-cols--r3 { grid-auto-flow: column; grid-template-rows: repeat(3, auto); }
.tc-scope .pp-cols--r4 { grid-auto-flow: column; grid-template-rows: repeat(4, auto); }
.tc-scope .pp-cols--r5 { grid-auto-flow: column; grid-template-rows: repeat(5, auto); }
.tc-scope .pp-cols--r6 { grid-auto-flow: column; grid-template-rows: repeat(6, auto); }
.tc-scope .pp-cols--r7 { grid-auto-flow: column; grid-template-rows: repeat(7, auto); }
.tc-scope .pp-cols--r8 { grid-auto-flow: column; grid-template-rows: repeat(8, auto); }
.tc-scope .pp-cols--r9 { grid-auto-flow: column; grid-template-rows: repeat(9, auto); }
.tc-scope .pp-cols--r10 { grid-auto-flow: column; grid-template-rows: repeat(10, auto); }
.tc-scope .pp-cols--r11 { grid-auto-flow: column; grid-template-rows: repeat(11, auto); }
.tc-scope .pp-cols--r12 { grid-auto-flow: column; grid-template-rows: repeat(12, auto); }
}
@media (max-width: 1100px) { .tc-scope .pp-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tc-scope .pp-cols { grid-template-columns: 1fr; } }
/* Story + Video: story left, video right. Phones/tablets keep the video on top. */
@media (min-width: 1101px) {
.tc-scope .story.story--rev { grid-template-columns: 0.95fr 1.05fr; }
.tc-scope .story.story--rev .story__media { order: 2; }
}
/* Story + Video: video vertical alignment (side-by-side layout). */
.tc-scope .story.story--al-top { align-items: start; }
.tc-scope .story.story--al-bottom { align-items: end; }
/* Footer widget areas. */
.tc-footer__col--2 .tc-footer__certs { justify-content: flex-end; }
.tc-footer__certs--h40 .cert img { height: 40px; }
.tc-footer__certs--h60 .cert img { height: 60px; }
.tc-footer__certs--h72 .cert img { height: 72px; }
.tc-footer__certs:not([class*="--h"]) .cert:not([class*="cert--"]) img { height: 51px; }
.tc-footer__certs .cert a { display: block; }
.tc-footer__clients-list a { display: flex; align-items: center; justify-content: center; height: 100%; }
@media (max-width: 1100px) { .tc-footer__col--2 .tc-footer__certs { justify-content: flex-start; } }
/* Single blog post: banner text, article and share bar use the site container width. */
.single-post.tc-style-blog .ahero__inner,
.single-post.tc-style-blog .article,
.single-post.tc-style-blog .ashare { max-width: 1380px; padding-left: 56px; padding-right: 56px; }
@media (max-width: 1100px) {
.single-post.tc-style-blog .ahero__inner,
.single-post.tc-style-blog .article,
.single-post.tc-style-blog .ashare { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 640px) {
.single-post.tc-style-blog .ahero__inner,
.single-post.tc-style-blog .article,
.single-post.tc-style-blog .ashare { padding-left: 24px; padding-right: 24px; }
}
/* Single blog post: no extra article/gallery padding or width limit. */
.single-post.tc-style-blog .article { padding-top: 0; padding-bottom: 0; }
.single-post.tc-style-blog .agal-wrap { max-width: none; margin: 0; padding: 0; }
/* Single blog post content: line up left with the container and trim spacing.
Post content imported from the old site wraps sections in .container
(and WPBakery rows) — inside the article those must not add more padding. */
.single-post .article .container:not(.article .tc-scope *) { max-width: none; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
.single-post .article .vc_row.vc_row-fluid > .vc_column_container:only-child > .vc_column-inner:not(.article .tc-scope *) { padding-left: 0; padding-right: 0; }
.single-post .article .vc_row.vc_row-fluid:has(> .vc_column_container:only-child):not(.article .tc-scope *) { margin-left: 0; margin-right: 0; }
.single-post .article .entry-content > :last-child:not(.article .tc-scope *),
.single-post .article .entry-content > .vc_row:last-child .wpb_content_element:last-child:not(.article .tc-scope *),
.single-post .article .entry-content > .vc_row:last-child .wpb_wrapper > :last-child:not(.article .tc-scope *),
.single-post .article .entry-content p:last-child:not(.article .tc-scope *) { margin-bottom: 0; }
.single-post.tc-style-blog .ashare { padding-top: 40px; }
/* Category bar on single posts / archives sticks under the header like the listing. */
.tc-style-blog .cat-strip:not(.tc-blog-listing .cat-strip) { position: sticky; top: var(--tc-stick-top, 104px); z-index: 40; background: var(--tc-paper); padding: 22px 0 18px; margin-bottom: 35px; }
/* Article gallery: images fill their tile (beats the post content img { height: auto } rule). */
.tc-style-blog .agal figure img { height: 100% !important; }
/* Article gallery: 1–6 columns (tablet max 3, phone max 2). */
.tc-style-blog .agal--1 { grid-template-columns: 1fr; }
.tc-style-blog .agal--2 { grid-template-columns: repeat(2, 1fr); }
.tc-style-blog .agal--6 { grid-template-columns: repeat(6, 1fr); }
.tc-style-blog .agal--1 figure { aspect-ratio: 16 / 9; }
@media (max-width: 1100px) {
.tc-style-blog .agal--4, .tc-style-blog .agal--5, .tc-style-blog .agal--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.tc-style-blog .agal--3, .tc-style-blog .agal--4, .tc-style-blog .agal--5, .tc-style-blog .agal--6 { grid-template-columns: repeat(2, 1fr); }
}
/* FAQ answers: paragraphs and links. */
.tc-scope .faq-a__inner p, .faq-a__inner p { font-size: inherit; line-height: inherit; color: inherit; margin: 0 0 12px; }
.faq-a__inner p:last-child { margin-bottom: 0; }
.faq-a__inner a { color: var(--tc-red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.faq-a__inner a:hover { color: var(--tc-red-deep); }
.faq-a__inner strong { color: var(--tc-ink); }
/* Video Thumbnails element. */
.vthumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.vthumbs--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vthumbs--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vthumbs--c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .vthumbs, .vthumbs--c3, .vthumbs--c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vthumbs, .vthumbs--c2, .vthumbs--c3, .vthumbs--c5 { grid-template-columns: 1fr; } }
.vthumb { margin: 0; cursor: pointer; }
.vthumb__media { position: relative; aspect-ratio: 1.07 / 1; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 10px 26px rgba(15, 30, 60, 0.14); }
.vthumb__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.vthumb:hover .vthumb__media img { transform: scale(1.04); }
.vthumb__play { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: rgba(255,255,255,0.94); box-shadow: 0 6px 18px rgba(0,0,0,0.25); transition: transform 0.2s ease; }
.vthumb__play::before { content: ""; position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -6px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--tc-red); }
.vthumb:hover .vthumb__play, .vthumb:focus-visible .vthumb__play { transform: scale(1.08); }
.vthumb__cap { margin-top: 12px; text-align: center; font-size: 14.5px; line-height: 1.4; color: var(--tc-ink-2); }
.section--navy .vthumb__cap { color: var(--tc-steel-300); }
.vmodal__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
/* Pop-up player: hide the MP4 player while a YouTube/Vimeo video is shown. */
.vmodal video[hidden] { display: none !important; }
/* TECHCOM elements inside a blog post (not in a stretched row): the article
already has the side padding, so the element's container adds none. */
.single-post .article .vc_row:not([data-vc-full-width]) .tc-scope .container { max-width: none; padding-left: 0; padding-right: 0; }
/* Widget: TECHCOM Category Posts (card like the "Recent Posts" box). */
.tc-catposts { background: var(--tc-paper-white); border: 1px solid var(--tc-rule); border-radius: 12px; padding: 26px 20px 20px; }
.tc-catposts__title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--tc-red); margin: 0 0 14px; }
.tc-catposts__list { list-style: none; margin: 0; padding: 0; }
.tc-catposts__list li { padding: 13px 0; border-bottom: 1px solid rgba(15, 30, 60, 0.12); margin: 0; }
.tc-catposts__list li::before { display: none; }
.tc-catposts__list li:first-child { padding-top: 0; }
.tc-catposts__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.tc-catposts__list a { display: block; font-size: 16px; line-height: 1.62; font-weight: 400; color: var(--tc-ink); text-decoration: none; border: 0; transition: color 0.15s; }
.tc-catposts__list a:hover { color: var(--tc-red); }
.tc-catposts__date { display: block; margin-top: 4px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tc-ink-2); }
.tc-widget + .tc-widget { margin-top: 24px; }
/* Element: Button. */
.tc-btnwrap { margin: 0 0 20px; }
.tc-btnwrap--center { text-align: center; }
.tc-btnwrap--right { text-align: right; }
.tc-scope .tc-btn, .tc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 6px; border: 2px solid transparent; font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none; text-align: center; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; }
.tc-btn--full { display: flex; width: 100%; }
.tc-btn--red { background: var(--tc-red); color: #fff; }
.tc-btn--red:hover { background: var(--tc-red-deep); color: #fff; }
.tc-btn--navy { background: var(--tc-navy-900); color: #fff; }
.tc-btn--navy:hover { background: var(--tc-blue); color: #fff; }
.tc-btn--outline { background: transparent; color: var(--tc-ink); border-color: var(--tc-ink); }
.tc-btn--outline:hover { background: var(--tc-ink); color: #fff; }
.tc-btn--outline-light { background: transparent; color: #fff; border-color: #fff; }
.tc-btn--outline-light:hover { background: #fff; color: var(--tc-navy-900); }
.tc-catposts-wrap { margin: 0 0 24px; }
.u-pt40 { padding-top: 40px; }
/* Single post: a Text Block that starts with a heading has no gap above it. */
.single-post .article .wpb_text_column .wpb_wrapper > h2:first-child:not(.article .tc-scope *) { margin-top: 0; }
/* Archive / search / 404 pages. */
.bhero .tc-search-form { margin: 26px 0 0; max-width: 560px; }
.bhero .tc-search-form input[type="search"] { border-color: transparent; border-radius: 4px; }
.bhero .tc-search-form .btn { border-radius: 4px; }
.tc-arch-avatar-wrap { margin: 18px 0 4px; }
.tc-arch-avatar { width: 72px; height: 72px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.85); display: block; }
.tc-archive .tc-arch-count, .tc-arch-count { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tc-ink-2); margin: 0 0 22px; }
.tc-style-blog .tc-archive, .tc-style-blog .tc-404 { padding-top: 40px; }
.pcard--result .pcard__media { background: var(--tc-paper-soft); }
.pcard__logo { position: absolute; inset: 0; background: url('../images/techcom-logo.png') center / 42% auto no-repeat; opacity: 0.9; }
.tc-quicklinks { text-align: center; margin: 10px 0 30px; }
.tc-quicklinks__label { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tc-red); margin: 0 0 14px; }
.tc-style-blog .tc-quicklinks__bar { margin-bottom: 0; }
.tc-404__actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 0 0 70px; }
.tc-404__latest { border-top: 1px solid var(--tc-rule); padding-top: 60px; }
.tc-search .cat-empty, .tc-404 .cat-empty { padding-bottom: 30px; }
@media (max-width: 640px) {
.bhero .tc-search-form { flex-direction: column; }
.tc-404__actions .tc-btn { width: 100%; }
}
/* Element padding control (Section tab → Top / Bottom padding). */
.tc-scope.tc-pt-none > * { padding-top: 0 !important; }
.tc-scope.tc-pt-xs > * { padding-top: 20px !important; }
.tc-scope.tc-pt-sm > * { padding-top: 40px !important; }
.tc-scope.tc-pt-md > * { padding-top: 72px !important; }
.tc-scope.tc-pt-lg > * { padding-top: 100px !important; }
.tc-scope.tc-pt-xl > * { padding-top: 140px !important; }
.tc-scope.tc-pb-none > * { padding-bottom: 0 !important; }
.tc-scope.tc-pb-xs > * { padding-bottom: 20px !important; }
.tc-scope.tc-pb-sm > * { padding-bottom: 40px !important; }
.tc-scope.tc-pb-md > * { padding-bottom: 72px !important; }
.tc-scope.tc-pb-lg > * { padding-bottom: 100px !important; }
.tc-scope.tc-pb-xl > * { padding-bottom: 140px !important; }
@media (max-width: 640px) {
.tc-scope.tc-pt-md > * { padding-top: 48px !important; }
.tc-scope.tc-pt-lg > * { padding-top: 60px !important; }
.tc-scope.tc-pt-xl > * { padding-top: 76px !important; }
.tc-scope.tc-pb-md > * { padding-bottom: 48px !important; }
.tc-scope.tc-pb-lg > * { padding-bottom: 60px !important; }
.tc-scope.tc-pb-xl > * { padding-bottom: 76px !important; }
}