@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%7C&display=swap");
/* Omni Tech Solutions - overrides layered on the Framer CSS */
body { margin: 0; }
a { text-decoration: none; }

/* Services dropdown */
#oc-dd {
  position: fixed; z-index: 2147483000; background: #1b1c1a; border-radius: 24px; padding: 20px;
  box-shadow: 0 20px 28px rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; max-width: calc(100vw - 24px);
}
#oc-dd.on { opacity: 1; transform: none; pointer-events: auto; }
#oc-dd a {
  display: flex; align-items: center; gap: 10px; color: #f2f0ec; font-family: "Inter Display", "Inter Display Placeholder", sans-serif;
  font-size: 18px; font-weight: 500; letter-spacing: -.02em; line-height: 1.6em; white-space: nowrap; transition: color .2s;
}
#oc-dd a:hover { color: rgb(241,130,34); }
html.oc-scrolled #oc-dd { background: #f0f0f0; }
html.oc-scrolled #oc-dd a { color: #10110f; }
html.oc-scrolled #oc-dd a:hover { color: rgb(217,120,31); }

/* Mobile / tablet menu */
#oc-mm { position: fixed; z-index: 2147482000; left: 12px; right: 12px; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto;
  background: #1b1c1a; border-radius: 24px; padding: 14px 22px 22px; box-shadow: 0 20px 40px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right; pointer-events: none; visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; display: flex; flex-direction: column; }
html.oc-menu-open #oc-mm { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
#oc-mm > a, #oc-mm .oc-mm-svc { display: flex; align-items: center; justify-content: space-between; color: #f2f0ec; font: 500 20px/1.3 "Inter Display","Inter Display Placeholder",sans-serif;
  letter-spacing: -.02em; padding: 13px 0; background: none; border: 0; border-bottom: 1px solid rgba(242,240,236,.1); text-align: left; cursor: pointer; width: 100%; }
#oc-mm .oc-mm-svc svg { transition: transform .25s ease; }
#oc-mm .oc-mm-svc[aria-expanded="true"] svg { transform: rotate(180deg); }
#oc-mm .oc-mm-sub { max-height: 0; overflow: hidden; transition: max-height .3s ease; display: flex; flex-direction: column; flex: none; }
#oc-mm .oc-mm-sub a { color: rgba(242,240,236,.78); font: 500 16px/1.35 "Inter Display","Inter Display Placeholder",sans-serif; padding: 10px 0 10px 14px; border-left: 2px solid #d9781f; margin: 4px 0 4px 2px; }
#oc-mm .oc-mm-cta { display: flex; gap: 10px; margin-top: 18px; align-items: center; }
#oc-mm .oc-mm-call { width: 50px; height: 50px; border-radius: 50%; background: #d9781f; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
#oc-mm .oc-mm-quote { flex: 1; height: 50px; border-radius: 30px; background: #d9781f; color: #fff; display: flex; align-items: center; justify-content: center; font: 500 18px "Inter Display","Inter Display Placeholder",sans-serif; }
html.oc-menu-open [data-framer-name="Menu Icon"] [data-framer-name="Top"] { transform: translateY(0) rotate(45deg) !important; top: 50% !important; margin-top: -1px; }
html.oc-menu-open [data-framer-name="Menu Icon"] [data-framer-name="Bottom"] { transform: translateY(0) rotate(-45deg) !important; bottom: auto !important; top: 50% !important; margin-top: -1px; }
@media (min-width: 1200px) { #oc-mm { display: none; } }

/* Nav: transparent at top, light bar once scrolled */
.framer-nhd07p-container header { transition: background-color .3s ease, gap .3s ease; }
.framer-1r4liwd { transition: opacity .25s ease, max-height .3s ease; max-height: 80px; }
html.oc-scrolled .framer-nhd07p-container header { background-color: #f0f0f0 !important; gap: 0 !important; align-items: center; }
html.oc-scrolled .framer-1r4liwd { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; }
html.oc-scrolled .framer-1v8jejr { width: 1200px; max-width: 100%; align-self: center; position: relative; }
html.oc-scrolled .framer-nhd07p-container header nav p { --framer-text-color: #10110f !important; color: #10110f !important; }
html.oc-scrolled .framer-nhd07p-container header nav .framer-5e7j8f p { --framer-text-color: #fff !important; color: #fff !important; }
html.oc-scrolled .framer-nhd07p-container header nav .framer-dfEX3 { --esondr: #10110f !important; }
html.oc-scrolled .framer-1b0qtck { background-color: #d9781f !important; }
html.oc-scrolled .framer-1b0qtck .framer-xkusiy { --esondr: #fff !important; background-color: #fff !important; }
.framer-nhd07p-container [data-framer-name="Logo"] a img { object-fit: contain !important; padding: 12% 19%; box-sizing: border-box; }

/* Buttons: colour pill wipes across on hover */
.oc-btn { overflow: hidden; }
.oc-btn .oc-wipe { position: absolute; right: var(--oc-r, 5px); top: 50%; height: var(--oc-h, 40px); transform: translateY(-50%); width: var(--oc-h, 40px); border-radius: 99px; transition: width .45s cubic-bezier(.22,1,.36,1); pointer-events: none; z-index: 0; }
.oc-btn:hover .oc-wipe { width: calc(100% - 2 * var(--oc-r, 5px)); }
.oc-btn p { transition: color .3s ease .05s; }
.oc-btn:hover p { color: var(--oc-hover-text, #fff) !important; }
.oc-phone { overflow: hidden; }
.oc-phone:hover > div:first-child { background-color: #fff !important; }
.oc-phone > div:first-child { transition: background-color .3s ease; position: relative; z-index: 1; }
.oc-phone [data-framer-name="Hover Circle"] { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.oc-phone:hover [data-framer-name="Hover Circle"] { transform: scale(14); }

/* "Ready to Bring Your Vision to Life?" CTA: the live site has white text on the light page background (unreadable) - use the site's dark text colours */
section[data-framer-name="CTA Section"] [data-framer-name="Header and Subheader"] h2 { --framer-text-color: #10110f !important; color: #10110f !important; }
section[data-framer-name="CTA Section"] [data-framer-name="Header and Subheader"] p { --framer-text-color: #5e5e5c !important; color: #5e5e5c !important; }

/* Forms */
.oc-form-status { font-family: "Inter Display","Inter Display Placeholder",Inter,sans-serif; font-size: 16px; line-height: 1.5; margin-top: 14px; min-height: 0; }
.oc-form-status:empty { display: none; }
.oc-form-status.ok { color: #1f6b3a; background: rgba(31,107,58,.08); border: 1px solid rgba(31,107,58,.25); border-radius: 14px; padding: 14px 18px; }
.oc-form-status.err { color: #a12a1a; background: rgba(161,42,26,.07); border: 1px solid rgba(161,42,26,.25); border-radius: 14px; padding: 14px 18px; }
.oc-form-status a { color: inherit; text-decoration: underline; }
form button[type="submit"][disabled] { opacity: .7; cursor: default; }

/* Project cards */
.oc-cardlink { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }

/* Marquee */
@keyframes oc-marquee { from { transform: translateX(0); } to { transform: translateX(var(--oc-dist, -50%)); } }

/* FAQ */
.oc-faq { cursor: pointer; }

#services{scroll-margin-top:90px}

/* footer logo: bigger, shown whole */
footer [data-framer-name="Modivana Logo Light"] img{object-fit:contain!important}
footer .framer-zqb702-container,footer .framer-zqb702-container a,footer .framer-zqb702-container [data-framer-name="Modivana Logo Light"]{width:124px!important;height:124px!important}

/* QA fixes 2026-10-05 */
/* FAQ answers keep their line breaks (the first answer is a list) */
[data-framer-name^="FAQ Item"] p.framer-styles-preset-d0hpp0 { white-space: pre-line; }
/* bigger tap targets on phones */
@media (max-width: 809px) {
  #oc-mm .oc-mm-sub a { padding-top: 13px; padding-bottom: 13px; }
  a.framer-text[href^="tel:"], a.framer-text[href^="mailto:"] { display: inline-block; padding: 8px 0; }
}

/* footer: four link columns (Quick Links, Services, Service Areas, Contact) need breathing room */
footer [data-framer-name="Right Content"] { gap: 24px !important; }
footer [data-framer-name="Right Content"] [data-framer-name="CMS Pages"] { flex: 1 1 120px !important; min-width: 120px; }
@media (max-width: 1199px) { footer [data-framer-name="Right Content"] { flex-wrap: wrap; row-gap: 28px; } }

/* Digital Edge IQ credit badge (footer bottom row, every page) */
footer [data-framer-name="Bottom Content"] { flex-direction: column !important; align-items: center; gap: 14px !important; }
footer a.dei-credit{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 18px 8px;border-radius:14px;color:#0c2342;text-decoration:none;text-align:center;line-height:1;font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;background:linear-gradient(100deg,#00a0e3,#61c554,#ff4d00,#00a0e3);background-size:300% 100%;animation:deiShift 4s linear infinite;box-shadow:0 8px 18px -10px rgba(0,0,0,.7);transition:transform .2s,box-shadow .2s}
footer a.dei-credit small{font:600 8.5px/1 "Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.9}
footer a.dei-credit b{font:700 15px/1 "Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
footer a.dei-credit i{font-style:normal;font-weight:400;margin:0 .32em;opacity:.7}
footer a.dei-credit:hover{transform:translateY(-1px);box-shadow:0 12px 22px -10px rgba(0,0,0,.8)}
@keyframes deiShift{to{background-position:300% 0}}
@media (prefers-reduced-motion:reduce){footer a.dei-credit{animation:none}}
footer [data-framer-name="Bottom Content"] { height: auto !important; }
footer [data-framer-name="Bottom Content"] > [data-framer-component-type="RichTextContainer"] { flex: none !important; width: auto !important; height: auto !important; }

/* ===== compact footer (replaces the three saved Framer footers) ===== */
.oc-footer { background: #000; color: #acaba8; font-family: "Inter Display", Inter, system-ui, sans-serif; padding: 26px 24px 12px; position: relative; z-index: 2; }
.oc-footer a { color: inherit; text-decoration: none; transition: color .2s ease; }
.ocf-wrap { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.7fr .7fr 1.45fr .75fr 1.55fr; gap: 26px; align-items: start; }
.ocf-brand img { display: block; width: 76px; height: auto; margin: 0 0 8px; }
.ocf-brand p { margin: 0 0 10px; font-size: 13px; line-height: 1.45; max-width: 330px; }
.ocf-social { display: flex; gap: 10px; }
.ocf-social a { width: 30px; height: 30px; border: 1px solid #3a3a38; border-radius: 50%; display: grid; place-items: center; color: #e4e2de; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.ocf-social a:hover { border-color: #f18222; color: #f18222; }
.ocf-col h3 { margin: 0 0 9px; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; color: #f2f0ec; }
.ocf-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ocf-col li a { font-size: 13px; line-height: 1.35; display: inline-block; }
.ocf-col li a:hover { color: #f18222; }
.ocf-contact li a { display: flex; gap: 10px; align-items: flex-start; }
.ocf-contact svg { flex: none; margin-top: 2px; color: #f18222; }
.ocf-bottom { max-width: 1200px; margin: 16px auto 0; padding-top: 10px; border-top: 1px solid #1f1f1e; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.ocf-bottom p { justify-self: start; }
.ocf-bottom .dei-credit { justify-self: center; }
.ocf-bottom p { margin: 0; font-size: 12px; }
@media (max-width: 1099px) {
  .ocf-wrap { grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
  .ocf-brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 8px 22px; align-items: center; }
  .ocf-brand img { margin: 0; grid-row: 1; }
  .ocf-brand p { margin: 0; max-width: none; }
}
@media (max-width: 699px) {
  .oc-footer { padding: 30px 20px 76px; }   /* room at the very bottom so the chat bubble never covers the (c) line */
  .ocf-wrap { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .ocf-brand { grid-template-columns: auto 1fr; }
  .ocf-brand .ocf-social { grid-column: 1 / -1; }
  .ocf-svc, .ocf-contact { grid-column: 1 / -1; }
  .ocf-brand { order: 0; } .ocf-wrap > nav:nth-of-type(1) { order: 1; } .ocf-areas { order: 2; } .ocf-svc { order: 3; } .ocf-contact { order: 4; }
  .ocf-svc ul { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .ocf-col li a { padding: 3px 0; }
  .ocf-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .ocf-bottom p { justify-self: center; order: 2; }
  .ocf-bottom .dei-credit { order: 1; }
}

.ocf-contact li a span { white-space: normal; }
.ocf-contact .ocf-street { white-space: nowrap; }

@media (max-width: 1099px) { .ocf-wrap { gap: 20px 22px; } .ocf-brand img { width: 68px; } }
@media (max-width: 699px) {
  .oc-footer { padding: 22px 18px 72px; }
  .ocf-wrap { gap: 18px 16px; }
  .ocf-brand img { width: 62px; }
  .ocf-col li a { padding: 2px 0; }
  .ocf-svc ul { gap: 4px 14px; }
  .ocf-bottom { gap: 10px; margin-top: 14px; }
}

/* Our Process turns black while it is on screen */
[data-framer-name="Process Section"] { transition: background-color .7s ease; }
[data-framer-name="Process Section"] h2, [data-framer-name="Process Section"] h3, [data-framer-name="Process Section"] p { transition: color .7s ease; }
[data-framer-name="Process Section"].oc-dark { background-color: #000; }
[data-framer-name="Process Section"].oc-dark h2, [data-framer-name="Process Section"].oc-dark h3 { color: #fff !important; }
[data-framer-name="Process Section"].oc-dark p { color: #acaba8 !important; }
[data-framer-name="Process Section"].oc-dark p.oc-step-num { color: #6b6b69 !important; }
[data-framer-name="Process Section"].oc-dark p.oc-step-num.oc-step-on { color: #fff !important; }
[data-framer-name="Process Section"].oc-dark svg { filter: invert(1); }
@media (prefers-reduced-motion: reduce) { [data-framer-name="Process Section"], [data-framer-name="Process Section"] * { transition: none !important; } }

/* Our Process progress line = LED strip: a dark strip with a row of dim LEDs; lit LEDs glow orange as you scroll through each step */
[data-framer-name="Process Section"] [data-framer-name="Progress Bar"] { width: 10px !important; margin-left: -3px; border-radius: 5px;
  overflow: visible !important; clip-path: none;
  background-color: #0e0e0e !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,.2) 0, rgba(255,255,255,.2) 1.6px, transparent 2.4px); background-size: 100% 12px; }
[data-framer-name="Process Section"] [data-framer-name="Bar Fill"] { width: 100% !important; left: 0; border-radius: 5px; transition: height .12s linear;
  background-color: rgba(217,120,31,.30) !important;
  background-image: radial-gradient(circle at 50% 50%, #fff4e0 0, #fff4e0 1.2px, #ffb45e 2px, #ff8a1f 2.8px, rgba(255,138,31,0) 4.2px); background-size: 100% 12px;
  filter: drop-shadow(0 0 3px rgba(255,150,50,.9));
  box-shadow: 0 0 8px 1px rgba(255,138,31,.55), 0 0 22px 3px rgba(255,138,31,.32), 0 0 48px 8px rgba(255,138,31,.17), 0 0 90px 14px rgba(255,138,31,.08); }
@media (prefers-reduced-motion: reduce) { [data-framer-name="Process Section"] [data-framer-name="Bar Fill"] { transition: none; } }
/* let the LED glow fade out freely (these Framer containers were clipping it into hard edges) */
[data-framer-name="Process Section"] [data-framer-name="Progress Bar Container"],
[data-framer-name="Process Section"] [data-framer-name="Process Steps"],
[data-framer-name="Process Section"] [data-framer-name*="Image with"] { overflow: visible !important; }

.oc-pill-sub { display: block; font-size: .74em; font-weight: 400; opacity: .92; line-height: 1.2; text-align: center; white-space: nowrap; margin-top: -1px; }

/* ===== Golf / Sports Simulators: photo + text rows ===== */
.oc-sim { background: #f0f0f0; padding: 64px 24px 72px; font-family: "Inter Display", Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.oc-sim-wrap { max-width: 1160px; margin: 0 auto; }
.oc-sim-intro { max-width: 860px; margin: 0 auto 60px; text-align: center; font-size: 19px; line-height: 1.65; color: #5e5e5c; }
.oc-sim-row { display: grid; grid-template-columns: 1.08fr 1fr; gap: 56px; align-items: center; margin: 0 0 72px; }
.oc-sim-row.flip { grid-template-columns: 1fr 1.08fr; }
.oc-sim-row.flip .oc-sim-photo { order: 2; }
.oc-sim-photo { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 44px -18px rgba(16,17,15,.5); aspect-ratio: 3 / 2; background: #0b0d12; }
.oc-sim-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.oc-sim-row:hover .oc-sim-photo img { transform: scale(1.035); }
.oc-sim-photo:after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); pointer-events: none; }
.oc-sim-tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #f18222; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em; margin-bottom: 16px; }
.oc-sim-copy h3 { margin: 0 0 16px; font-size: clamp(26px, 3vw, 38px); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; color: #10110f; }
.oc-sim-copy p { margin: 0; font-size: 18px; line-height: 1.7; color: #5e5e5c; }
.oc-sim-close { max-width: 900px; margin: 0 auto; padding: 30px 36px; border-radius: 20px; background: #10110f; color: #e8e6e1; text-align: center; border-top: 3px solid #f18222; }
.oc-sim-close p { margin: 0; font-size: 19px; line-height: 1.6; }
@media (max-width: 899px) {
  .oc-sim { padding: 44px 18px 52px; }
  .oc-sim-intro { font-size: 17px; margin-bottom: 40px; text-align: left; }
  .oc-sim-row, .oc-sim-row.flip { grid-template-columns: 1fr; gap: 22px; margin-bottom: 46px; }
  .oc-sim-row.flip .oc-sim-photo { order: 0; }
  .oc-sim-copy p { font-size: 16.5px; }
  .oc-sim-close { padding: 24px 22px; }
  .oc-sim-close p { font-size: 17px; }
}

/* ===== service pages: intro band + "On this page" links ===== */
.oc-intro { max-width: 1160px; margin: 0 auto; padding: 60px 24px 28px; font-family: "Inter Display", Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.oc-intro-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; }
.oc-intro-lead { margin: 0; font-size: clamp(18px, 1.5vw, 20.5px); line-height: 1.6; font-weight: 600; letter-spacing: -.008em; color: #10110f; }
.oc-intro-tag { display: inline-block; margin-bottom: 14px; padding: 5px 13px; border-radius: 999px; background: #f18222; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.oc-intro-grid.solo, .oc-intro-grid.long { grid-template-columns: 1fr; max-width: 920px; }
.oc-intro-sub p { margin: 0 0 12px; }
.oc-intro-sub p:last-child { margin-bottom: 0; }
.oc-intro-grid.long .oc-intro-sub { margin-top: 6px; }
.oc-intro-sub { position: relative; margin: 4px 0 0; padding-left: 26px; font-size: 16.5px; line-height: 1.7; color: #5e5e5c; }
.oc-intro-sub:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: #f18222; transform-origin: top; }
html.oc-draw .oc-intro-sub:before { transform: scaleY(var(--draw, 0)); box-shadow: 0 0 10px rgba(241,130,34,.55); }
.oc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; padding-top: 26px; border-top: 1px solid #dcdad5; }
.oc-chips span { margin-right: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8a8985; }
.oc-chips a { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid #dcdad5; color: #10110f; font-size: 14.5px; font-weight: 500; text-decoration: none; line-height: 1.2; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.oc-chips a:hover { background: #f18222; border-color: #f18222; color: #fff; transform: translateY(-1px); }
[id^="oc-sec-"] { scroll-margin-top: 110px; }
@media (max-width: 899px) {
  .oc-intro { padding: 38px 18px 14px; }
  .oc-intro-grid { grid-template-columns: 1fr; gap: 22px; }
  .oc-intro-lead { font-size: 17.5px; }
  .oc-intro-sub { font-size: 16.5px; padding-left: 18px; }
  .oc-chips { margin-top: 28px; padding-top: 20px; gap: 8px; }
  .oc-chips span { flex-basis: 100%; margin: 0 0 2px; }
  .oc-chips a { font-size: 13.5px; padding: 8px 13px; }
}
section[data-framer-name="Single Service Section"]:has(> .oc-intro) { flex-direction: column; align-items: center; padding-top: 24px; }
section[data-framer-name="Single Service Section"] > .oc-intro { width: 100%; box-sizing: border-box; }
section[data-framer-name="Single Service Section"] > .oc-intro ~ div { width: 100%; max-width: 1160px; flex: none; }

/* photo tiles that jump to each section */
.oc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 0 0 46px; }
.oc-tile { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #0b0d12; box-shadow: 0 12px 28px -16px rgba(16,17,15,.55); text-decoration: none; }
.oc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .3s ease; }
.oc-tile:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,12,0) 35%, rgba(8,8,12,.86) 100%); }
.oc-tile span { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; color: #fff; font-size: 13.5px; line-height: 1.25; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.oc-tile:before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #f18222; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; z-index: 3; }
.oc-tile:hover img { transform: scale(1.07); }
.oc-tile:hover:before, .oc-tile:focus-visible:before { transform: scaleX(1); }
.oc-tile:focus-visible { outline: 2px solid #f18222; outline-offset: 3px; }
@media (max-width: 899px) { .oc-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 30px; } .oc-tile span { font-size: 13px; } }

/* long intro copy (Smart Home): headed blocks + feature cards */
.oc-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; max-width: 1160px; margin: 8px 0 34px; padding-left: 26px; }
.oc-blocks.oc-intro-sub { display: grid; margin-top: 8px; }
.oc-block h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: #10110f; }
.oc-block p { margin: 0; font-size: 16.5px; line-height: 1.7; color: #5e5e5c; }
.oc-feat { margin: 10px 0 18px; }
.oc-feat h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: #10110f; }
.oc-feat > p { margin: 0 0 20px; font-size: 16.5px; line-height: 1.6; color: #5e5e5c; }
.oc-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.oc-feat-card { background: #fff; border-radius: 14px; padding: 18px 20px 20px; border-top: 3px solid #f18222; box-shadow: 0 10px 24px -18px rgba(16,17,15,.5); display: flex; flex-direction: column; gap: 6px; }
.oc-feat-card b { font-size: 16.5px; font-weight: 700; color: #10110f; letter-spacing: -.005em; }
.oc-feat-card span { font-size: 14.5px; line-height: 1.55; color: #5e5e5c; }
@media (max-width: 899px) {
  .oc-blocks { grid-template-columns: 1fr; padding-left: 18px; gap: 18px; }
  .oc-feat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .oc-feat-card { padding: 14px 15px 16px; }
  .oc-feat-card b { font-size: 15px; }
  .oc-feat-card span { font-size: 13.5px; }
}
@media (max-width: 520px) { .oc-feat-grid { grid-template-columns: 1fr; } }

.oc-intro-mid { padding-top: 6px; padding-bottom: 6px; width: 100%; box-sizing: border-box; }