/* Surtii brand — shared by all home mockups.
   Fonts and colours come from the official logo files (Surtii Assets/Surtii Logo Final). */
@font-face{font-family:'Philosopher';src:url('fonts/Philosopher-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Philosopher';src:url('fonts/Philosopher-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Ubuntu Title';src:url('fonts/Ubuntu-Title.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

:root{
  --brand-green:#009444;
  --brand-orange:#f15a29;
  --brand-slate:#2f4b5b;
}

/* Logo lockup: badge + "SURTii MACHINERIES" set like the logo artwork
   (Philosopher Bold, 0.15em tracking, first letters at 1.43x — 31.91px / 22.34px in the source). */
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
/* Official logo: badge with the TM above its top-right corner. The top 7px of the image is the TM,
   so a -7px top margin lines the badge itself up with the name. */
.brand .brand-logo{height:67px;width:auto;display:block;margin-top:-7px;flex-shrink:0}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm-name{font-family:'Philosopher',serif;font-weight:700;letter-spacing:.15em;color:var(--brand-slate);font-size:1.14rem;white-space:nowrap}
.brand .wm-name .cap{font-size:1.43em}
.brand .wm-tag{font-family:'Philosopher',serif;font-weight:400;font-size:.76rem;letter-spacing:.08em;color:var(--brand-green);margin-top:6px;white-space:nowrap}
/* Phones: the name shrinks with the screen so the logo, name and menu button stay on one row */
@media (max-width:420px){.navbar-brand.brand{margin-right:8px}.brand{gap:9px}.brand .brand-logo{height:52px;margin-top:-6px}.brand .wm-name{font-size:min(.9rem,calc((100vw - 185px)/13.6))}.brand .wm-tag{display:none}}

/* Philosopher for the brand quote / small brand moments */
.font-brand{font-family:'Philosopher',serif}
.gu{font-family:'Noto Sans Gujarati',sans-serif}

/* Video tiles */
.vid{position:relative;overflow:hidden;background:#dfe7e2}
.vid video{width:100%;height:100%;object-fit:cover;display:block}
.vid .vid-label{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.92);border-radius:50px;padding:6px 14px;font-size:.8rem;font-weight:600;color:#1f2a36;display:inline-flex;align-items:center;gap:8px}
.vid .vid-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-orange);box-shadow:0 0 0 3px rgba(241,90,41,.2)}

/* Placeholder for products without a licensed photo yet (assets/img/placeholder.svg).
   !important because each page frames its images differently (contain, padding, etc.). */
img.ph{object-fit:cover!important;padding:0!important;background:#f3f6f8}
/* Device product shots (white background) shown whole inside photo cards */
img.fit-contain{object-fit:contain!important;background:#fff;padding:14px}

/* Scroll-in animation (added by assets/js/site.js; content is visible without JavaScript) */
.sr{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.sr-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sr{opacity:1;transform:none;transition:none}}

/* Bootstrap rows with wide gutters (g-5) use -24px side margins, while .container pads only 12px,
   which pushed the page 12px wider than the viewport between ~992px and the container max-width.
   Matching the container padding to the gutter fixes it for every page. */
.container{--bs-gutter-x:3rem}