/*
Theme Name: Studio iD
Theme URI: https://studioid.in
Description: Studio iD website theme. Child theme of Hello Elementor. Header, footer and pages are built with Elementor (Header Footer Elementor plugin for header/footer + WordPress menus).
Author: Studio iD
Template: hello-elementor
Version: 1.0.0
Text Domain: studioid
*/

/* Safety net against accidental horizontal scroll from full-width sections. */
html, body { overflow-x: hidden; }

/* Header Footer Elementor navigation menu: match design (red active item). */
.hfe-nav-menu .menu-item a.hfe-menu-item { font-family: var(--sid-font); }


/* Product strip: continuous infinite marquee (row of Image widgets, duplicated once) */
.studioid-marquee { width: max-content !important; max-width: none !important; animation: studioid-marquee 40s linear infinite; will-change: transform; }
.studioid-marquee:hover { animation-play-state: paused; }
@keyframes studioid-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 767px) { .studioid-marquee { animation-duration: 28s; } }

/* ---------- Home hero slider (matches studioid.in): slides stacked on top of each
   other and moved sideways by assets/hero-slider.js, so each change of slide reads
   as one horizontal push - the same motion as the carousel on the live site. ---------- */
body:not(.elementor-editor-active) .studioid-hero { display: block !important; position: relative; overflow: hidden; }
body:not(.elementor-editor-active) .studioid-hero > .studioid-hero__slide {
	position: absolute; inset: 0; width: 100%; z-index: 1; pointer-events: none;
	transform: translateX(100%); transition: transform .85s cubic-bezier(.22,.61,.36,1); }
body:not(.elementor-editor-active) .studioid-hero > .studioid-hero__slide.is-active {
	transform: translateX(0); pointer-events: auto; z-index: 3; }
body:not(.elementor-editor-active) .studioid-hero > .studioid-hero__slide.is-prev { transform: translateX(-100%); z-index: 2; }
/* A backwards move (dot jump, swipe right, left arrow) mirrors the push. */
body:not(.elementor-editor-active) .studioid-hero.studioid-hero--rev > .studioid-hero__slide { transform: translateX(-100%); }
body:not(.elementor-editor-active) .studioid-hero.studioid-hero--rev > .studioid-hero__slide.is-active { transform: translateX(0); }
body:not(.elementor-editor-active) .studioid-hero.studioid-hero--rev > .studioid-hero__slide.is-prev { transform: translateX(100%); }
.studioid-hero-wrap { position: relative; }
.studioid-hero__slide { position: relative; }
.studioid-hero__slide::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(12,12,12,.78) 0%, rgba(12,12,12,.55) 34%, rgba(12,12,12,0) 62%); }
.studioid-hero__inner { position: relative; z-index: 1; }
.studioid-hero__inner .elementor-heading-title { text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.studioid-hero__dots {
	position: absolute; left: 0; right: 0; bottom: 28px; z-index: 4;
	display: flex; justify-content: center; gap: 10px; padding: 0; background: transparent; }
.studioid-hero__dots button {
	width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
	background: rgba(255,255,255,.45); transition: width .3s ease, background .3s ease; }
.studioid-hero__dots button:hover { background: rgba(255,255,255,.75); }
.studioid-hero__dots button.is-active { width: 30px; background: #ffffff; }
@media (max-width: 767px) {
	.studioid-hero__slide::before { background: linear-gradient(180deg, rgba(12,12,12,.72) 0%, rgba(12,12,12,.45) 55%, rgba(12,12,12,.60) 100%); }
	.studioid-hero__dots { bottom: 18px; }
}

/* ---------- Full-bleed autoplay video, cropped top and bottom (home + about) ---------- */
.studioid-video-crop { height: 44vw; overflow: hidden; justify-content: center !important; width: 100%; }
.studioid-video-crop .elementor-widget-video { width: 100%; margin: 0; }
.studioid-video-crop .elementor-widget-video .elementor-widget-container { width: 100%; }
.studioid-video-crop .elementor-wrapper { position: static !important; padding: 0 !important; height: auto !important; overflow: visible; }
.studioid-video-crop video.elementor-video { position: static !important; display: block; width: 100%; height: auto; }
.studioid-video-crop iframe.elementor-video, .studioid-video-crop .elementor-video { width: 100%; }
.studioid-video-crop iframe.elementor-video { position: static !important; height: 56.25vw; display: block; }
.studioid-video-crop--about { height: 40vw; }
@media (max-width: 767px) { .studioid-video-crop, .studioid-video-crop--about { height: 56.25vw; } }

/* ---------- Inner pages: card cover images, map embed ---------- */
.studioid-cover { width: 100%; }
.studioid-cover .elementor-widget-image, .studioid-cover .elementor-widget-container, .studioid-cover img { width: 100%; display: block; }
.studioid-cover--cover img { object-fit: cover; }
.studioid-cover--contain img { object-fit: contain; }
.studioid-map, .studioid-map .elementor-widget-container { height: 100%; min-height: 420px; }
.studioid-map iframe { width: 100%; height: 100%; }

/* ---------- Services / About / Contact v2 ---------- */
.studioid-frame--accent { box-shadow: 18px 18px 0 0 #C8202A; margin-right: 18px; margin-bottom: 18px; }
.studioid-stat .elementor-counter-number-wrapper { justify-content: center; }
.studioid-timeline { position: relative; }
.studioid-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #C8202A; }
.studioid-milestone { position: relative; }
.studioid-milestone::before { content: ""; position: absolute; top: -7px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #C8202A; box-shadow: 0 0 0 5px #ffffff; }
@media (max-width: 1024px) { .studioid-timeline::before { display: none; } .studioid-milestone::before { display: none; } .studioid-milestone { padding-top: 0 !important; } }
.studioid-accordion .elementor-accordion .elementor-accordion-item { border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.studioid-accordion .elementor-accordion .elementor-accordion-item + .elementor-accordion-item { border-top: 1px solid #e6e8ec; }
.studioid-feature { transition: transform .25s ease, box-shadow .25s ease; }
.studioid-step, .studioid-logo { transition: transform .25s ease, box-shadow .25s ease; }
.studioid-logo img { filter: grayscale(100%); opacity: .75; transition: filter .25s ease, opacity .25s ease; }
.studioid-logo:hover img { filter: none; opacity: 1; }
.studioid-map-band .studioid-map iframe { height: 460px; }
.studioid-bignum { line-height: 1; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
.studioid-feature > .e-con:first-child { flex: 0 0 84px; width: 84px; min-width: 84px; }
.studioid-feature > .e-con:last-child { flex: 1 1 0; min-width: 0; }
.studioid-feature img { width: 84px; height: 84px; object-fit: cover; display: block; }

/* ---------- Contact Form 7 styling (matches Elementor cards) ---------- */
.sid-form { display: flex; flex-direction: column; gap: 16px; }
.sid-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .sid-form__row { grid-template-columns: 1fr; } }
.sid-form label { display: flex; flex-direction: column; gap: 6px; font: 600 13px/1.3 var(--sid-font); color: #1f2430; }
.sid-form .sid-form__req { color: #c8202a; font-weight: 700; }
.sid-form .sid-form__lbl { display: block; }
.sid-form .wpcf7-form-control-wrap { display: block; width: 100%; }
.sid-form input[type="text"], .sid-form input[type="email"], .sid-form input[type="tel"], .sid-form select, .sid-form textarea {
	width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #e0e3e8; border-radius: 10px; background: #fff; font: 400 15px/1.5 var(--sid-font); color: #1f2430; transition: border-color .2s, box-shadow .2s; }
.sid-form input:focus, .sid-form select:focus, .sid-form textarea:focus { outline: none; border-color: #C8202A; box-shadow: 0 0 0 3px rgba(200,32,42,0.14); }
.sid-form textarea { min-height: 130px; resize: vertical; }
.sid-form__consent { flex-direction: row !important; align-items: flex-start; font-weight: 400 !important; color: #5f6672 !important; }
.sid-form__consent .wpcf7-form-control-wrap { width: auto; }
.sid-form__consent .wpcf7-list-item { margin: 0; }
.sid-form__consent .wpcf7-list-item label { flex-direction: row; gap: 10px; font-weight: 400; color: #5f6672; align-items: flex-start; }
.sid-form__consent input[type="checkbox"] { margin-top: 3px; accent-color: #C8202A; }
.sid-form__submit { width: 100%; padding: 15px 32px; border: 0; border-radius: 10px; background: #c8202a; color: #fff; font: 600 15px/1 var(--sid-font); letter-spacing: .2px; cursor: pointer; transition: background .2s, transform .2s; }
.sid-form__submit:hover { background: #a51920; }
.wpcf7 .wpcf7-spinner { display: block; margin: 8px auto 0; }
.wpcf7 .wpcf7-not-valid-tip { font-size: 12px; color: #c8202a; margin-top: 4px; }
.wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 12px 16px; border-radius: 10px; border: 1px solid #e0e3e8; font: 400 14px/1.5 var(--sid-font); }
.wpcf7 form.sent .wpcf7-response-output { border-color: #2e7d32; background: #edf7ee; color: #1b5e20; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: #c8202a; background: #fdecec; color: #8a1116; }
/* Tablet/mobile safety for framed images and big numbers */
@media (max-width: 1024px) { .studioid-frame--accent { box-shadow: 12px 12px 0 0 #C8202A; margin-right: 12px; margin-bottom: 12px; } .studioid-bignum { font-size: 44px !important; } }
.sid-form label { align-items: stretch; min-width: 0; }
.sid-form label > .wpcf7-form-control-wrap, .sid-form label > .wpcf7-form-control-wrap > .wpcf7-form-control:not([type="checkbox"]) { display: block; width: 100% !important; max-width: 100%; }

/* ---------- Video mute / unmute toggle ---------- */
.studioid-video-crop { position: relative; }
.studioid-sound { position: absolute; right: 24px; bottom: 24px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; background: rgba(15,18,22,0.6); color: #fff; font: 600 13px/1 var(--sid-font); letter-spacing: .2px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s, transform .2s; }
.studioid-sound:hover { background: #C8202A; border-color: #C8202A; }
.studioid-sound svg { display: block; }
@media (max-width: 767px) { .studioid-sound { right: 12px; bottom: 12px; padding: 9px 12px; } .studioid-sound span { display: none; } }

/* ---------- Image tiles: layout and colour live in Elementor; this is polish only ---------- */
.sid-tile { overflow: hidden; }

.sid-rule { flex: 0 0 auto; border-radius: 2px; margin-left: auto !important; margin-right: auto !important; align-self: center; }

/* ---------- Home: category cards + stats — hover polish only (layout is Elementor) ---------- */
.sid-pf-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.sid-pf-card:hover { border-color: #d9dde4; }
.sid-pf-card__head a, .sid-pf-card__link a { text-decoration: none; }
.sid-pf-card__link a { color: #C8202A; transition: letter-spacing .2s ease; }
.sid-pf-card:hover .sid-pf-card__link a { letter-spacing: .4px; }
.sid-pf-card__pic img { height: 120px; object-fit: contain; transition: transform .35s cubic-bezier(.2,.6,.2,1); }
@media (max-width: 767px) { .sid-pf-card__pic img { height: 96px; } }

/* ---------- Footer + Instagram strip — colour and hover polish (layout is Elementor) ---------- */
/* logo.png carries 26px of transparent margin either side of the wordmark in a
   477px-wide file, so at the footer's 190px the ink starts ~10px in and the
   logo never lined up with the tagline under it. Pull it back by that much. */
.sid-footer__logo img { max-width: 190px; height: auto; margin-left: -10px; }
.sid-footer a { color: inherit; text-decoration: none; }
.sid-footer .elementor-widget-text-editor a:hover { color: #C8202A; text-decoration: underline; }
.sid-footer .elementor-social-icon { transition: transform .2s ease, background-color .2s ease; }
.sid-footer .elementor-social-icon:hover { background-color: #C8202A !important; }
.sid-footer__credit a:hover { color: #C8202A; }
.sid-ig__title a { color: #ffffff; text-decoration: none; border-bottom: 2px solid #E8A33D; padding-bottom: 2px; }
.sid-ig__title a:hover { color: #E8A33D; }
.sid-ig__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block;
	filter: saturate(.92); transition: transform .35s cubic-bezier(.2,.6,.2,1), filter .35s ease; }
.sid-ig__item:hover img { filter: saturate(1.05); }

@media (prefers-reduced-motion: reduce) {
	.sid-tile .sid-tile__label, .sid-pf-card, .sid-pf-card__pic img, .sid-ig__item img { transition: none; }
	.sid-pf-card:hover { transform: none; }
	.sid-ig__item:hover img, .sid-pf-card:hover .sid-pf-card__pic img { transform: none; }
}

/* Header nav: keep the six items on one line (desktop only; HFE collapses below 1025px) */
@media (min-width: 1025px) {
	.hfe-nav-menu__layout-horizontal .hfe-nav-menu { flex-wrap: nowrap !important; }
	.hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item > a.hfe-menu-item { white-space: nowrap; }
}
@media (max-width: 1200px) and (min-width: 1025px) {
	.hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item > a.hfe-menu-item { padding-left: 10px !important; padding-right: 10px !important; }
}
.sid-phase-link a { color: inherit; text-decoration: none; transition: color .2s ease; }
.sid-phase-link a:hover { color: #C8202A; }
/* Collapsed (hamburger) nav: drop it out of flow so it never widens the page */
@media (max-width: 1024px) {
	.ehf-header [data-elementor-type="wp-post"] > .e-con { position: relative; }
	.ehf-header .elementor-widget-navigation-menu > .elementor-widget-container { max-width: 100%; }
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal {
		position: absolute; top: 100%; left: 0; right: 0; width: 100%;
		background: #ffffff; z-index: 99; }
	.hfe-nav-menu__breakpoint-tablet .hfe-active-menu + .hfe-nav-menu__layout-horizontal {
		padding: 6px 0 14px; box-shadow: 0 18px 40px rgba(15,23,42,.12); border-bottom: 1px solid #eef0f3; }
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.menu-item > a.hfe-menu-item { padding-left: 24px !important; }
}

/* ================= 2026-09 client revision ================= */

/* ---------- Hero: light (grey) slider matching studioid.in ---------- */
.studioid-hero--light .studioid-hero__slide::before { display: none; }
.studioid-hero--light .studioid-hero__inner .elementor-heading-title { text-shadow: none; }
/* The product fills its half of the hero, the way studioid.in shows it. */
.studioid-hero__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block;
	transition: transform .9s cubic-bezier(.2,.6,.2,1); }
body:not(.elementor-editor-active) .studioid-hero__slide.is-active .studioid-hero__media img { transform: scale(1.03); }
.studioid-hero--light + .studioid-hero__dots { bottom: 22px; }
.studioid-hero--light + .studioid-hero__dots button { background: rgba(31,36,48,.28); }
.studioid-hero--light + .studioid-hero__dots button:hover { background: rgba(31,36,48,.5); }
.studioid-hero--light + .studioid-hero__dots button.is-active { background: #1F2430; }
/* Text of the active slide rises into place. Front end only: inside the
   Elementor editor no slide is marked active, so the rule would hide every
   slide's content and leave the hero looking empty and uneditable. */
body:not(.elementor-editor-active) .studioid-hero__slide .studioid-hero__inner > * { transform: translateY(14px); opacity: 0; transition: transform .7s cubic-bezier(.2,.6,.2,1), opacity .7s ease; }
body:not(.elementor-editor-active) .studioid-hero__slide.is-active .studioid-hero__inner > * { transform: none; opacity: 1; }
body:not(.elementor-editor-active) .studioid-hero__slide.is-active .studioid-hero__inner > *:nth-child(2) { transition-delay: .12s; }

/* ---------- Square image tiles (portfolio grid + category galleries) ---------- */
.sid-tile--sq { aspect-ratio: 1 / 1; min-height: 0 !important; }
.sid-tile { position: relative; transition: transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s ease; background-size: cover; background-position: center; }
.sid-tile::after { content: ""; position: absolute; inset: 0; background: rgba(15,20,30,0); transition: background .35s ease; pointer-events: none; }
.sid-tile:hover::after { background: rgba(15,20,30,.28); }
.sid-tile > * { position: relative; z-index: 1; }
@media (max-width: 767px) { .sid-tile:hover { transform: none; box-shadow: none; } }

/* ---------- Category pages: project cards (square image + name + link) ---------- */
.sid-proj-card { position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease, border-color .3s ease; }
.sid-proj-card a { text-decoration: none; color: inherit; }
.sid-proj-card__pic { position: relative; overflow: hidden; aspect-ratio: 1 / 1; width: 100%; }
.sid-proj-card__pic img { width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.sid-proj-card:hover { border-color: #d9dde4 !important; }
.sid-proj-card__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,20,30,0) 55%, rgba(15,20,30,.35) 100%); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.sid-proj-card:hover .sid-proj-card__pic::after { opacity: 1; }
.sid-proj-card__go { color: #C8202A; transition: transform .3s ease; display: inline-block; }
.sid-proj-card:hover .sid-proj-card__go { transform: translateX(4px); }
.sid-proj-card__link { position: absolute; inset: 0; z-index: 2; text-indent: -9999px; overflow: hidden; }


/* ---------- Services: phase cards ---------- */
.sid-phase-card { overflow: hidden; transition: transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease; }
.sid-phase-card__pic { overflow: hidden; }
.sid-phase-card__pic img { width: 100%; display: block; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.sid-phase-card__num { letter-spacing: .18em; }
.sid-phase-card a { text-decoration: none; }

/* ---------- Service inner pages: sub-service cards ---------- */
.sid-svc-card { overflow: hidden; transition: transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease, border-color .3s ease; }
.sid-svc-card:hover { border-color: #d9dde4 !important; }
.sid-svc-card__pic { overflow: hidden; aspect-ratio: 16 / 10; }
.sid-svc-card__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.2,.6,.2,1); }

/* ---------- Project detail pages ---------- */
.sid-detail__hero img { width: 100%; display: block; }
.sid-detail__thumb { overflow: hidden; }
.sid-detail__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.sid-detail__meta { letter-spacing: .14em; }

/* ---------- Buttons and links: shared hover behaviour ---------- */
.elementor-button:hover { box-shadow: 0 12px 26px rgba(200,32,42,.22); }
.elementor-widget-button .elementor-button-icon { transition: transform .25s ease; }
.elementor-button:hover .elementor-button-icon { transform: translateX(4px); }
.hfe-nav-menu .menu-item a.hfe-menu-item { position: relative; transition: color .2s ease; }
.hfe-nav-menu .menu-item a.hfe-menu-item::after {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: #C8202A;
	transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2,.6,.2,1); }
.hfe-nav-menu .menu-item a.hfe-menu-item:hover::after { transform: scaleX(1); }

/* ---------- Scroll reveal (assets/site-motion.js) ---------- */
.sid-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1); will-change: opacity, transform; }
.sid-reveal--card { transform: translateY(18px); transition-delay: var(--sid-delay, 0ms); }
.sid-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.sid-reveal, .sid-reveal--card { opacity: 1 !important; transform: none !important; transition: none !important; }
	body:not(.elementor-editor-active) .studioid-hero > .studioid-hero__slide { transition: none; }
	.studioid-hero__slide .studioid-hero__inner > *, .studioid-hero__media img { transition: none; transform: none; }
	.sid-tile:hover, .sid-proj-card:hover, .sid-phase-card:hover, .sid-svc-card:hover, .elementor-button:hover { transform: none; }
	.sid-proj-card:hover .sid-proj-card__pic img, .sid-phase-card:hover .sid-phase-card__pic img,
	.sid-svc-card:hover .sid-svc-card__pic img, .sid-detail__thumb:hover img { transform: none; }
	.studioid-marquee { animation: none; }
}

/* ---------- Theme contact form (replaces the Contact Form 7 shortcode) ---------- */
.sid-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sid-form__consent span { font-weight: 400; color: #5f6672; }
.sid-form__consent input[type="checkbox"] { width: auto; }
.sid-form__note { margin: 4px 0 0; padding: 12px 16px; border-radius: 10px; border: 1px solid #e0e3e8; font: 400 14px/1.5 var(--sid-font); }
.sid-form__note--ok { border-color: #2e7d32; background: #edf7ee; color: #1b5e20; }
.sid-form__note--err { border-color: #C8202A; background: #fdecec; color: #8a1116; }

/* ---------- Equal-width grids (Elementor rows tagged with these classes) ---------- */
.sid-grid { display: grid !important; }
.sid-grid > .e-con, .sid-grid > .e-con-inner { width: auto !important; max-width: none !important; }
.sid-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sid-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sid-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sid-grid--hero { grid-template-columns: 0.95fr 1.05fr; align-items: center; }
.sid-grid--body { grid-template-columns: 1.5fr 1fr; }
@media (max-width: 1024px) {
	.sid-grid--4, .sid-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sid-grid--hero, .sid-grid--body { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.sid-grid--4, .sid-grid--3, .sid-grid--2 { grid-template-columns: 1fr; }
}

/* ---------- Product strip: grey band, each product whole inside its frame ---------- */
.studioid-strip { background: #ECECEC; }
.studioid-marquee--framed { align-items: stretch !important; }
.studioid-marquee--framed .elementor-widget-image { width: 260px; flex: 0 0 260px; }
.studioid-marquee--framed .elementor-widget-image .elementor-widget-container { height: 100%; }
.studioid-marquee--framed img {
	width: 260px; height: 190px; object-fit: contain; display: block;
	background: #ffffff; border-radius: 12px; padding: 10px; box-sizing: border-box;
	box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
	transition: transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s ease; }
@media (max-width: 767px) {
	.studioid-marquee--framed .elementor-widget-image { width: 190px; flex: 0 0 190px; }
	.studioid-marquee--framed img { width: 190px; height: 140px; }
}

/* ---------- Section headings, per the client's Home page mock ---------- */
.sid-sect-title { text-transform: uppercase; }
.sid-sect-rule { display: flex; gap: 6px; justify-content: center; margin: 10px auto 0; }
.sid-sect-rule i { display: block; width: 26px; height: 3px; border-radius: 2px; }
.sid-sect-rule i:nth-child(1) { background: #1B2B4B; }
.sid-sect-rule i:nth-child(2) { background: #1F5A3A; }
.sid-sect-rule i:nth-child(3) { background: #D9531E; }

/* ---------- Project detail hero image frame ---------- */
.sid-detail__hero { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sid-detail__hero .elementor-widget-image, .sid-detail__hero .elementor-widget-container { width: 100%; height: 100%; }
.sid-detail__hero img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 18px; box-sizing: border-box; }
.sid-detail__chips { color: #5F6672; }
.sid-rule-red { width: 320px; max-width: 60%; height: 2px; background: #C8202A; margin: 0 auto; }

/* Square media frames: the widget wrappers must inherit the frame height. */
.sid-proj-card__pic, .sid-svc-card__pic, .sid-phase-card__pic { background: #F4F5F7; }
.sid-proj-card__pic .elementor-widget-image, .sid-proj-card__pic .elementor-widget-container,
.sid-svc-card__pic .elementor-widget-image, .sid-svc-card__pic .elementor-widget-container,
.sid-phase-card__pic .elementor-widget-image, .sid-phase-card__pic .elementor-widget-container {
	height: 100%; width: 100%; display: block; }
/* Client, 2026-09-25: the "More from" card pictures fill their square edge to
   edge - no inset, no grey margin round the render. The image widget is pinned
   to the frame because a flex item's `height: 100%` does not resolve against an
   aspect-ratio box, which is what left wide shots floating in the middle. */
.sid-proj-card__pic > .elementor-widget-image { position: absolute !important; inset: 0; margin: 0 !important; }
.sid-proj-card__pic img { object-fit: cover; padding: 0; }

/* Services phase cards: one image ratio across the row. */
.sid-phase-card__pic { aspect-ratio: 16 / 10; }
.sid-phase-card__pic img { height: 100%; object-fit: cover; }

/* Contact information column: navy links, no red shading. */
.elementor-icon-box-description a { color: #1B2B4B; text-decoration: none; border-bottom: 1px solid rgba(27, 43, 75, .25); transition: color .2s ease, border-color .2s ease; }
.elementor-icon-box-description a:hover { color: #C8202A; border-color: rgba(200, 32, 42, .6); }

/* ================= Interaction polish (hover / focus / scroll) ================= */

/* Why Choose Us: card lifts, icon badge wakes up. */
.sid-feature-card { transition: transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease, border-color .3s ease; }
.sid-feature-card:hover { border-color: #E2E5EA !important; }
.sid-feature-card .elementor-icon { transition: transform .35s cubic-bezier(.2,.6,.2,1), background-color .3s ease, color .3s ease; }
.sid-feature-card .elementor-widget-heading { transition: color .25s ease; }
.sid-feature-card:hover .elementor-heading-title { color: #C8202A; }

/* Portfolio filter chips. */
.sid-chip .elementor-button:hover { background-color: #1B2B4B !important; border-color: #1B2B4B !important; color: #ffffff !important; box-shadow: 0 10px 22px rgba(27,43,75,.18); }
.sid-chip .elementor-button:hover .elementor-icon { color: #ffffff !important; }

/* Client logos: grey until you look at them. */
.sid-logo-card { transition: transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease; }
.sid-logo-card img { filter: grayscale(100%); opacity: .78; transition: filter .3s ease, opacity .3s ease, transform .4s cubic-bezier(.2,.6,.2,1); }
.sid-logo-card:hover img { filter: none; opacity: 1; }

/* Testimonials. */
.sid-quote-card { transition: transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease; }
.sid-quote-card .elementor-icon { transition: transform .35s cubic-bezier(.2,.6,.2,1); }
.sid-quote-card img { transition: transform .4s cubic-bezier(.2,.6,.2,1); }

/* Blog cards. */
.sid-blog-card { overflow: hidden; transition: transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease, border-color .3s ease; }
.sid-blog-card:hover { border-color: #E2E5EA !important; }
.sid-blog-card .elementor-widget-image { overflow: hidden; }
.sid-blog-card img { transition: transform .55s cubic-bezier(.2,.6,.2,1); }
.sid-blog-card h3 .elementor-heading-title, .sid-blog-card h3 { transition: color .25s ease; }
.sid-blog-card:hover h3 .elementor-heading-title { color: #C8202A; }

/* Stat band. */
.sid-stat { transition: transform .3s cubic-bezier(.2,.6,.2,1); }
.sid-stat .elementor-icon { transition: transform .35s cubic-bezier(.2,.6,.2,1); }
.sid-stat__num .elementor-heading-title { transition: color .25s ease; }
.sid-stat:hover .sid-stat__num .elementor-heading-title { color: #C8202A; }

/* Section rule draws itself in when the heading arrives. */
.sid-sect-rule i { transform-origin: left; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.sid-reveal:not(.is-visible) .sid-sect-rule i { transform: scaleX(0); }
.sid-sect-rule i:nth-child(2) { transition-delay: .08s; }
.sid-sect-rule i:nth-child(3) { transition-delay: .16s; }
.sid-rule-red { transform-origin: center; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.sid-reveal:not(.is-visible) .sid-rule-red { transform: scaleX(0); }

/* Header settles into a thin shadow once the page moves. */
.ehf-header { transition: box-shadow .3s ease, background-color .3s ease; }
.sid-scrolled .ehf-header { box-shadow: 0 6px 24px rgba(15,23,42,.08); }

/* Next / previous project cards. */
.sid-svc-card .elementor-heading-title { transition: color .25s ease; }
.sid-svc-card:hover .elementor-heading-title { color: #C8202A; }

@media (prefers-reduced-motion: reduce) {
	.sid-feature-card, .sid-logo-card, .sid-quote-card, .sid-blog-card, .sid-stat,
	.sid-feature-card .elementor-icon, .sid-quote-card .elementor-icon, .sid-stat .elementor-icon,
	.sid-logo-card img, .sid-quote-card img, .sid-blog-card img { transition: none !important; }
	.sid-feature-card:hover, .sid-logo-card:hover, .sid-quote-card:hover, .sid-blog-card:hover, .sid-stat:hover { transform: none; }
	.sid-logo-card:hover img, .sid-quote-card:hover img, .sid-blog-card:hover img,
	.sid-feature-card:hover .elementor-icon, .sid-quote-card:hover .elementor-icon, .sid-stat:hover .elementor-icon { transform: none; }
	.sid-sect-rule i, .sid-rule-red { transform: none !important; transition: none !important; }
}

/* ---------- Whole-card links ----------
   Elementor's container link control renders no anchor in this version, so each
   card carries a real <a> that CSS stretches over it. */
.sid-tile, .sid-proj-card, .sid-pf-card, .sid-phase-card, .sid-blog-card, .sid-svc-card, .sid-quote-card { position: relative; }
.sid-cardlink-wrap { position: static !important; margin: 0 !important; }
.sid-cardlink {
	position: absolute; inset: 0; z-index: 4; display: block;
	border-radius: inherit; text-decoration: none; }
.sid-cardlink span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Buttons and links inside a card must stay clickable in their own right. */
.sid-tile a:not(.sid-cardlink), .sid-proj-card a:not(.sid-cardlink), .sid-pf-card a:not(.sid-cardlink),
.sid-phase-card a:not(.sid-cardlink), .sid-blog-card a:not(.sid-cardlink), .sid-svc-card a:not(.sid-cardlink),
.sid-quote-card a:not(.sid-cardlink) { position: relative; z-index: 5; }
/* Client, 2026-09-26: no red frame round a card on hover or after a click,
   anywhere. The card-wide :focus-within outlines are gone; keyboard users still
   get a ring, but only on :focus-visible, which a mouse click never triggers. */
.sid-cardlink:focus:not(:focus-visible) { outline: none; }
.sid-cardlink:focus-visible { outline: 3px solid #C8202A; outline-offset: 3px; }
/* In the Elementor editor the stretched link would sit on top of every widget in
   the card and swallow the click, so nothing inside could be selected. */
body.elementor-editor-active .sid-cardlink { pointer-events: none; }

/* ---------- Every link answers in red on hover ---------- */
a { transition: color .2s ease; }
.elementor-widget-text-editor a:hover, .elementor-widget-heading a:hover,
.elementor-icon-list-text a:hover, .elementor-widget-icon-list a:hover,
.sid-footer a:hover, .sid-detail__meta a:hover, .elementor-widget-theme-post-content a:hover { color: #C8202A !important; }
.hfe-nav-menu .menu-item a.hfe-menu-item:hover { color: #C8202A; }
.sid-cardlink:hover ~ * .elementor-heading-title { color: #C8202A; }

/* ---------- Live product gallery ---------- */
.sid-gallery__item { overflow: hidden; transition: transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease; }
.sid-gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.2,.6,.2,1); }
.sid-detail__hero--photo img { object-fit: contain; padding: 0; }
.sid-detail__hero--photo { background: #ffffff; }

@media (prefers-reduced-motion: reduce) {
	.sid-gallery__item, .sid-gallery__item img { transition: none !important; }
	.sid-gallery__item:hover, .sid-gallery__item:hover img { transform: none; }
}

/* Social icons: red circle and a white glyph on hover (a dark glyph on the dark
   hover background was invisible). */
.elementor-social-icon:hover { background-color: #C8202A !important; }
.elementor-social-icon:hover i, .elementor-social-icon:hover svg { color: #ffffff !important; fill: #ffffff !important; }

/* ---------- Keep the Elementor editor workable ----------
   The stretched card anchors would sit on top of every widget inside a card and
   swallow clicks in the editor, and the scroll-reveal never runs there. */
body.elementor-editor-active .sid-cardlink { display: none !important; }
body.elementor-editor-active .sid-reveal { opacity: 1 !important; transform: none !important; }
body.elementor-editor-active .studioid-marquee { animation: none; width: 100% !important; flex-wrap: wrap !important; }

/* ---------- Studio iD Hero Slider widget ---------- */
.elementor-widget-studioid-hero-slider .elementor-widget-container { width: 100%; }
/* The hero text starts on the same vertical line as the header logo: the slide
   carries the header's 40px gutter and the inner row is the header's 1320px
   boxed width, so both content edges land in the same place at every width. */
.studioid-hero__slide { display: flex; align-items: center; justify-content: center; padding: 0 40px; box-sizing: border-box; }
.studioid-hero__inner { display: flex; align-items: center; gap: 40px; width: 100%;
	max-width: 1320px; margin: 0 auto; padding: 0; box-sizing: border-box; }
.studioid-hero--media-left .studioid-hero__inner { flex-direction: row-reverse; }
.studioid-hero__words { flex: 0 1 50%; min-width: 0; }
.studioid-hero__media { flex: 0 1 50%; display: flex; justify-content: center; align-items: center; min-width: 0; }
.studioid-hero__title { margin: 0 0 16px; font: 700 54px/1.12 var(--sid-font); color: #14171C; }
.studioid-hero__sub { margin: 0; font: 400 22px/1.45 var(--sid-font); color: #4A5058; }
.studioid-hero__link { display: inline-block; margin-top: 22px; font: 600 15px/1 var(--sid-font);
	color: #C8202A; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 4px; }
@media (max-width: 1024px) {
	.studioid-hero__title { font-size: 38px; }
	.studioid-hero__sub { font-size: 18px; }
}
@media (max-width: 767px) {
	.studioid-hero__slide { padding: 28px 20px; }
	.studioid-hero__inner, .studioid-hero--media-left .studioid-hero__inner { flex-direction: column; gap: 24px; text-align: left; }
	.studioid-hero__words, .studioid-hero__media { flex-basis: auto !important; width: 100%; }
	.studioid-hero__title { font-size: 28px; }
	.studioid-hero__sub { font-size: 16px; }
}
/* The reveal rules target the two columns of the widget markup too. */
body:not(.elementor-editor-active) .studioid-hero__slide .studioid-hero__inner > * { transform: translateY(14px); opacity: 0; }

/* ================= 2026-09-15 client revision ================= */

/* ---------- Ubuntu everywhere (the typeface studioid.in uses) ----------
   Elementor writes `font-family` per widget from the stored settings, which are
   now all "Ubuntu"; these rules cover the theme's own text and anything Elementor
   does not reach. Icon elements are deliberately left alone so the Font Awesome
   glyph fonts keep working. */
:root { --sid-font: "Ubuntu", "Ubuntu Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
body, h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td, blockquote, figcaption, label,
button, input, select, textarea, .elementor-heading-title, .elementor-button,
.elementor-widget-text-editor, .elementor-icon-box-title, .elementor-icon-box-description,
.elementor-icon-list-text, .elementor-counter-number, .elementor-counter-title,
.hfe-nav-menu .menu-item a.hfe-menu-item { font-family: var(--sid-font); }

/* ---------- Product strip: one inset band, tiles touching, no radius ----------
   The band is inset by the site gutter (margin comes from the Elementor
   container). Elementor also puts `width: 100%` on it, which would push the
   right edge past the viewport by the margin, so the width goes back to auto. */
.studioid-strip { background: #ECECEC; padding: 0 !important;
	width: auto !important; max-width: none !important; box-sizing: border-box; }
.studioid-marquee--framed { align-items: stretch !important; gap: 0 !important; }
.studioid-marquee--framed .elementor-widget-image { width: 300px; flex: 0 0 300px; margin: 0; }
.studioid-marquee--framed .elementor-widget-image .elementor-widget-container { height: 100%; }
.studioid-marquee--framed img {
	width: 300px; height: 240px; object-fit: cover; display: block;
	background: none; border-radius: 0; padding: 0; box-shadow: none;
	transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.studioid-marquee--framed .elementor-widget-image:hover img { box-shadow: none; }
@media (max-width: 767px) {
	.studioid-marquee--framed .elementor-widget-image { width: 200px; flex: 0 0 200px; }
	.studioid-marquee--framed img { width: 200px; height: 160px; }
}

/* ---------- No three-dash rule under the headings (client, 2026-09-15) ---------- */
.sid-sect-rule { display: none !important; }
.sid-sect-title { margin-bottom: 0; }

/* ---------- Bigger icons across the site ----------
   The widget sizes were raised in the Elementor data; these rules keep the
   stacked/framed badges in proportion and scale the icons the theme draws. */
.elementor-widget-icon-list .elementor-icon-list-icon { min-width: 1.6em; }
.elementor-widget-social-icons .elementor-social-icon { font-size: 20px; width: 2.1em; height: 2.1em; }
.sid-feature-card .elementor-icon-box-icon .elementor-icon { font-size: 1em; }
.studioid-sound svg { width: 20px; height: 20px; }

/* ---------- Client logos: full colour, no hover needed ---------- */
.sid-logo-card img, .studioid-logo img { filter: none; opacity: 1; }
.sid-logo-card:hover img { filter: none; opacity: 1; }

/* ---------- Home "Our Portfolio", rebuilt to the client's mock ---------- */
/* Filter row: an outlined circle icon, a two-line label, hairline dividers. */
.sid-pf-chips { flex-wrap: wrap !important; justify-content: center !important; }
/* Elementor gives a child container width:100%; these sit side by side instead. */
.sid-pf-chip { position: relative; width: auto !important; flex: 0 0 auto; align-items: center !important; }
.sid-pf-chip + .sid-pf-chip::before {
	content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: #DDE1E7; }
@media (max-width: 1199px) { .sid-pf-chip + .sid-pf-chip::before { display: none; } }
.sid-pf-chip .elementor-widget-icon { margin: 0; }
.sid-pf-chip .elementor-heading-title { text-align: left; }
.sid-pf-chip .elementor-heading-title a { color: inherit; text-decoration: none; }

/* Cards: flat light panel, badge above the title, product filling the right half. */
.sid-pf-card { background: #F4F5F7; border: 0 !important; border-radius: 10px;
	transition: transform .25s ease, box-shadow .25s ease; }
.sid-pf-card:hover { border-color: transparent; }
.sid-pf-card__words { justify-content: center !important; }
.sid-pf-card__badge { margin-bottom: 14px !important; }
.sid-pf-card__title .elementor-heading-title { text-transform: uppercase; letter-spacing: .2px; }
.sid-pf-card__title .elementor-heading-title a { color: inherit; text-decoration: none; }
.sid-pf-card__desc p { margin: 0; }
.sid-pf-card__link a { color: inherit; text-decoration: none; transition: letter-spacing .2s ease; }
.sid-pf-card:hover .sid-pf-card__link a { letter-spacing: .4px; }
.sid-pf-card__pic { display: flex; align-items: center; justify-content: center; }
.sid-pf-card__pic .elementor-widget-container { width: 100%; }
.sid-pf-card__pic img { width: 100%; height: 190px; object-fit: contain; object-position: center;
	/* The product photographs are JPEGs on white; multiply drops that white box
	   onto the card's own grey so only the product is left, as in the mock. */
	mix-blend-mode: multiply;
	transition: transform .35s cubic-bezier(.2,.6,.2,1); }
@media (max-width: 1024px) { .sid-pf-card__pic img { height: 170px; } }
@media (max-width: 767px) {
	.sid-pf-card__pic img { height: 150px; }
	.sid-pf-chip + .sid-pf-chip::before { display: none; }
}

/* Stats band: badge on the left, figure and label beside it (Elementor gives the
   inner column width:100%, which would push the text back over the badge). */
.sid-stat { flex-wrap: nowrap !important; }
.sid-stat > .e-con { width: auto !important; flex: 1 1 auto; min-width: 0; }
.sid-stat .elementor-widget-icon { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
	.sid-pf-card, .sid-pf-card__pic img, .studioid-marquee--framed img { transition: none !important; }
	.sid-pf-card:hover, .sid-pf-card:hover .sid-pf-card__pic img, .studioid-marquee--framed .elementor-widget-image:hover img { transform: none; }
}

/* ---------- /projects: full-bleed product mosaic (studioid.in's project grid) ----------
   Rows of 8px-gapped tiles in three shapes: a two-thirds tile beside two stacked
   thirds, one full-width tile, or two halves. Each row's aspect ratio sets the
   height, so the tiles stay on the same rhythm at every width. */
.sid-mosaic { display: flex; flex-direction: column; gap: 8px; }
.sid-mrow { display: grid !important; gap: 8px; width: 100%; }
.sid-mrow--hero { grid-template-columns: 2fr 1fr; aspect-ratio: 1216 / 780; }
.sid-mrow--full { grid-template-columns: 1fr; aspect-ratio: 16 / 9; }
.sid-mrow--2up { grid-template-columns: 1fr 1fr; aspect-ratio: 1216 / 576; }
.sid-mrow > .e-con, .sid-mstack > .e-con {
	width: auto !important; max-width: none !important; min-height: 0 !important; height: 100%; }
.sid-mstack { display: grid !important; grid-template-rows: 1fr 1fr; gap: 8px; height: 100%; }
.sid-mtile { height: 100%; min-height: 0 !important; }
/* No lift: with the tiles touching, a nudge would open gaps in the mosaic.
   The hover wash and the label live in the shared block further down. */
.sid-mtile:hover { transform: none; box-shadow: none; }
@media (max-width: 767px) {
	.sid-mrow--hero, .sid-mrow--full, .sid-mrow--2up { grid-template-columns: 1fr; aspect-ratio: auto; }
	/* Only the tiles take a ratio here - the stack has to grow to fit its two. */
	.sid-mstack { grid-template-rows: auto auto; height: auto; }
	.sid-mrow > .e-con, .sid-mstack > .e-con { height: auto; }
	.sid-mtile { height: auto; aspect-ratio: 4 / 3; }
	.sid-mtile .sid-tile__label { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.sid-mtile .sid-tile__label { transition: none; }
}
/* Mosaic tiles that use an image widget (editable) instead of a container
   background: fill the tile the same way sid-cattile does. The ::before zoom
   layer inherits a blank background and stays invisible, so no conflict. */
.sid-mtile > .elementor-widget.elementor-widget-image {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%; margin: 0; }
.sid-mtile > .elementor-widget.elementor-widget-image .elementor-widget-container,
.sid-mtile > .elementor-widget.elementor-widget-image a,
.sid-mtile > .elementor-widget.elementor-widget-image figure { display: block; width: 100%; height: 100%; margin: 0; }
.sid-mtile > .elementor-widget.elementor-widget-image img {
	width: 100%; height: 100%; display: block;
	object-fit: cover; object-position: center;
	transition: transform var(--sid-zoom-time) var(--sid-hover-ease); }
.sid-mtile:hover > .elementor-widget.elementor-widget-image img,
.sid-mtile:focus-within > .elementor-widget.elementor-widget-image img { transform: scale(var(--sid-hover-zoom)); }

/* ---------- Category pages: the studioid.in product-page layout ----------
   Category name, the statement headline, one intro line, then a run of
   full-bleed product shots 8px apart. Landscape shots take a whole row at their
   own ratio; narrower ones sit two-up in square slots so the row stays level. */
.sid-cat-eyebrow .elementor-heading-title {
	display: inline-block; padding-bottom: 7px; border-bottom: 2px solid #D9531E; }
.sid-catgrid { display: flex; flex-direction: column; gap: 8px; }
.sid-catrow { display: grid !important; gap: 8px; width: 100%; }
.sid-catrow--full { grid-template-columns: 1fr; }
.sid-catrow--2up { grid-template-columns: 1fr 1fr; }
.sid-catrow > .e-con { width: auto !important; max-width: none !important; min-height: 0 !important; }
.sid-cattile { position: relative; overflow: hidden; }
/* studioid.in frames every shot on a fixed track and crops to fill it: a
   full-width cell is 1216x973 (5:4) and a paired cell is 604x604 (1:1), both
   `object-cover`, 8px apart. Measured off the live category and product pages
   once their images had actually loaded - read too early and the placeholder
   heights make it look as if the frames follow each picture's own ratio. */
/* Client, 2026-09-25 (their mock of consumer-electronics): full-width shots
   were 5:4, taller than the screen at 1320px. They now run as wide bands at
   16:9 (1320x742.5, the size the client named), still across the whole text
   column. Paired side-by-side tiles are square (656x656) on every page. */
.sid-catrow--full .sid-cattile { aspect-ratio: 16 / 9; }
.sid-catrow--2up .sid-cattile { aspect-ratio: 1 / 1; }
.sid-cattile--sq { aspect-ratio: 1 / 1; }
.sid-cattile { background: #F4F5F7; }
/* Every wrapper between the frame and the <img> needs a definite height or
   `object-fit` has nothing to fill. With Elementor's optimized markup the
   `.elementor-widget-container` div is gone and a linked image sits in a bare
   <a>, so the anchor has to be covered too. */
.sid-cattile .elementor-widget-image,
.sid-cattile .elementor-widget-image .elementor-widget-container,
.sid-cattile .elementor-widget-image a,
.sid-cattile .elementor-widget-image figure { display: block; width: 100%; height: 100%; margin: 0; }
.sid-cattile img { width: 100%; height: 100%; display: block;
	object-fit: cover; object-position: center; }
.sid-cattile .sid-cardlink { z-index: 4; }

/* ---------- One hover treatment for every product tile ----------
   Same gradient wash and the name centred in the frame, on the /projects
   mosaic and on the category pages alike. The gradient lives on the label, so
   tiles that carry no name (the galleries on the product pages) stay clean. */
.sid-mtile .sid-tile__label,
.sid-cattile .sid-cattile__label {
	position: absolute; inset: 0; z-index: 3; margin: 0 !important;
	display: flex; align-items: center; justify-content: center;
	padding: 20px; box-sizing: border-box; pointer-events: none;
	opacity: 0; transform: none; transition: opacity var(--sid-hover-time) ease;
	background: linear-gradient(180deg, rgba(10,14,20,.28) 0%, rgba(10,14,20,.68) 100%); }
.sid-mtile .sid-tile__label .elementor-heading-title,
.sid-cattile .sid-cattile__label .elementor-heading-title {
	width: 100%; text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.sid-mtile:hover .sid-tile__label, .sid-mtile:focus-within .sid-tile__label,
.sid-cattile:hover .sid-cattile__label, .sid-cattile:focus-within .sid-cattile__label { opacity: 1; }
/* The label's gradient is the only wash, so the generic tile overlay stands down. */
.sid-mtile::after, .sid-mtile:hover::after { display: none; }
/* Editor: make the hover label pickable so the heading widget can be clicked
   and edited in place. No gradient and no opacity transition — the text sits
   on the image, Elementor selects it, the parent container is still reachable
   via the breadcrumb or the navigator. */
body.elementor-editor-active .sid-mtile .sid-tile__label,
body.elementor-editor-active .sid-cattile .sid-cattile__label {
	opacity: 1 !important; pointer-events: auto; background: none; }
/* In the editor, collapse the label to only the bottom of the tile so the
   image widget above it is directly clickable without going via the navigator. */
body.elementor-editor-active .sid-mtile .sid-tile__label,
body.elementor-editor-active .sid-cattile .sid-cattile__label {
	inset: auto; bottom: 0; left: 0; right: 0;
	align-items: flex-end; min-height: 60px; }
@media (max-width: 767px) {
	.sid-catrow--2up { grid-template-columns: 1fr; }
	.sid-cattile__label { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.sid-cattile img, .sid-cattile__label { transition: none; }
	.sid-cattile:hover img { transform: none; }
}

/* ---------- Product pages: the studioid.in product-page layout ----------
   A full-bleed banner shot, then the product name over its description, then
   the rest of the shots one per row 8px apart (the category-page tile rules
   already cover those). */
.sid-detail__banner, .sid-detail__banner .elementor-widget-image,
.sid-detail__banner .elementor-widget-container { width: 100%; }
/* Most heroes are landscape and fill the band edge to edge; the handful of tall
   ones sit centred on this panel rather than being cropped. */
.sid-detail__banner { background: #F4F5F7; }
.sid-detail__banner img {
	width: 100%; height: auto; display: block;
	/* Heroes here run from 0.62 to 2.18 wide; without a ceiling a portrait
	   render would be over 2000px tall at full-bleed width. */
	max-height: 86vh; object-fit: contain; object-position: center; }
.sid-detail__name .elementor-heading-title { display: block; }

/* ---------- Blog archive grid (Royal Addons "wpr-grid") ----------
   Left to itself the widget prints bare text under raw thumbnails, and because
   the thumbnails keep their own heights every card's title lands on a different
   line. A fixed media ratio fixes the alignment; the rest matches the blog cards
   on the home page. Elementor writes its own per-widget CSS after the theme
   sheet, so the properties it also sets are forced here. */
.wpr-grid .wpr-grid-item { margin-bottom: 0; }
.wpr-grid .wpr-grid-item-inner {
	display: flex; flex-direction: column; height: 100%;
	background: #ffffff; border: 1px solid #E6E8EC; border-radius: 14px; overflow: hidden;
	transition: transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease, border-color .3s ease; }
.wpr-grid .wpr-grid-item-inner:hover {
	border-color: #E2E5EA; }
.wpr-grid .wpr-grid-media-wrap { aspect-ratio: 16 / 10; overflow: hidden; background: #F4F5F7; flex: 0 0 auto; }
.wpr-grid .wpr-grid-media-wrap .wpr-grid-image-wrap { display: block; height: 100%; }
.wpr-grid .wpr-grid-media-wrap img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .55s cubic-bezier(.2,.6,.2,1); }
/* Block, not flex: the date and comment lines are inline items and a flex
   column would put each on its own row. */
.wpr-grid .wpr-grid-item-below-content { display: block; flex: 1 1 auto; padding: 20px 22px 22px; }
.wpr-grid .wpr-grid-item-title { margin: 0 0 7px; }
.wpr-grid .wpr-grid-item-title a { font: 700 18px/1.35 var(--sid-font); color: #16223B; text-decoration: none; }
.wpr-grid .wpr-grid-item-inner:hover .wpr-grid-item-title a { color: #C8202A; }
.wpr-grid .wpr-grid-item-date, .wpr-grid .wpr-grid-item-comments { display: inline !important; }
.wpr-grid .wpr-grid-item-date .inner-block, .wpr-grid .wpr-grid-item-comments .inner-block { display: inline; }
.wpr-grid .wpr-grid-item-date, .wpr-grid .wpr-grid-item-date a,
.wpr-grid .wpr-grid-item-comments, .wpr-grid .wpr-grid-item-comments a {
	font: 500 12.5px/1.5 var(--sid-font); color: #8A9099; text-decoration: none; }
.wpr-grid .wpr-grid-item-excerpt { margin: 10px 0 0; }
.wpr-grid .wpr-grid-item-excerpt p { font: 400 14px/1.65 var(--sid-font); color: #5F6672; margin: 0; }
.wpr-grid .wpr-grid-item-read-more { margin: 14px 0 0; }
.wpr-grid .wpr-grid-item-read-more a {
	font: 700 13px/1 var(--sid-font); color: #C8202A !important; text-decoration: none; letter-spacing: .2px; }
.wpr-grid .wpr-grid-item-read-more a::after { content: " \2192"; }
/* Category filters: the same chips the rest of the site uses. */
ul.wpr-grid-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
	margin: 0 0 34px; padding: 0; list-style: none; }
ul.wpr-grid-filters > li { float: none !important; margin: 0 !important; padding: 0 !important; list-style: none; }
ul.wpr-grid-filters .wpr-grid-filters-sep, ul.wpr-grid-filters > li > span > em { display: none !important; }
ul.wpr-grid-filters > li > span {
	display: block; float: none !important; margin: 0 !important;
	padding: 9px 18px !important; border-radius: 999px !important;
	border: 1px solid #E6E8EC !important; background-color: #ffffff !important; cursor: pointer;
	font: 500 14px/1 var(--sid-font) !important; color: #2B303A !important; }
ul.wpr-grid-filters > li > span:hover {
	background-color: #1B2B4B !important; border-color: #1B2B4B !important; color: #ffffff !important; }
ul.wpr-grid-filters > li > span.wpr-active-filter {
	background-color: #C8202A !important; border-color: #C8202A !important; color: #ffffff !important; }
@media (prefers-reduced-motion: reduce) {
	.wpr-grid .wpr-grid-item-inner, .wpr-grid .wpr-grid-media-wrap img,
	ul.wpr-grid-filters > li > span { transition: none; }
	.wpr-grid .wpr-grid-item-inner:hover { transform: none; }
	.wpr-grid .wpr-grid-item-inner:hover .wpr-grid-media-wrap img { transform: none; }
	ul.wpr-grid-filters > li > span:hover { transform: none; }
}

/* ---------- Service card lists: one line per item ----------
   `icon_typography_*` on an Elementor icon-list styles the item *text* (the
   glyph has its own `icon_size`), so the "bigger icons" pass pushed these
   labels to 21px and "Tooling & Manufacturing Support" wrapped. They are back
   to 17px in the widget settings; between the tablet breakpoint and ~1240px the
   three-up cards are narrow enough that the longest labels still need a nudge. */
@media (min-width: 1025px) and (max-width: 1240px) {
	/* Elementor's per-widget CSS is emitted after the theme sheet at the same
	   specificity, so this has to be forced. */
	.sid-svc-card .elementor-widget-icon-list .elementor-icon-list-text,
	.sid-svc-card .elementor-widget-icon-list .elementor-icon-list-item,
	.sid-phase-card .elementor-widget-icon-list .elementor-icon-list-text,
	.sid-phase-card .elementor-widget-icon-list .elementor-icon-list-item {
		/* "Tooling & Manufacturing Support" is the longest label and needs 231px
		   at 15px; the column only offers that from ~1150 up. The label track
		   grows at about 0.32 of the viewport, so the size tracks it down to
		   12.6px rather than letting the label wrap. */
		font-size: clamp(12.6px, calc(2.02vw - 8.1px), 15px) !important; }
	.sid-svc-card .elementor-widget-icon-list .elementor-icon-list-icon,
	.sid-phase-card .elementor-widget-icon-list .elementor-icon-list-icon { min-width: 1.4em; }
}
/* The /services phase cards go two-up at exactly the tablet breakpoint, which
   is the narrowest they ever get; the same two labels need a nudge there. */
@media (min-width: 768px) and (max-width: 812px) {
	.sid-svc-card .elementor-widget-icon-list .elementor-icon-list-text,
	.sid-svc-card .elementor-widget-icon-list .elementor-icon-list-item,
	.sid-phase-card .elementor-widget-icon-list .elementor-icon-list-text,
	.sid-phase-card .elementor-widget-icon-list .elementor-icon-list-item {
		font-size: 15.5px !important; }
}

/* ================= One hover behaviour for the whole site =================
   Before this block the site had eight different zoom values (1.02 to 1.10),
   six different lifts (-1px to -6px), eight shadows and seven duration/easing
   pairs. Everything now resolves to the tokens below, so the hover reads the
   same on the projects mosaic, the category tiles, every card, every gallery
   and the product strip. Change a token here and the whole site follows. */
:root {
	--sid-hover-zoom: 1.05;                        /* every picture */
	--sid-hover-lift: -4px;                        /* cards and tiles */
	--sid-hover-nudge: -2px;                       /* buttons, chips, icons */
	--sid-hover-shadow: 0 18px 42px rgba(15, 23, 42, .14);
	--sid-hover-ease: cubic-bezier(.2, .6, .2, 1);
	--sid-hover-time: .4s;                         /* the lift */
	--sid-zoom-time: .5s;                          /* the zoom */
}

/* ---- the picture zooms, one value, one curve ---- */
.sid-cattile img, .sid-gallery__item img, .sid-detail__thumb img,
.sid-pf-card__pic img, .sid-proj-card__pic img, .sid-svc-card__pic img,
.sid-phase-card__pic img, .sid-blog-card img, .sid-quote-card img,
.sid-logo-card img, .sid-ig__item img, .studioid-logo img,
.wpr-grid .wpr-grid-media-wrap img, .studioid-marquee--framed img {
	transition: transform var(--sid-zoom-time) var(--sid-hover-ease),
		filter .3s ease, opacity .3s ease; }
.sid-cattile:hover img, .sid-gallery__item:hover img, .sid-detail__thumb:hover img,
.sid-pf-card:hover .sid-pf-card__pic img, .sid-proj-card:hover .sid-proj-card__pic img,
.sid-svc-card:hover .sid-svc-card__pic img, .sid-phase-card:hover .sid-phase-card__pic img,
.sid-blog-card:hover img, .sid-quote-card:hover img, .sid-logo-card:hover img,
.sid-ig__item:hover img, .studioid-logo:hover img,
.wpr-grid .wpr-grid-item-inner:hover .wpr-grid-media-wrap img,
.studioid-marquee--framed .elementor-widget-image:hover img {
	transform: scale(var(--sid-hover-zoom)); }

/* The /projects mosaic paints its shot as a container background, so the zoom
   goes on a layer of its own - otherwise those tiles were the one place on the
   site with no zoom at all. */
.sid-mtile::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image: inherit; background-size: cover; background-position: center;
	transform: scale(1); transition: transform var(--sid-zoom-time) var(--sid-hover-ease); }
.sid-mtile:hover::before, .sid-mtile:focus-within::before { transform: scale(var(--sid-hover-zoom)); }
.sid-mtile > * { position: relative; z-index: 1; }

/* ---- the lift, one value, one shadow, one curve ---- */
.sid-pf-card, .sid-proj-card, .sid-svc-card, .sid-phase-card, .sid-blog-card,
.sid-quote-card, .sid-logo-card, .sid-feature-card, .sid-gallery__item, .sid-stat,
.sid-tile, .studioid-feature, .studioid-step, .studioid-logo,
.wpr-grid .wpr-grid-item-inner {
	transition: transform var(--sid-hover-time) var(--sid-hover-ease),
		box-shadow var(--sid-hover-time) ease, border-color var(--sid-hover-time) ease; }
.sid-pf-card:hover, .sid-proj-card:hover, .sid-svc-card:hover, .sid-phase-card:hover,
.sid-blog-card:hover, .sid-quote-card:hover, .sid-logo-card:hover, .sid-feature-card:hover,
.sid-gallery__item:hover, .sid-stat:hover, .studioid-feature:hover, .studioid-step:hover,
.studioid-logo:hover, .wpr-grid .wpr-grid-item-inner:hover {
	transform: translateY(var(--sid-hover-lift));
	box-shadow: var(--sid-hover-shadow) !important; }
/* Tiles sit edge to edge, so they take the wash and the zoom but never the lift. */
.sid-tile:hover, .sid-mtile:hover, .sid-cattile:hover { transform: none; box-shadow: none; }

/* ---- controls and decorative icons: the same curve, a smaller nudge ---- */
.elementor-button, .sid-form__submit, .studioid-sound,
.elementor-social-icon, .sid-feature-card .elementor-icon,
.sid-quote-card .elementor-icon, .sid-stat .elementor-icon {
	transition: transform var(--sid-hover-time) var(--sid-hover-ease),
		background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }
/* Royal's pointer-animation sheets put a 0.1s shorthand on the filter chips. */
ul.wpr-grid-filters > li > span {
	transition: transform var(--sid-hover-time) var(--sid-hover-ease),
		background-color .25s ease, border-color .25s ease, color .25s ease !important; }
/* Tiles never transform themselves, but keep them on the same curve so nothing
   inherits a stray duration from a container default. */
.sid-cattile, .sid-mtile, .sid-tile {
	transition: transform var(--sid-hover-time) var(--sid-hover-ease), box-shadow var(--sid-hover-time) ease; }
.elementor-button:hover, .sid-form__submit:hover, .studioid-sound:hover,
.elementor-social-icon:hover, ul.wpr-grid-filters > li > span:hover {
	transform: translateY(var(--sid-hover-nudge)); }
.sid-feature-card:hover .elementor-icon, .sid-quote-card:hover .elementor-icon,
.sid-stat:hover .elementor-icon { transform: scale(var(--sid-hover-zoom)); }

@media (prefers-reduced-motion: reduce) {
	.sid-mtile::before { transition: none; }
	.sid-mtile:hover::before, .sid-mtile:focus-within::before { transform: none; }
}