/*
Theme Name: Trademark Composites
Theme URI: https://inforplast.com/tmc/
Author: Trademark Composites
Description: Custom one-page WordPress theme for Trademark Composites.
Version: 1.0.0
Text Domain: trademark-composites
*/

:root {
  --tmc-blue: #123e8a;
  --tmc-deep: #071f4e;
  --tmc-red: #d7193f;
  --tmc-ink: #101728;
  --tmc-muted: #667085;
  --tmc-paper: #f3f6fb;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--tmc-ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
img { height: auto; max-width: 100%; }
.screen-reader-text { clip: rect(1px,1px,1px,1px); height: 1px; overflow: hidden; position: absolute; width: 1px; }

.tmc-header {
  align-items: center; background: rgba(255,255,255,.97); display: grid;
  grid-template-columns: 1fr auto 1fr; height: 88px; padding: 0 clamp(24px,5vw,78px);
  position: absolute; top: 0; width: 100%; z-index: 20;
}
.tmc-brand { align-items: center; display: flex; gap: 12px; width: max-content; }
.tmc-brand-mark {
  align-items: center; background: var(--tmc-blue); color: #fff; display: flex;
  font-size: 15px; font-weight: 900; height: 42px; justify-content: center;
  letter-spacing: -.06em; position: relative; transform: skew(-8deg); width: 46px;
}
.tmc-brand-mark::after { background: var(--tmc-red); bottom: 0; content: ""; height: 5px; left: 0; position: absolute; width: 100%; }
.tmc-brand-text { display: flex; flex-direction: column; line-height: .95; }
.tmc-brand-text strong { color: var(--tmc-deep); font-size: 18px; letter-spacing: .13em; }
.tmc-brand-text small { color: var(--tmc-red); font-size: 10px; font-weight: 800; letter-spacing: .35em; margin-top: 6px; }
.custom-logo { max-height: 62px; width: auto; }
.tmc-menu { display: flex; gap: clamp(24px,3vw,48px); list-style: none; margin: 0; padding: 0; }
.tmc-menu a { border-bottom: 2px solid transparent; display: block; font-size: 12px; font-weight: 800; letter-spacing: .17em; padding: 34px 0 30px; text-transform: uppercase; }
.tmc-menu a:hover { border-color: var(--tmc-red); color: var(--tmc-blue); }
.tmc-header-cta { border: 2px solid var(--tmc-blue); font-size: 11px; font-weight: 800; justify-self: end; letter-spacing: .13em; padding: 14px 20px; text-transform: uppercase; }
.tmc-header-cta:hover { background: var(--tmc-blue); color: #fff; }

.tmc-hero {
  align-items: center; background-color: var(--tmc-deep); background-position: center;
  background-size: cover; color: #fff; display: flex; min-height: 780px; overflow: hidden;
  padding: 150px clamp(24px,8vw,130px) 90px; position: relative;
}
.tmc-hero::before { background: linear-gradient(90deg,rgba(7,31,78,.98),rgba(7,31,78,.88) 46%,rgba(7,31,78,.28)); content: ""; inset: 0; position: absolute; }
.tmc-hero::after { background: var(--tmc-red); content: ""; height: 4px; left: 0; position: absolute; top: 88px; width: 36%; }
.tmc-hero-content { max-width: 940px; position: relative; z-index: 2; }
.tmc-eyebrow,.tmc-kicker { color: var(--tmc-red); font-size: 12px; font-weight: 900; letter-spacing: .35em; margin: 0 0 22px; text-transform: uppercase; }
.tmc-eyebrow { color: #fff; padding-left: 54px; position: relative; }
.tmc-eyebrow::before { background: var(--tmc-red); content: ""; height: 3px; left: 0; position: absolute; top: 6px; width: 36px; }
.tmc-hero h1 { font-size: clamp(58px,7.8vw,116px); font-weight: 800; letter-spacing: -.055em; line-height: .84; margin: 0; }
.tmc-hero-subtitle { font-size: clamp(18px,2vw,29px); font-weight: 300; letter-spacing: .03em; margin: 36px 0 42px; }
.tmc-hero-subtitle span { color: var(--tmc-red); padding: 0 12px; }
.tmc-button { align-items: center; border: 0; cursor: pointer; display: inline-flex; font-size: 11px; font-weight: 900; gap: 18px; justify-content: center; letter-spacing: .18em; padding: 18px 24px; text-transform: uppercase; }
.tmc-button-red { background: var(--tmc-red); color: #fff; }
.tmc-button-red:hover { background: #b60d30; }
.tmc-button-blue { background: var(--tmc-blue); color: #fff; }
.tmc-button-blue:hover { background: var(--tmc-deep); }

.tmc-section-heading { margin: 0 auto 60px; max-width: 760px; text-align: center; }
.tmc-section-heading h2,.tmc-photos-copy h2 { color: var(--tmc-deep); font-size: clamp(36px,4.3vw,62px); letter-spacing: -.04em; line-height: 1; margin: 0 0 20px; }
.tmc-section-heading p:last-child,.tmc-photos-copy p { color: var(--tmc-muted); font-size: 17px; line-height: 1.7; }
.tmc-capabilities { padding: 100px clamp(24px,7vw,110px) 110px; }
.tmc-cards { display: grid; gap: 1px; grid-template-columns: repeat(3,1fr); margin: auto; max-width: 1200px; }
.tmc-card { background: var(--tmc-paper); min-height: 300px; padding: 44px 38px; position: relative; transition: .25s ease; }
.tmc-card:hover { background: var(--tmc-blue); color: #fff; transform: translateY(-8px); }
.tmc-card-number { color: #9aa8bd; font-size: 11px; font-weight: 900; letter-spacing: .2em; }
.tmc-card h3 { color: var(--tmc-deep); font-size: 24px; margin: 72px 0 16px; }
.tmc-card p { color: var(--tmc-muted); font-size: 15px; line-height: 1.7; margin: 0; }
.tmc-card:hover h3,.tmc-card:hover p,.tmc-card:hover .tmc-card-number { color: #fff; }

.tmc-about { background: var(--tmc-deep); color: #fff; display: grid; gap: 90px; grid-template-columns: .75fr 1.25fr; padding: 110px clamp(24px,8vw,130px); position: relative; }
.tmc-about::after { background: var(--tmc-red); content: ""; height: 6px; left: 0; position: absolute; top: 0; width: 32%; }
.tmc-about h2 { font-size: clamp(42px,4.8vw,70px); letter-spacing: -.045em; line-height: 1.05; margin: 0; }
.tmc-about-copy .lead { font-size: 23px; line-height: 1.55; margin: 0 0 28px; }
.tmc-about-copy > p:not(.lead) { color: #c5d0e2; line-height: 1.75; }
.tmc-materials { border-bottom: 1px solid rgba(255,255,255,.16); border-top: 1px solid rgba(255,255,255,.16); display: grid; gap: 34px; grid-template-columns: 1fr 1fr; margin: 38px 0 24px; padding: 30px 0; }
.tmc-materials h3 { font-size: 13px; letter-spacing: .1em; margin: 0 0 10px; text-transform: uppercase; }
.tmc-materials p { color: #aebdd3; font-size: 14px; line-height: 1.7; margin: 0; }
.tmc-note { color: #fff!important; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }

.tmc-photos { align-items: center; display: grid; gap: 70px; grid-template-columns: .8fr 1.2fr; padding: 110px clamp(24px,8vw,130px); }
.tmc-photos-copy p { margin-bottom: 32px; }
.tmc-gallery { display: grid; gap: 12px; grid-template-columns: repeat(2,1fr); min-height: 420px; }
.tmc-gallery img { height: 204px; object-fit: cover; width: 100%; }
.tmc-gallery-empty { align-items: center; background: repeating-linear-gradient(135deg,#345684 0 3px,#162f53 3px 10px); color: #fff; display: flex; flex-direction: column; grid-column: 1/-1; justify-content: center; min-height: 420px; padding: 40px; text-align: center; }
.tmc-gallery-empty strong { font-size: 24px; margin-bottom: 12px; }

.tmc-quote { background: var(--tmc-paper); display: grid; gap: 80px; grid-template-columns: .75fr 1.25fr; padding: 110px clamp(24px,8vw,130px); }
.tmc-quote-intro h2 { color: var(--tmc-deep); font-size: clamp(44px,5vw,72px); letter-spacing: -.05em; line-height: .98; margin: 0 0 26px; }
.tmc-quote-intro p:not(.tmc-kicker) { color: var(--tmc-muted); font-size: 17px; line-height: 1.7; }
.tmc-quote-intro a { color: var(--tmc-blue); display: inline-block; font-weight: 800; margin-top: 18px; }
.tmc-form { background: #fff; box-shadow: 0 24px 70px rgba(16,31,60,.12); display: flex; flex-direction: column; gap: 20px; padding: 44px; }
.tmc-form-heading { align-items: baseline; border-bottom: 1px solid #dfe5ef; display: flex; justify-content: space-between; margin-bottom: 4px; padding-bottom: 22px; }
.tmc-form-heading strong { color: var(--tmc-deep); font-size: 28px; }
.tmc-form-heading small { color: var(--tmc-muted); }
.tmc-fields-two { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.tmc-form label { color: var(--tmc-deep); display: flex; flex-direction: column; font-size: 10px; font-weight: 900; gap: 8px; letter-spacing: .09em; text-transform: uppercase; }
.tmc-form input,.tmc-form textarea { background: #f8f9fc; border: 1px solid #cad3df; border-radius: 0; color: var(--tmc-ink); font: 16px Arial,sans-serif; outline: none; padding: 14px; text-transform: none; }
.tmc-form input:focus,.tmc-form textarea:focus { border-color: var(--tmc-blue); box-shadow: 0 0 0 3px rgba(18,62,138,.12); }
.tmc-form textarea { resize: vertical; }
.tmc-form .tmc-button { align-self: flex-start; }
.tmc-notice { border-left: 4px solid var(--tmc-blue); margin-bottom: 18px; padding: 12px 15px; }
.tmc-notice.error { border-color: var(--tmc-red); }

.tmc-footer { align-items: center; background: #061735; color: #fff; display: grid; gap: 30px; grid-template-columns: 1fr auto 1fr; padding: 46px clamp(24px,6vw,90px); }
.tmc-footer .tmc-brand-text strong { color: #fff; }
.tmc-footer p { color: #94a4bf; font-size: 11px; text-align: center; }
.tmc-footer-menu { display: flex; gap: 24px; justify-self: end; list-style: none; margin: 0; padding: 0; }
.tmc-footer-menu a { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tmc-copyright { color: #687b9b; font-size: 10px; grid-column: 1/-1; text-align: center; }

@media(max-width:920px) {
  .tmc-header { grid-template-columns: 1fr auto; }
  .tmc-header nav { display: none; }
  .tmc-cards { grid-template-columns: 1fr; }
  .tmc-about,.tmc-photos,.tmc-quote { gap: 48px; grid-template-columns: 1fr; }
  .tmc-footer { grid-template-columns: 1fr; text-align: center; }
  .tmc-footer .tmc-brand,.tmc-footer-menu { justify-self: center; }
}
@media(max-width:600px) {
  .tmc-header { height: 76px; padding: 0 18px; }
  .tmc-header-cta { font-size: 9px; padding: 11px; }
  .tmc-brand-text strong { font-size: 13px; }
  .tmc-hero { min-height: 650px; padding: 130px 22px 70px; }
  .tmc-hero::after { top: 76px; }
  .tmc-hero h1 { font-size: 48px; }
  .tmc-capabilities,.tmc-about,.tmc-photos,.tmc-quote { padding: 76px 22px; }
  .tmc-materials,.tmc-fields-two { grid-template-columns: 1fr; }
  .tmc-form { padding: 28px 20px; }
  .tmc-form-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } * { transition: none!important; } }