/* TECHWEAVE — static site styles */
/* @import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Oswald:wght@400;500&display=swap"); */
/* barlow-regular - latin */
@font-face { font-display: swap; font-family: 'Barlow'; font-style: normal; font-weight: 400; src: url('fonts/barlow-v13-latin-regular.woff2') format('woff2'); }
/* barlow-500 - latin */
@font-face { font-display: swap; font-family: 'Barlow'; font-style: normal; font-weight: 500; src: url('fonts/barlow-v13-latin-500.woff2') format('woff2'); }
/* barlow-600 - latin */
@font-face { font-display: swap; font-family: 'Barlow'; font-style: normal; font-weight: 600; src: url('fonts/barlow-v13-latin-600.woff2') format('woff2'); }
/* oswald-regular - latin */
@font-face { font-display: swap; font-family: 'Oswald'; font-style: normal; font-weight: 400; src: url('fonts/oswald-v57-latin-regular.woff2') format('woff2'); }
/* oswald-500 - latin */
@font-face { font-display: swap; font-family: 'Oswald'; font-style: normal; font-weight: 500; src: url('fonts/oswald-v57-latin-500.woff2') format('woff2'); }

:root {
  --color-background: #ffffff;
  --color-foreground: #004752;
  --color-ink: #3a5242;
  --color-primary: #3a5242;
  --color-primary-foreground: #ffffff;
  --color-secondary: #2d3f32;
  --color-muted: #f5f6f4;
  --color-accent: #5faa70;
  --color-technical: #2c576a;
  --color-divider: #058224;
  --color-border: #e2e8ea;
  --font-sans: "Barlow", system-ui, sans-serif;
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --container-max: 76rem;

  /* Default tone (light sections) */
  --tone-eyebrow: var(--color-technical);
  --tone-title: var(--color-ink);
  --tone-lead: var(--color-foreground);
  --tone-body: oklch(36.5% .064 212.2);
  --tone-muted: rgba(0, 71, 82, 0.7);
  --tone-soft: rgba(0, 71, 82, 0.6);
  --tone-label: var(--color-technical);
  --tone-code: var(--color-technical);
  --tone-link: rgba(0, 71, 82, 0.7);
  --tone-link-hover: var(--color-ink);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--color-background); color: var(--color-foreground); font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; scroll-behavior:smooth; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; line-height:1; margin: 0; }
p { margin: 0; }
/* Tone contexts — parent classes for color variants */
.tone-hero { --tone-eyebrow: var(--color-accent); --tone-title: var(--color-primary-foreground); --tone-lead: rgba(255, 255, 255, 0.85); }
.tone-dark { --tone-eyebrow: var(--color-accent); --tone-title: var(--color-primary-foreground); --tone-lead: rgba(255, 255, 255, 0.8); --tone-body: rgba(255, 255, 255, 0.75); --tone-muted: rgba(255, 255, 255, 0.7); --tone-soft: rgba(255, 255, 255, 0.6); --tone-label: var(--color-accent); --tone-code: var(--color-accent); --tone-link: rgba(255, 255, 255, 0.75); --tone-link-hover: var(--color-primary-foreground); }
.tone-foot { --tone-lead: rgba(255, 255, 255, 0.7); --tone-body: rgba(255, 255, 255, 0.8); --tone-muted: rgba(255, 255, 255, 0.6); --tone-label: var(--color-accent); --tone-link: rgba(255, 255, 255, 0.8); --tone-link-hover: var(--color-primary-foreground); }
.tone-form { --tone-label: var(--color-accent); --tone-soft: rgba(255, 255, 255, 0.6); --tone-link: rgba(255, 255, 255, 0.75); --tone-link-hover: var(--color-primary-foreground); }
/* Typography — shared font sizes */
.type-eyebrow { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--tone-eyebrow); }
.type-eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--color-divider); flex: none; }
.type-h1 { margin-top: 1.25rem; max-width: 48rem; font-size: 2.25rem; font-weight: 500; color: var(--tone-title); }
@media (min-width: 640px) {
.type-h1 { font-size: 3rem; }
.type-h1.product-head { font-size:3rem; }
}
@media (min-width: 768px) {
.type-h1 { font-size: 3.75rem; }
.type-h1.product-head { font-size: 3.75rem; }
}
@media (min-width: 1024px) {
.type-h1 { font-size: 4.5rem; }
}
.type-h2, .main-content-sec .whysybx h1 { margin-top: 1.25rem; max-width: 48rem; font-size: 1.875rem; font-weight: 500; color: var(--tone-title); }
@media (min-width: 640px) {
.type-h2, .main-content-sec .whysybx h1 { font-size: 2.25rem; }
}
@media (min-width: 768px) {
.type-h2, .main-content-sec .whysybx h1 { font-size: 3rem; }
}
.type-subh2 { margin-top: 0.5rem; font-size: 1.5rem; font-weight: 500; color: var(--tone-title); }
@media (min-width: 640px) {
.type-subh2 { font-size: 1.875rem; }
.prod-card .type-subh2 { font-size: 1.5rem; }
}
.type-h3 { font-size: 1rem; font-weight: 500; color: var(--tone-title); }
@media (min-width: 640px) {
.type-h3 { font-size: 1.125rem; }
}
.type-lead { font-size: 1rem; line-height: 1.625; color: var(--tone-lead); line-height:calc(1.75 / 1.125); }
@media (min-width: 640px) {
.type-lead { font-size: 1.125rem; }
}
.type-biglead { font-size: 1.125rem; line-height: 1.625; color: var(--tone-lead); }
.type-body { font-size: 0.875rem; line-height: 1.625; color: var(--tone-body); }
.type-muted { font-size: 0.875rem; line-height: 1.625; color: var(--tone-muted); }
.type-label { font-family: var(--font-sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--tone-label); }
.type-caps { font-family: var(--font-display); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; line-height:1.333; }
.type-capwide { font-family: var(--font-display); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; }
.type-captight { font-family: var(--font-sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; }
.type-lang { font-family: var(--font-display); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; }
.type-code { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--tone-code); }
.type-num { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.2em; color: var(--tone-code); }
.type-quote { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; line-height: 1.2; color: var(--tone-title); }
@media (min-width: 640px) {
.type-quote { font-size: 1.5rem; }
}
.type-xs { font-size: 0.75rem; line-height: 1.625; color: var(--tone-soft); }
.type-card { margin-top: 0.75rem; font-family: var(--font-display); font-size: 1rem; text-transform: uppercase; line-height: 1.2; color: var(--tone-title); }
.type-xl { font-size: 1.25rem; font-weight: 500; color: var(--tone-title); }
.type-statval { font-family: var(--font-display); font-size: 3.75rem; font-weight: 600; text-transform: uppercase; line-height: 1; color: var(--color-ink); }
@media (min-width: 640px) {
.type-statval { font-size: 4.5rem; }
}
.type-format { font-family: var(--font-display); font-size: 1.875rem; text-transform: uppercase; color: var(--color-ink); }
@media (min-width: 640px) {
.type-format { font-size: 2.25rem; }
}
.type-stepnum { font-family: var(--font-display); font-size: 1.875rem; color: var(--color-accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Layout */
.page-main { flex: 1; }
.container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: 1.2rem; padding-right: 1.2rem; }
.sect-wrap { padding-top: 5rem; padding-bottom: 5rem; }
.ptb{padding-top: 5rem; padding-bottom: 5rem;}
@media (min-width: 768px) {
.ptb{padding-top: 7rem; padding-bottom: 7rem;}
.sect-wrap { padding-top: 7rem; padding-bottom: 7rem; }
}
.sect-muted { background-color: var(--color-muted); }
/* Header */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--color-border); background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.head-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
.head-logo { display: flex; align-items: center; min-width: 0; }
.head-logo img { width: auto; }
@media (min-width: 640px) {
}
.desk-nav { display: none; align-items: center; gap: 2.25rem; }
.desk-nav .menu { align-items: center; gap: 2.25rem; }
@media (max-width:991px) { 
.desk-nav .menu { gap:1rem; }
}
@media (min-width: 768px) {
.desk-nav { display:block; }
.desk-nav .menu { display:flex; }
}
.desk-nav .menu li a { color:var(--tone-link); transition:color 0.2s ease; font-family:var(--font-display); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.18em; }
.desk-nav .menu li a:hover, .desk-nav .menu li.current_page_item a { color: var(--tone-link-hover); }
.desk-nav .menu li.nav-cta a{ display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.25rem; background-color: var(--color-primary); color:var(--color-primary-foreground); transition: background-color 0.2s ease; }
.desk-nav .menu li.nav-cta a:hover { background-color: var(--color-secondary); }
.lang-wrap { display: flex; align-items: center; border: 1px solid var(--color-border); }
.lang-btn { padding: 0.375rem 0.625rem; color: var(--tone-soft); transition: color 0.2s ease, background-color 0.2s ease; }
.lang-btn:hover { color: var(--color-ink); }
.lang-btn.is-active { background-color: var(--color-primary); color: var(--color-primary-foreground); }
.menu-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border: 1px solid var(--color-border); }
.menu-item.menu-item-gtranslate{ width:133px; height:32px; }
.menu-item.menu-item-gtranslate .gt_switcher{ width:133px !important; }
.menu-item.menu-item-gtranslate .gt_switcher .gt_selected a{ width:121px !important; line-height:24px; }
@media (min-width: 768px) {
.menu-btn { display: none; }
}
.menu-bar { display: block; width: 1.25rem; height: 1px; background-color: var(--color-ink); transition: transform 0.2s ease; }
.menu-btn[aria-expanded="true"] .menu-bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bar:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mob-nav { display: none; border-top: 1px solid var(--color-border); background-color: var(--color-background); padding: 0.5rem 1.25rem 1.5rem; }
@media (min-width: 640px) {
.mob-nav { padding-left: 2rem; padding-right: 2rem; }
}
.mob-nav.is-open { display: block; }
@media (min-width: 768px) {
.mob-nav { display: none !important; }
}
.mob-nav ul li { display: block; border-bottom: 1px solid var(--color-border); }
.mob-nav ul li a{ display: block; padding: 1rem 0; font-family: var(--font-display); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-ink); }
.mob-nav ul li.nav-cta{ padding:1rem 0; }
.mob-nav ul li.nav-cta a{ display: block; padding:1rem 1.25rem; text-align:center; background-color:var(--color-primary); color:var(--color-primary-foreground); font-size:0.75rem; }
.mob-nav ul li.menu-item.menu-item-gtranslate{ margin-top:1rem; width:100%; border:none; }
.mob-nav ul li.menu-item.menu-item-gtranslate:after{ content:"Language"; position:absolute; left:0; top:0; font-family:var(--font-display); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.18em; 
color: var(--tone-soft); line-height:32px; }
.mob-nav ul li.menu-item.menu-item-gtranslate > div { right:0; }
.mob-nav ul li.menu-item.menu-item-gtranslate .gt_switcher .gt_option{ width:131px !important; }
.mob-lang { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.mob-label { color: var(--tone-soft); }
/* Buttons */
.btn-solid { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.5rem; background-color: var(--color-primary); color: var(--color-primary-foreground); transition: background-color 0.2s ease; }
.btn-solid:hover { background-color: var(--color-secondary); }
.btn-light { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.5rem; background-color: var(--color-background); color: var(--color-ink); transition: background-color 0.2s ease, color 0.2s ease; }
.btn-light:hover { background-color: var(--color-accent); color: var(--color-secondary); }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.5rem; border: 1px solid rgba(58, 82, 66, 0.4); color: var(--color-ink); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.btn-outline:hover { border-color: var(--color-primary); background-color: var(--color-primary); color: var(--color-primary-foreground); }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.5rem; border: 1px solid rgba(255, 255, 255, 0.4); color: var(--color-primary-foreground); transition: background-color 0.2s ease; }
.btn-ghost:hover { background-color: rgba(255, 255, 255, 0.1); }
.btn-chip { padding:calc(0.25rem * 2) calc(0.25rem * 3.5); border: 1px solid var(--color-border); background-color: var(--color-background); color: var(--tone-link); transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
.btn-chip:hover { border-color: rgba(58, 82, 66, 0.6); color: var(--color-ink); }
.btn-chip.is-active { border-color: var(--color-primary); background-color: var(--color-primary); color: var(--color-primary-foreground); }
.tone-form .btn-chip { border-color: rgba(255, 255, 255, 0.25); background-color: transparent; color: var(--tone-link); line-height:calc(1 / .75); }
.tone-form .btn-chip:hover { border-color: rgba(255, 255, 255, 0.6); }
.tone-form .btn-chip.is-active { border-color: var(--color-accent); background-color: var(--color-accent); color: var(--color-secondary); }

/* Hero */
.hero-block { position: relative; }
.hero-image { width: 100%; height: 68vh; min-height: 440px; object-fit: cover; }
@media (min-width: 768px) {
.hero-image { height: 80vh; }
}
.hero-overlay { position: absolute; inset: 0; background:linear-gradient( to right, color-mix(in oklab, oklch(28.4% .026 157.9) 90%, transparent), transparent ); }
.hero-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 3rem; }
@media (min-width: 768px) {
.hero-content { padding-bottom: 5rem; }
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.hero-content .type-lead { margin-top: 1.5rem; max-width: 36rem; }
/* The Problem */
.prob-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
.prob-grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
}
.prob-quote { margin-top: 2.5rem; padding-left: 1.5rem; border-left: 2px solid var(--color-divider); }
/* The Product */
.prod-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) {
.prod-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.prod-copy { order: 2; }
.prod-image { order: 1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 1024px) {
.prod-copy { order: 1; }
.prod-image { order: 2; }
}
.prod-copy .type-lead { margin-top: 1.5rem; max-width: 42rem; }
.prod-list { display: grid; gap: 0.75rem 2rem; margin-top: 2.25rem; }
@media (min-width: 640px) {
.prod-list { grid-template-columns: repeat(2, 1fr); }
}
.prod-item { display: flex; gap: 0.75rem; align-items: flex-start; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); }
.prod-item::before { content: ""; width: 6px; height: 6px; margin-top: 0.5rem; flex-shrink: 0; background-color: var(--color-divider); }
.prod-copy .btn-solid { margin-top: 2.5rem; }
/* Key Features */
.feat-wrap { background-color:oklch(28.4% .026 157.9); color: var(--color-primary-foreground); background-image:linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 48px 48px; }
.feat-grid { display: grid; gap: 3rem 2.5rem; margin-top: 3.5rem; }
@media (min-width: 640px) {
.feat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.feat-grid { grid-template-columns: repeat(3, 1fr); }
}
.feat-card { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 1.5rem; }
.feat-card .type-h3 { margin-top: 1rem; }
.feat-card .type-body { margin-top: 0.75rem; }
/* Find Your Grade */
.grad-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
.grad-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.grad-form .type-lead { margin-top: 1.5rem; max-width: 42rem; }
.grad-questions { margin-top: 2.5rem; }
.grad-group { margin: 0; padding: 0; border: none; }
.grad-group + .grad-group { margin-top: 2rem; }
.grad-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.grad-reset { margin-top: 2rem; text-decoration: underline; text-underline-offset: 4px; color: var(--tone-soft); }
.grad-reset:hover { color: var(--color-ink); }
.grad-panel { border: 1px solid var(--color-border); background-color: var(--color-background); padding: 1.75rem; }
@media (min-width: 640px) {
.grad-panel { padding: 2.25rem; }
}
@media (min-width: 1024px) {
.grad-panel { position: sticky; top: 7rem; align-self: start; }
}
.grad-note { margin-top: 1.25rem; }
.grad-list { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.grad-item + .grad-item { margin-top: 1rem; }
.grad-item .type-h3 { margin-top: 0.25rem; font-family: var(--font-display); text-transform: uppercase; line-height: 1.2; }
.grad-item .type-muted { margin-top: 0.25rem; }
.grad-result .type-code { display: block; margin-top: 1.25rem; }
.grad-result .type-subh2 { margin-top: 0.5rem; }
.grad-result .type-body { margin-top: 0.75rem; }
.grad-data { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.grad-row { display: grid; gap: 0.25rem; }
.grad-row + .grad-row { margin-top: 1rem; }
@media (min-width: 640px) {
.grad-row { grid-template-columns: 9rem 1fr; gap: 1rem; }
}
.grad-key { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(0, 71, 82, 0.55); }
.grad-val { margin: 0; font-size: 0.875rem; color: rgba(0, 71, 82, 0.85); }
.grad-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.grad-actions .btn-solid, .grad-actions .btn-outline { padding: 0.875rem 1.25rem; }
/* Where It Works */
.work-grid { display: grid; gap: 2.5rem; margin-top: 3.5rem; }
@media (min-width: 640px) {
.work-grid { grid-template-columns: repeat(2, 1fr); }
}
.work-media { overflow: hidden; background-color: var(--color-muted); }
.work-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.5s ease; }
.work-card:hover .work-image { transform: scale(1.03); }
.work-cap { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.work-cap .type-body { margin-top: 0.5rem; }
/* Enquiry */
.enq-wrap { background-color: var(--color-primary); color: var(--color-primary-foreground); background-image: linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 48px 48px; }
.enq-grid { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) {
.enq-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}

.enq-info .type-lead { margin-top: 1.5rem; max-width: 28rem; font-size:1rem; }
.enq-contact { margin-top: 2.5rem; }
.enq-contact > div + div { margin-top: 1rem; }
.enq-val { margin: 0.25rem 0 0; }
.enq-val a { transition: color 0.2s ease; }
.enq-val a:hover { color: var(--tone-link-hover); }
.enq-form { border: 1px solid rgba(255, 255, 255, 0.2); background-color:color-mix(in oklab, oklch(28.4% .026 157.9) 40%, transparent); padding: 1.5rem; }
@media (min-width: 640px) {
.enq-form { padding: 2rem; }
}
.enq-group { margin: 0; padding: 0; border: none; }
.enq-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.enq-fields { display: grid; gap: 1.25rem; margin-top: 2rem; }
.enq-opts .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
@media (min-width: 640px) {
.enq-fields { grid-template-columns: repeat(2, 1fr); }
}
.enq-opts .wpcf7-radio .wpcf7-list-item{ display:block; margin:0; }
.enq-opts .wpcf7-radio label{ position:relative; display:block; }
.enq-opts .wpcf7-radio .wpcf7-list-item-label{ display:block; background-color: transparent; color: var(--tone-link); line-height: calc(1 / .75); padding: calc(0.25rem * 2) calc(0.25rem * 3.5); border:1px solid rgba(255, 255, 255, 0.25); 
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; font-family: var(--font-sans); font-size: 0.75rem; text-transform:uppercase; letter-spacing:0.12em; }
.enq-opts .wpcf7-radio label input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.enq-opts .wpcf7-radio label input:checked + .wpcf7-list-item-label{ border-color:var(--color-accent); background-color:var(--color-accent); color:var(--color-secondary); }
.enq-opts .wpcf7-radio label input:hover + .wpcf7-list-item-label{ border-color: rgba(255, 255, 255, 0.6); }

.enq-field { display: block; }
.enq-lbl { display: block; color: var(--tone-soft); line-height:24px; }
.mt-5 { margin-top:calc(0.25rem * 5); }
.enq-input, .enq-area { width:100%; margin-top:0.5rem; padding:0.625rem 0.75rem; border:1px solid rgba(255,255,255,0.25); background-color:transparent; color:var(--color-primary-foreground); font-family:var(--font-sans); font-size:0.875rem; outline:none; transition:border-color 0.2s ease; line-height:calc(1.25 / .875); }
.enq-input:focus, .enq-area:focus { border-color: var(--color-accent); }
.enq-area { resize: vertical; min-height: 6rem; }
.enq-area::placeholder { color: rgba(255, 255, 255, 0.35); }
.enq-send { width: 100%; margin-top: 1.75rem; padding: 1rem 1.5rem; background-color: var(--color-background); color: var(--color-ink); transition: background-color 0.2s ease, color 0.2s ease; }
.enq-send:hover { background-color: var(--color-accent); color: var(--color-secondary); }
.contact-btn .wpcf7-submit { width: 100%; margin-top: 1.75rem; padding: 1rem 1.5rem; background-color: var(--color-background); color: var(--color-ink); transition: background-color 0.2s ease, color 0.2s ease; 
font-family: var(--font-display); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.333; border:none; }
.contact-btn .wpcf7-submit:hover { background-color: var(--color-accent); color: var(--color-secondary); }
.enq-hint { margin-top: 1rem; }
/* Quick links */
.link-strip { border-top: 1px solid var(--color-border); padding: 2rem 0; text-align: center; }
.link-inner { color: var(--tone-soft); }
.link-inner a { transition: color 0.2s ease; }
.link-inner a:hover { color: var(--color-ink); }
.link-sep { padding: 0 0.75rem; }
/* Compatible Surfaces */
.surf-motif { background-image: linear-gradient(to right, rgba(58, 82, 66, 0.09) 1px, transparent 1px), linear-gradient(to bottom, rgba(58, 82, 66, 0.09) 1px, transparent 1px); background-size: 48px 48px; }
.surf-grid { display: grid; gap: 1px; margin-top: 3rem; border: 1px solid var(--color-border); background-color: var(--color-border); }
@media (min-width: 640px) {
.surf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.surf-grid { grid-template-columns: repeat(4, 1fr); }
}
.surf-item, .surf-note { background-color: var(--color-background); padding: 2rem 1.5rem; }
.surf-note { display: flex; align-items: center; }
/* Why TECHWEAVE */
.why-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) {
.why-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.why-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.why-grid .type-lead { margin-top: 1.5rem; max-width: 42rem; }
.why-list { margin-top: 2.25rem; }
.why-list li { border-top: 1px solid var(--color-border); padding-top: 0.75rem; }
.why-list li + li { margin-top: 0.75rem; }
.why-grid .btn-outline { margin-top: 2.5rem; }
/* Footer */
.site-foot { background-color: var(--color-primary); color: var(--color-primary-foreground); }
.foot-inner { padding-top: 4rem; padding-bottom: 4rem; }
.foot-grid { display: grid; gap: 3rem; }
@media (min-width: 768px) {
.foot-grid { grid-template-columns: minmax(0, 1.4fr) auto auto; }
}
.foot-logo img { height: 3.5rem; width: auto; }
@media (min-width: 640px) {
.foot-logo img { height: 4rem; }
}
.foot-text { margin-top: 1.5rem; max-width: 32rem; }
.foot-links { margin-top: 1.25rem; }
.foot-links li + li { margin-top: 0.75rem; }
.foot-links a { transition: color 0.2s ease; color: var(--tone-link); font-size:14px; }
.foot-links a:hover { color: var(--tone-link-hover); }
.foot-base { display: flex; flex-direction: column; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.2); letter-spacing: 0.14em; color: var(--tone-muted); }
@media (min-width: 640px) {
.foot-base { flex-direction: row; align-items: center; justify-content: space-between; }
}
.foot-base p { text-transform: uppercase; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 1.5rem; text-transform: uppercase; }
.foot-legal a { color: var(--tone-muted); transition: color 0.2s ease; }
.foot-legal a:hover { color: var(--tone-link-hover); }
.foot-legal .menu { display: flex; flex-wrap: wrap; gap: 1.5rem; text-transform: uppercase; }
.foot-legal .menu a { color: var(--tone-muted); transition: color 0.2s ease; }
.foot-legal .menu a:hover { color: var(--tone-link-hover); }
/* Product page */
.prod-hero { background-color:oklch(28.4% .026 157.9); background-image: linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 48px 48px; }
.prod-herogrid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) {
.prod-herogrid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.prod-herotext { margin-top: 1.5rem; max-width: 36rem; }
.prod-herobtn { display: inline-flex; margin-top: 2.25rem; }
.prod-heroimg { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.prod-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.2); }
@media (min-width: 640px) {
.prod-specs { grid-template-columns: repeat(3, 1fr); }
}
.prod-specs dd { margin: 0.5rem 0 0; }
.prod-stats { display: grid; border: 1px solid var(--color-border); background-color: var(--color-background); }
@media (min-width: 640px) {
.prod-stats { grid-template-columns: repeat(3, 1fr); }
}
.prod-stat { display: flex; flex-direction: column; align-items: center; padding: 3rem 2rem; text-align: center; border-top: 1px solid var(--color-border); }
@media (min-width: 640px) {
.prod-stat { border-top: none; border-left: 1px solid var(--color-border); }
.prod-stat:first-child { border-left: none; }
}
.prod-stat .type-label { margin-bottom: 0.5rem; }
.prod-stat .type-statval { margin-top: 0.25rem; }
.prod-icon { width:auto; height:auto; margin-top: 1.25rem; color: var(--color-technical); }
.prod-statlbl { margin-top: 1rem; color: var(--color-ink); }
.prod-statnote { margin-top: 0.5rem; max-width: 16rem; }
.prod-disclaim { margin-top: 1rem; color: rgba(0, 71, 82, 0.5); }
.prod-overview { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
.prod-overview { grid-template-columns: 0.9fr 1.1fr; gap: 5rem; }
}
.mt-6 { margin-top: calc(0.25rem * 6); }
.prod-overviewtext { margin-top: 1.5rem; max-width: 42rem; line-height: 1.625; font-size:1rem; }
.prod-featgrid { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
.prod-featgrid { grid-template-columns: 1fr 1.15fr; gap: 4rem; }
}
.prod-featside { align-self: start; }
@media (min-width: 1024px) {
.prod-featside { position: sticky; top: 7rem; }
}
.prod-featimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: 2.5rem; }
.prod-featitem { padding: 2rem 0; border-top: 1px solid var(--color-border); }
.prod-featitem:first-child { padding-top: 0; border-top: none; }
.prod-featitem .type-xl { margin-top: 0.75rem; }
.prod-featitem .type-body { margin-top: 0.75rem; max-width: 36rem; }
.prod-measgrid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) {
.prod-measgrid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.prod-measimg { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.prod-measlist { display: grid; gap: 1px; margin-top: 2.25rem; border: 1px solid var(--color-border); background-color: var(--color-border); }
@media (min-width: 640px) {
.prod-measlist { grid-template-columns: repeat(2, 1fr); }
}
.prod-measlist li { background-color: var(--color-background); padding: 1.5rem; margin-top: 0; font-family: var(--font-display); font-size: 1rem; text-transform: uppercase; color: var(--color-ink); line-height:1.5; }
.prod-gradlead { margin-top: 1.5rem; max-width: 48rem; }
.prod-gradgrid { display: grid; gap: 1px; margin-top: 3.5rem; border: 1px solid var(--color-border); background-color: var(--color-border); }
@media (min-width: 1024px) {
.prod-gradgrid { grid-template-columns: repeat(3, 1fr); }
}
.prod-card { position: relative; display: flex; flex-direction: column; background-color: var(--color-background); padding: 2.25rem 1.75rem; }
.prod-badge { position: absolute; top: 0; right: 0; padding: 0.375rem 0.75rem; background-color: var(--color-accent); color: var(--color-secondary); font-family:var(--font-display); font-size:0.65rem; letter-spacing:0.16em; }
.prod-card .type-subh2 { margin-top: 0.75rem; }
.prod-card > .type-body { margin-top: 0.75rem; }
.prod-meta { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); line-height:1.333; }
.prod-meta > div + div { margin-top: 0.75rem; }
.prod-metakey { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(0, 71, 82, 0.55); }
.prod-meta dd { margin: 0.25rem 0 0; line-height:1.428; }
.prod-highlights { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); padding-bottom:calc(0.25rem * 8); }
.prod-highlights li { display: flex; gap: 0.75rem; align-items: flex-start; }
.prod-highlights li + li { margin-top: 0.625rem; }
.prod-highlights li::before { content: ""; width: 6px; height: 6px; margin-top: 0.5rem; flex-shrink: 0; background-color: var(--color-divider); }
.prod-enquire { width:100%; margin-top:auto; text-align:center; }
.prod-tablewrap { margin-top: 3rem; overflow-x: auto; border: 1px solid var(--color-border); }
.prod-table { width:100%; min-width:38rem; text-align:left; }
.prod-table thead tr { background-color: var(--color-primary); color: var(--color-primary-foreground); }
.prod-table th, .prod-table td { padding: 1.25rem; vertical-align: top; }
.prod-table th{ font-weight:500; }
.prod-thmuted { color: rgba(255, 255, 255, 0.7); }
.prod-table tbody tr td, .prod-table tbody tr th { border-top: 1px solid var(--color-border); }
.prod-tdhl { background-color: var(--color-muted); color: var(--color-ink); }
.prod-formatgrid { display: grid; gap: 1px; margin-top: 3rem; border: 1px solid var(--color-border); background-color: var(--color-border); }
@media (min-width: 640px) {
.prod-formatgrid { grid-template-columns: repeat(2, 1fr); }
}
.prod-formatcell { background-color: var(--color-background); padding: 3rem 2rem; }
.how-cont-wrap{ max-width:42rem; }
.prod-formatcell .type-muted { margin-top: 0.75rem; }
.prod-docsblock { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--color-border); }
.prod-docstitle { font-size: 1.5rem; }
@media (min-width: 640px) {
.prod-docstitle { font-size: 1.875rem; }
}
@media (min-width: 768px) {
.prod-docstitle { font-size: 2.25rem; }
}
.prod-docsgrid { display: grid; gap: 1px; margin-top: 2rem; border: 1px solid var(--color-border); background-color: var(--color-border); }
@media (min-width: 640px) {
.prod-docsgrid { grid-template-columns: repeat(2, 1fr); }
}
.prod-doc { display: block; background-color: var(--color-background); padding: 2rem 1.75rem; transition: background-color 0.2s ease, color 0.2s ease; }
.prod-doc:hover { background-color: var(--color-primary); color: var(--color-primary-foreground); }
.prod-doc:hover .type-code { color: var(--color-accent); }
.prod-doc:hover .type-xl, .prod-doc:hover .type-muted { color: var(--color-primary-foreground); }
.prod-doc:hover .type-muted { opacity: 0.75; }
.prod-doc .type-xl { margin-top: 0.75rem; text-transform: uppercase; line-height: 1.2; font-family:var(--font-display); font-size: 1.125rem; font-weight:400; }
.prod-doc .type-muted { margin-top: 0.5rem; }
.prod-dlbtn { display: inline-block; margin-top: 1.25rem; font-family: var(--font-sans); }
.prod-docsnote { margin-top: 1.5rem; }
.prod-formatspec { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.prod-formatspec .type-capwide{ font-size: 0.875rem; font-weight:500; letter-spacing:0; }
.prod-formatspecbtn { margin-left: auto; }
.prod-appsgrid { display: grid; gap: 3rem; margin-top: 3.5rem; }
@media (min-width: 1024px) {
.prod-appsgrid { grid-template-columns: 1fr 1fr; }
}
.prod-appslist li { border-top: 1px solid var(--color-border); padding-top: 0.75rem; }
.prod-appslist li + li { margin-top: 0.75rem; }
.prod-appslist { margin-top: 1.5rem; }
.prod-appsimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: 2rem; }
.prod-appsnote { margin-top: 2rem; padding-left: 1.25rem; border-left: 2px solid var(--color-divider); line-height: 1.625; }
.prod-steps { background-color:oklch(28.4% .026 157.9); background-image: linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 48px 48px; }
.prod-stepsgrid { display: grid; gap: 2.5rem; margin-top: 3.5rem; list-style: none; padding: 0; }
@media (min-width: 640px) {
.prod-stepsgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.prod-stepsgrid { grid-template-columns: repeat(3, 1fr); }
}
.prod-step { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 1.5rem; }
.prod-step .type-h3 { margin-top: 0.75rem; color: var(--color-primary-foreground); }
.prod-step .type-body { margin-top: 0.75rem; }
.prod-faqgrid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
.prod-faqgrid { grid-template-columns: 1fr 1fr; gap: 5rem; }
}
.prod-faqbtn { display: inline-flex; margin-top: 2.25rem; }
.prod-faqlist { align-self: center; }
.prod-faqlist li { border-top: 1px solid var(--color-border); padding-top: 1rem; }
.prod-faqlist li + li { margin-top: 1rem; }
.prod-care { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) {
.prod-care { padding-top: 5rem; padding-bottom: 5rem; }
}
.prod-caregrid { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
.prod-caregrid { grid-template-columns: 0.8fr 1.2fr; gap: 5rem; }
}
.prod-caretext { display: flex; flex-direction: column; gap: 1.25rem; }
/* About page */
.type-years { font-family: var(--font-display); font-size: 6rem; line-height: 1; color: var(--color-ink); }
@media (min-width: 640px) {
.type-years { font-size: 8rem; }
}
.abt-hero { background-color:oklch(28.4% .026 157.9); background-image: linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 48px 48px; }
.abt-herogrid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) {
.abt-herogrid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
}
.abt-herotext { margin-top: 1.5rem; max-width: 36rem; }
.abt-photos { display: grid; gap: 0.75rem; }
.abt-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.abt-photogrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.abt-years { display: grid; gap: 3rem; align-items: center; text-align: center; }
@media (min-width: 1024px) {
.abt-years { grid-template-columns: 1fr 1fr; gap: 4rem; text-align: left; }
.abt-yearsleft { text-align: center; }
}
.abt-yearslbl { margin-top: 1rem; color: var(--color-technical); }
.abt-yearstext { margin-top: 1.5rem; line-height: 1.625; }
.abt-expert { background-color:oklch(28.4% .026 157.9); background-image:linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 48px 48px; }
.abt-expertlead { margin-top: 1.5rem; max-width: 42rem; }
.abt-expertgrid { display: grid; gap: 2.5rem 2rem; margin-top: 3.5rem; list-style: none; padding: 0; }
@media (min-width: 640px) {
.abt-expertgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.abt-expertgrid { grid-template-columns: repeat(3, 1fr); }
}
.abt-expertitem { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 1.5rem; }
.abt-expertitem .type-h3 { margin-top: 0.75rem; color: var(--color-primary-foreground); }
.abt-expertitem .type-body { margin-top: 0.75rem; }
.abt-whygrid { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
.abt-whygrid { grid-template-columns: 1fr 1fr; gap: 5rem; }
}
.abt-whyquote { margin-top: 2rem; padding-left: 1.5rem; border-left: 2px solid var(--color-divider); }
.abt-whytext { margin-top: 1.5rem; line-height: 1.625; }
.abt-workgrid { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
.abt-workgrid { grid-template-columns: 1fr 1.1fr; gap: 5rem; }
}
.abt-workquote { margin-top: 2rem; padding-left: 1.5rem; border-left: 2px solid var(--color-divider); }
.abt-worklist { display: flex; flex-direction: column; gap: 2rem; }
.abt-workitem { border-top: 1px solid var(--color-border); padding-top: 1.25rem; }
.abt-workitem .type-card { margin-top: 0; font-weight:400; }
.abt-workitem .type-body { margin-top: 0.75rem; }
.abt-audgrid { display: grid; gap: 1px; margin-top: 3rem; border: 1px solid var(--color-border); background-color: var(--color-border); }
@media (min-width: 640px) {
.abt-audgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.abt-audgrid { grid-template-columns: repeat(3, 1fr); }
}
.abt-auditem { background-color: var(--color-background); padding: 2rem 1.5rem; }
/* FAQ page */
.faq-hero { background-color: var(--color-secondary); background-image: linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 48px 48px; }
.faq-title { max-width: 48rem; }
.faq-intro { margin-top: 1.5rem; max-width: 42rem; }
.faq-group .type-subh2 { margin-top: 1.25rem; }
.faq-list { margin-top: 2.5rem; border-top: 1px solid var(--color-border); }
.faq-item { display: grid; gap: 0.75rem; padding: 1.75rem 0; border-bottom: 1px solid var(--color-border); }
@media (min-width: 1024px) {
.faq-item { grid-template-columns: 1fr 1.3fr; gap: 3rem; align-items: start; }
}
.faq-item .type-card { margin-top: 0; line-height: 1.2; }
.faq-item dd { margin: 0; }
.faq-cta .type-lead { margin-top: 1.5rem; max-width: 42rem; }
.faq-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.text-center{ text-align:center; }
.thank-you-img{ display:inline-block; }
.thank-you-heading.type-h1{ max-width:100%; margin-top:20px; font-family: var(--font-display); }
.thank-you-ttl { font-size: 42px; font-weight: 500; line-height: 1.5; margin-top: 10px; position: relative; font-family:var(--font-display); }
.btn-wrap{ padding:20px 0 0 0; }
.whysybx p{ font-size:20px; }
.error-description.whysybx { max-width:1035px; margin:0px auto 0px; }
.error-description.whysybx p, .thank-you-inner .whysybx p{ padding:20px 0 0 0; }
.error-img img { display:inline-block; }
.error-description .type-h1{ max-width:100%; }
@media (max-width: 768px) {
.thank-you-ttl { font-size: 30px; }
.hero-image { height:auto; min-height:560px; }
}
@media (max-width:550px) {
.hero-image { height:auto; min-height:530px; }
}
@media (max-width:991px) {
.head-logo { width:180px; }
.desk-nav .menu li a{ font-size:0.65rem; }
}
.footer-main h2.type-label { font-family:var(--font-display); font-weight:400; }
.wpcf7-response-output{ display:none; }
.contact-btn{ position:relative; }
.contact-btn .wpcf7-spinner{ position:absolute; top:1.75rem; bottom:0; margin:auto; right:10px; }
.main-content-sec .whysybx p.type-eyebrow{ font-size:0.6875rem; padding:0; }
.main-content-sec .whysybx p { padding:20px 0 0 0; font-size:1rem; line-height:1.6; }
.main-content-sec .whysybx p a{ text-decoration:underline; }
.main-content-sec .whysybx p a:hover{ text-decoration:none; }
.main-content-sec .whysybx { max-width:42rem; }
.captchabx{ margin-top:1.75rem; width:100%; overflow:hidden; }

@media (max-width:480px) {
.cf-turnstile { transform:scale(0.85); transform-origin:0 0; width:260px; }
.cf-turnstile iframe { max-width:100%; }
}