/*
Theme Name: Synstream
Theme URI: https://synstream.co
Author: Synstream Pte Limited
Description: Single-page landing theme for Synstream. The contact form is supplied by a Jetpack Form block so responses are stored in WP Admin.
Version: 1.20260904.0830
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: synstream
*/

:root {
  --primary: #397aa4;
  --primary-deep: #285b7d;
  --secondary: #5b98ba;
  --aqua: #83bcbb;
  --surface: #ffffff;
  --page: #f4f6fc;
  --pale-blue: #d1e1ec;
  --ink: #4f4f4f;
  --ink-strong: #273640;
  --muted: #70808a;
  --yellow: #ffc000;
  --orange: #ff7e33;
  --coral: #ef6b6b;
  --line: rgba(57, 122, 164, 0.16);
  --shadow: 0 24px 60px rgba(57, 122, 164, 0.12);
  --radius-lg: 28px;
  --radius-md: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--page); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.eventbar { min-height: 38px; padding: 8px 5vw; display: flex; justify-content: center; align-items: center; gap: 18px; color: var(--surface); background: var(--primary-deep); font-size: calc(11px * var(--fs)); letter-spacing: .06em; }
.eventbar b { color: var(--aqua); font-size: calc(10px * var(--fs)); letter-spacing: .16em; }
.eventbar a { color: var(--surface); border-bottom: 1px solid rgba(255,255,255,.55); }

header { height: 76px; padding: 0 5vw; display: flex; align-items: center; gap: 30px; border-bottom: 1px solid var(--line); background: rgba(244,246,252,.9); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { width: 186px; height: 50px; display: block; object-fit: contain; object-position: left center; }
nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
nav a, .navcta { font-size: calc(11px * var(--fs)); color: var(--ink); transition: color .2s ease, transform .2s ease; }
nav a:hover { color: var(--primary); }
.navcta { padding: 11px 18px; border-radius: 999px; color: var(--surface); background: var(--primary); font-weight: 800; box-shadow: 0 9px 18px rgba(57,122,164,.22); }
.navcta:hover { color: var(--surface); transform: translateY(-2px); }
#menu { display: none; margin-left: auto; border: 0; color: var(--primary); background: transparent; font-size: 24px; }

main { overflow: hidden; }
.hero { min-height: 660px; padding: 92px 5vw 78px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, .95fr); align-items: center; gap: 5vw; position: relative; background: linear-gradient(135deg, #f4f6fc 0%, #ffffff 55%, #eef6f7 100%); }
.hero:before { content:""; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(rgba(57,122,164,.11) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.8) 100%); }
.hero-copy { max-width: 700px; position: relative; z-index: 2; }
.eyebrow { display: inline-block; color: var(--primary); font-size: calc(10px * var(--fs)); font-weight: 850; letter-spacing: .18em; line-height: 1.3; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { color: var(--ink-strong); letter-spacing: -.055em; }
h1 { max-width: 760px; margin: 20px 0 22px; font-size: clamp(50px, 6.2vw, 88px); line-height: .95; }
h1 em { color: var(--primary); font-style: normal; }
h2 { max-width: 840px; margin: 16px 0 22px; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.04; }
h3 { margin: 15px 0 10px; font-size: 20px; letter-spacing: -.035em; }
.hero-copy > p, .lead, .section-head > p, .vision-copy > p, .contact p { max-width: 620px; color: var(--muted); font-size: calc(15px * var(--fs)); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 24px; }
.primary,.secondary { min-height: 44px; padding: 12px 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid transparent; font-size: calc(12px * var(--fs)); font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.primary { color: var(--surface); background: var(--primary); box-shadow: 0 12px 25px rgba(57,122,164,.22); }
.primary:hover { color: var(--surface); transform: translateY(-2px); box-shadow: 0 15px 28px rgba(57,122,164,.3); }
.secondary { color: var(--primary); border-color: var(--primary); background: rgba(255,255,255,.72); }
.secondary:hover { color: var(--surface); background: var(--primary); transform: translateY(-2px); }
.proof { display: flex; flex-wrap: wrap; gap: 19px; color: var(--primary-deep); font-size: calc(9px * var(--fs)); font-weight: 850; letter-spacing: .12em; }

.hero-visual { min-height: 420px; position: relative; display: grid; place-items: center; z-index: 1; }
.orb { position: absolute; border-radius: 50%; filter: blur(24px); opacity: .74; }
.orb.one { width: 210px; height: 210px; right: 0; top: 0; background: radial-gradient(circle at 35% 35%, var(--aqua), rgba(131,188,187,.03) 72%); }
.orb.two { width: 180px; height: 180px; left: 2%; bottom: 0; background: radial-gradient(circle at 48% 45%, var(--secondary), rgba(91,152,186,.03) 72%); }
.platform-window { width: min(100%, 560px); padding: 0 0 24px; position: relative; z-index: 2; border: 1px solid rgba(255,255,255,.9); border-radius: 22px; background: rgba(255,255,255,.88); box-shadow: var(--shadow); backdrop-filter: blur(18px); overflow: hidden; transform: perspective(900px) rotateY(-3deg) rotateX(2deg); }
.window-top { height: 48px; padding: 0 18px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--line); background: rgba(244,246,252,.82); }
.window-top > span { width: 8px; height: 8px; border-radius: 50%; background: var(--pale-blue); }
.window-top small { margin-left: auto; color: var(--primary); font-size: calc(8px * var(--fs)); font-weight: 900; letter-spacing: .14em; }
.mini-flow { padding: 38px 22px 28px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; }
.mini-flow > i { color: var(--secondary); font-style: normal; font-size: 18px; opacity: .7; }
.node { min-height: 118px; padding: 16px 13px; border: 1px solid var(--pale-blue); border-radius: 14px; background: var(--page); display: flex; flex-direction: column; justify-content: center; }
.node strong { color: var(--aqua); font-size: calc(9px * var(--fs)); letter-spacing: .12em; }
.node span { margin: 8px 0 3px; color: var(--ink-strong); font-weight: 850; font-size: calc(13px * var(--fs)); }
.node small { color: var(--muted); font-size: calc(9px * var(--fs)); }
.node.active { color: var(--surface); border-color: var(--primary); background: linear-gradient(145deg, var(--primary), var(--primary-deep)); box-shadow: 0 14px 30px rgba(57,122,164,.24); transform: translateY(-5px); }
.node.active strong,.node.active span,.node.active small { color: var(--surface); }
.metric-row { margin: 0 22px; padding-top: 20px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; border-top: 1px solid var(--line); }
.metric-row div { padding: 13px; border-radius: 11px; background: rgba(244,246,252,.8); }
.metric-row small { display:block; color: var(--muted); font-size: calc(7px * var(--fs)); font-weight:800; letter-spacing:.12em; }
.metric-row b { display:block; margin-top:4px; color: var(--primary-deep); font-size: calc(12px * var(--fs)); }

.ticker { min-height: 58px; padding: 0 5vw; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:clamp(20px,5vw,70px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--primary); background:var(--surface); font-size: calc(9px * var(--fs)); font-weight:850; letter-spacing:.14em; }
.section { padding: 110px 5vw; }
.intro-section { background: var(--surface); }
.lead { font-size: 16px; }
.pipeline { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:16px; align-items:center; margin-top:52px; }
.pipeline article { min-height:250px; padding:26px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--page); position:relative; box-shadow:0 14px 30px rgba(57,122,164,.06); }
.pipeline .step { color:var(--primary); font-size: calc(10px * var(--fs)); font-weight:900; letter-spacing:.12em; }
.step-icon { width:48px; height:48px; margin-top:30px; display:grid; place-items:center; border-radius:15px; color:var(--surface); background:linear-gradient(145deg,var(--primary),var(--aqua)); font-size:22px; box-shadow:0 10px 24px rgba(57,122,164,.2); }
.pipeline p { color:var(--muted); font-size: calc(13px * var(--fs)); margin-bottom:0; }
.connector { color:var(--aqua); font-size:24px; }

.capabilities { background:var(--page); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:40px; }
.section-head h2 { margin-bottom:0; }
.feature-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:48px; }
.feature { min-height:270px; padding:28px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); box-shadow:0 16px 34px rgba(57,122,164,.07); }
.feature-wide { grid-column:span 4; background:linear-gradient(135deg,#fff 0%,#f1f7fb 100%); }
.feature-half { grid-column:span 3; }
.feature-grid > .feature:not(.feature-half):not(.feature-wide) { grid-column:span 2; }
.feature-no { color:var(--aqua); font-size: calc(10px * var(--fs)); font-weight:900; letter-spacing:.14em; }
.feature p { max-width:600px; color:var(--muted); font-size: calc(13px * var(--fs)); }
.feature-product { padding:28px 18px 18px; overflow:hidden; display:flex; flex-direction:column; }
.feature-product .feature-no, .feature-product h3, .feature-product p { margin-left:10px; margin-right:10px; }
.feature-product p { min-height:62px; }
.feature-screen { width:100%; aspect-ratio:16/10; margin-top:16px; overflow:hidden; border:1px solid rgba(57,122,164,.12); border-radius:12px; background:#0f1726; box-shadow:0 12px 24px rgba(39,54,64,.10); }
.feature-screen img { width:100%; height:100%; display:block; object-fit:contain; object-position:center; }
.feature-lowcode { display:flex; flex-direction:column; }
.feature-media { width:100%; margin-top:18px; overflow:hidden; border:1px solid rgba(57,122,164,.12); border-radius:12px; background:#0f1726; box-shadow:0 12px 24px rgba(39,54,64,.10); }
.feature-video { aspect-ratio:1816/318; }
.feature-video video { width:100%; height:100%; display:block; object-fit:contain; background:#0f1726; }
.connector-media { background:#0f1726; }
.connector-media img { width:100%; height:auto; display:block; object-fit:contain; }

.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.tags span,.vision-points span { padding:8px 11px; border-radius:999px; color:var(--primary-deep); background:var(--page); border:1px solid var(--pale-blue); font-size: calc(10px * var(--fs)); font-weight:750; }

.visionedge { display:grid; grid-template-columns:minmax(0,.85fr) minmax(420px,1fr); align-items:center; gap:8vw; background:var(--surface); }
.vision-points { display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 4px; }
.text-link { display:inline-block; margin-top:20px; color:var(--primary); font-size: calc(13px * var(--fs)); font-weight:800; border-bottom:2px solid var(--aqua); }
.camera-card { overflow:hidden; border-radius:20px; background:#1d2c35; box-shadow:0 26px 60px rgba(39,54,64,.22); }
.camera-top,.camera-bottom { min-height:48px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; color:#dce7ec; font-size: calc(9px * var(--fs)); letter-spacing:.1em; }
.camera-top b { color:var(--aqua); font-size: calc(11px * var(--fs)); }
.camera-scene { height:330px; position:relative; overflow:hidden; background:linear-gradient(180deg,#667985 0%,#455b66 48%,#344a55 49%,#2d4049 100%); }
.camera-scene:before,.camera-scene:after { content:""; position:absolute; background:rgba(255,255,255,.08); }
.camera-scene:before { width:100%; height:1px; top:52%; left:0; }
.camera-scene:after { width:1px; height:100%; top:0; left:50%; }
.scanline { position:absolute; left:0; right:0; top:25%; height:1px; background:rgba(131,188,187,.7); box-shadow:0 0 16px rgba(131,188,187,.8); animation:scan 3s linear infinite; }
@keyframes scan { 0%{top:15%} 50%{top:82%} 100%{top:15%} }
.person { position:absolute; width:32px; height:72px; border-radius:20px 20px 8px 8px; background:rgba(220,231,236,.56); }
.person:before { content:""; position:absolute; width:22px; height:22px; border-radius:50%; left:5px; top:-18px; background:rgba(220,231,236,.62); }
.p1 { left:28%; bottom:66px; } .p2 { right:25%; bottom:92px; transform:scale(.8); }
.box { position:absolute; padding:3px 6px; border:1px solid var(--aqua); color:var(--aqua); font-size: calc(8px * var(--fs)); background:rgba(29,44,53,.55); }
.b1 { left:24%; bottom:48px; } .b2 { right:20%; bottom:72px; }
.zone { position:absolute; left:12%; right:12%; bottom:30px; height:85px; border:1px dashed rgba(255,192,0,.7); color:var(--yellow); display:flex; align-items:flex-end; padding:7px; font-size: calc(8px * var(--fs)); letter-spacing:.12em; }
.camera-bottom strong { color:var(--aqua); }

.use-cases { background:var(--page); }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:46px; }
.card { min-height:215px; padding:26px; border:1px solid rgba(57,122,164,.12); border-radius:var(--radius-md); background:var(--surface); box-shadow:0 16px 34px rgba(57,122,164,.07); transition:transform .25s ease, box-shadow .25s ease; }
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.card > span { color:var(--primary); font-size: calc(11px * var(--fs)); font-weight:900; letter-spacing:.12em; }
.card p { margin-bottom:0; color:var(--muted); font-size: calc(13px * var(--fs)); }

.cta-band { padding:72px 5vw; display:flex; justify-content:space-between; align-items:center; gap:30px; color:var(--surface); background:linear-gradient(120deg,var(--primary-deep),var(--primary) 62%,var(--secondary)); }
.cta-band .eyebrow { color:var(--aqua); }
.cta-band h2 { max-width:760px; margin-bottom:0; color:var(--surface); }
.primary.light { color:var(--primary-deep); background:var(--surface); box-shadow:0 12px 25px rgba(0,0,0,.13); white-space:nowrap; }
.primary.light:hover { color:var(--primary-deep); background:#f8fbfc; }

.contact { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.8fr); gap:8vw; background:var(--surface); }
.contact-note { display:inline-block; margin-top:25px; padding:10px 13px; color:var(--primary-deep); background:var(--page); border-left:3px solid var(--aqua); font-size: calc(11px * var(--fs)); font-weight:750; }
.linkedin-link { max-width:430px; margin-top:14px; padding:15px 17px; display:flex; align-items:center; gap:13px; border:1px solid var(--pale-blue); border-radius:12px; color:var(--primary-deep); background:var(--surface); box-shadow:0 10px 25px rgba(57,122,164,.07); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.linkedin-link:hover { transform:translateY(-2px); border-color:var(--aqua); box-shadow:0 14px 30px rgba(57,122,164,.12); }
.linkedin-icon { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:8px; color:#fff; background:var(--primary); font-weight:900; font-size: calc(15px * var(--fs)); }
.linkedin-link > span:nth-child(2) { display:grid; gap:2px; }
.linkedin-link strong { font-size: calc(12px * var(--fs)); }
.linkedin-link small { color:var(--muted); font-size: calc(10px * var(--fs)); }
.linkedin-link b { margin-left:auto; color:var(--primary); font-size:17px; }
form { display:grid; gap:14px; padding:26px; border:1px solid var(--pale-blue); border-radius:var(--radius-md); background:var(--page); }
label { display:grid; gap:6px; color:var(--primary-deep); font-size: calc(11px * var(--fs)); font-weight:800; }
input,textarea { width:100%; padding:12px 13px; border:1px solid var(--pale-blue); border-radius:9px; outline:none; color:var(--ink-strong); background:var(--surface); font-size: calc(13px * var(--fs)); transition:border-color .2s ease, box-shadow .2s ease; }
input:focus,textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(57,122,164,.12); }
textarea { resize:vertical; }
form .primary { border:0; }
form small { color:var(--muted); font-size: calc(10px * var(--fs)); }

footer { padding:34px 5vw 40px; display:flex; align-items:center; flex-wrap:wrap; gap:20px 34px; border-top:1px solid var(--line); color:var(--muted); background:var(--page); font-size: calc(11px * var(--fs)); }
footer .brand { margin-right:auto; }
footer .brand-logo { width:190px; height:50px; }
footer p { margin:0; }

@media (max-width: 980px) {
  .hero { grid-template-columns:1fr; }
  .hero-visual { min-height:390px; }
  .pipeline { grid-template-columns:1fr 1fr; }
  .pipeline .connector { display:none; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .feature-wide, .feature-half, .feature-grid > .feature:not(.feature-half):not(.feature-wide) { grid-column:span 1; }
  .visionedge { grid-template-columns:1fr; }
  .cards { grid-template-columns:1fr 1fr; }
}
@media (max-width: 840px) {
  .eventbar { justify-content:flex-start; flex-wrap:wrap; gap:7px 14px; }
  header { height:67px; }
  nav, header > .navcta { display:none; }
  #menu { display:block; }
  nav.open { display:flex; position:absolute; top:67px; left:0; right:0; padding:20px 5vw; align-items:flex-start; flex-direction:column; gap:16px; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 18px 30px rgba(39,54,64,.08); }
  .section { padding-top:76px; padding-bottom:76px; }
  .section-head { align-items:flex-start; flex-direction:column; }
  .contact { grid-template-columns:1fr; gap:38px; }
  .cta-band { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 620px) {
  h1 { font-size:52px; }
  h2 { font-size:36px; }
  .hero { padding-top:58px; }
  .brand-logo { width:155px; height:42px; }
  .mini-flow { grid-template-columns:1fr 1fr; }
  .mini-flow > i { display:none; }
  .metric-row { grid-template-columns:1fr; }
  .pipeline,.feature-grid,.cards { grid-template-columns:1fr; }
  .feature-wide, .feature-half, .feature-grid > .feature:not(.feature-half):not(.feature-wide) { grid-column:span 1; }
  .camera-scene { height:280px; }
  .ticker { justify-content:flex-start; padding-top:14px; padding-bottom:14px; }
  footer { align-items:flex-start; flex-direction:column; }
  footer .brand { margin-right:0; }
}

/* Panasonic validation / VisionEdge proof points */
.panasonic-validation { margin:30px 0 8px; padding:24px; border:1px solid var(--pale-blue); border-radius:var(--radius-md); background:linear-gradient(135deg,#fff 0%,#f4f8fb 100%); box-shadow:0 14px 32px rgba(57,122,164,.08); }
.panasonic-partner-row { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.panasonic-partner-row img { width:148px; max-width:42%; height:30px; object-fit:contain; object-position:left center; }
.panasonic-partner-row span { padding-left:16px; border-left:1px solid var(--pale-blue); color:var(--primary); font-size: calc(9px * var(--fs)); font-weight:850; letter-spacing:.14em; }
.panasonic-validation h3 { margin:0 0 9px; font-size:20px; letter-spacing:-.035em; }
.panasonic-validation > p { margin:0; color:var(--muted); font-size: calc(12px * var(--fs)); line-height:1.65; }
.ai-awards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.ai-award { padding:15px; border:1px solid rgba(57,122,164,.13); border-radius:12px; background:#fff; }
.ai-award strong { display:block; margin-bottom:6px; color:var(--primary-deep); font-size: calc(12px * var(--fs)); }
.ai-award span { display:block; color:var(--muted); font-size: calc(10px * var(--fs)); line-height:1.55; }
@media (max-width:520px) { .ai-awards { grid-template-columns:1fr; } .panasonic-partner-row { align-items:flex-start; flex-direction:column; } .panasonic-partner-row span { padding-left:0; border-left:0; } }

/* VisionEdge capability tags positioned above the right-side visual */
.vision-visual { min-width:0; }
.vision-points-over-video { margin:0 0 14px; justify-content:flex-start; }
.vision-points-over-video span { background:var(--page); }


/* ---------------------------------------------------------------
   WordPress / Jetpack Forms integration
   --------------------------------------------------------------- */
:root { --fs: 1.1; }
@media (min-width: 1100px) { :root { --fs: 1.16; } }
@media (min-width: 1500px) { :root { --fs: 1.2; } }

/* The slot itself becomes the card the original design draws, because the
   compatibility rules below strip Jetpack's own wrappers. */
.syn-form-slot {
  align-self: start;
  display: grid;
  gap: 14px;
  padding: 26px;
  border: 1px solid var(--pale-blue);
  border-radius: var(--radius-md);
  background: var(--page);
}

.syn-form-slot .wp-block-jetpack-contact-form-container,
.syn-form-slot .wp-block-jetpack-contact-form,
.syn-form-slot .contact-form,
.syn-form-slot form {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.syn-form-slot form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

/* Jetpack fields carry their own width settings (25%, 50%, inline flex basis)
   from the block editor. Force one full-width column instead. */
.syn-form-slot form > *,
.syn-form-slot .grunion-field-wrap,
.syn-form-slot .jetpack-field,
.syn-form-slot [class*="wp-block-jetpack-field"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  grid-column: 1 / -1 !important;
}

.syn-form-slot .grunion-field-wrap,
.syn-form-slot .jetpack-field,
.syn-form-slot [class*="wp-block-jetpack-field"] {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* Labels — "(required)" is hidden, the red border carries the meaning */
.syn-form-slot label,
.syn-form-slot .grunion-field-label,
.syn-form-slot .jetpack-field-label {
  display: block !important;
  margin: 0 0 6px !important;
  color: var(--primary-deep) !important;
  font-size: calc(11px * var(--fs)) !important;
  font-weight: 800 !important;
}
.syn-form-slot .grunion-label-required,
.syn-form-slot .required { display: none !important; }

/* Inputs */
.syn-form-slot input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.syn-form-slot textarea,
.syn-form-slot select {
  width: 100% !important;
  padding: 12px 13px !important;
  border: 1px solid var(--pale-blue) !important;
  border-radius: 9px !important;
  outline: none;
  color: var(--ink-strong) !important;
  background: var(--surface) !important;
  font-size: calc(13px * var(--fs)) !important;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.syn-form-slot textarea {
  height: 140px !important;
  min-height: 140px !important;
  max-height: 260px;
  resize: vertical;
}
.syn-form-slot input:focus,
.syn-form-slot textarea:focus,
.syn-form-slot select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(57, 122, 164, .12) !important;
}

/* Validation states */
.syn-form-slot input:user-invalid,
.syn-form-slot textarea:user-invalid {
  border-color: #d92c20 !important;
  box-shadow: 0 0 0 3px rgba(217, 44, 32, .13) !important;
}
.syn-form-slot .form-error,
.syn-form-slot .contact-form__input-error,
.syn-form-slot .form-error-message,
.syn-form-slot [role="alert"] {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #d92c20 !important;
  font-size: calc(10px * var(--fs)) !important;
  font-weight: 700 !important;
}

/* Submit button — full width, matching .primary in the design */
.syn-form-slot .wp-block-button,
.syn-form-slot .wp-block-buttons { width: 100%; margin: 4px 0 0 !important; }
.syn-form-slot .wp-block-button__link,
.syn-form-slot button[type="submit"],
.syn-form-slot input[type="submit"] {
  display: flex !important;
  width: 100% !important;
  min-height: 44px;
  padding: 12px 20px !important;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--surface) !important;
  background: var(--primary) !important;
  box-shadow: 0 12px 25px rgba(57, 122, 164, .22);
  font-size: calc(12px * var(--fs)) !important;
  font-weight: 800 !important;
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.syn-form-slot .wp-block-button__link:hover,
.syn-form-slot button[type="submit"]:hover,
.syn-form-slot input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 28px rgba(57, 122, 164, .3);
}

/* Our confirmation panel */
.syn-thanks { display: grid; gap: 12px; justify-items: start; }
.syn-thanks p { margin: 0; }
.syn-form-fallback { margin: 0; }

/* Real pages that are not the landing page */
.syn-generic .syn-entry { display: grid; gap: 14px; max-width: 760px; }
.syn-generic .syn-entry img { max-width: 100%; height: auto; }

/* WordPress core classes */
.alignleft { float: left; margin: 0 20px 20px 0; }
.alignright { float: right; margin: 0 0 20px 20px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.screen-reader-text {
  position: absolute !important;
  clip-path: inset(50%);
  width: 1px; height: 1px;
  overflow: hidden;
}
.admin-bar header { top: 32px; }

#contact { scroll-margin-top: 110px; }