/* SoftDigi modern foundation — Phase 2. Additive layer; legacy styles remain intact. */
:root {
  --primary: #f03c02;
  --primary-dark: #bd2f00;
  --secondary: #f59e0b;
  --dark: #1e1b1a;
  --text: #332d2a;
  --muted: #6f6661;
  --light: #fff8f5;
  --white: #ffffff;
  --border: #eaded8;
  --surface: #ffffff;
  --font-heading: "Poppins", "Open Sans", Arial, sans-serif;
  --font-body: "Open Sans", Arial, sans-serif;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --container-width: 1200px;
  --section-padding: clamp(3.5rem, 7vw, 6rem);
  --radius-sm: .5rem;
  --radius-md: .875rem;
  --radius-lg: 1.25rem;
  --shadow-sm: 0 2px 10px rgba(52, 31, 20, .07);
  --shadow-md: 0 12px 28px rgba(52, 31, 20, .10);
  --shadow-lg: 0 24px 50px rgba(52, 31, 20, .14);
  --transition-fast: 160ms ease;
  --transition-normal: 260ms ease;
  --transition-slow: 420ms ease;
}

html { scroll-behavior: smooth; }
body { color: var(--text); font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6 { color: var(--dark); font-family: var(--font-heading); }
a { transition: color var(--transition-fast), opacity var(--transition-fast); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(240, 60, 2, .42) !important;
  outline-offset: 3px;
}

/* Shared primitives for the progressive homepage redesign. */
.container { max-width: var(--container-width); }
.section { padding-block: var(--section-padding); }
.section-header { max-width: 46rem; margin: 0 auto var(--space-7); text-align: center; }
.section-title { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; }
.section-subtitle { color: var(--muted); font-size: clamp(1rem, 2vw, 1.125rem); line-height: 1.7; }

.btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .sd-button {
  align-items: center; border-radius: var(--radius-sm); display: inline-flex; font-weight: 700;
  gap: var(--space-2); justify-content: center; min-height: 44px; padding: .7rem 1.1rem;
  text-decoration: none !important; transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.btn-primary, .sd-button { background: var(--primary); border: 1px solid var(--primary); color: var(--white) !important; }
.btn-primary:hover, .sd-button:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: var(--shadow-sm); color: var(--white) !important; transform: translateY(-1px); }
.btn-secondary { background: var(--dark); border: 1px solid var(--dark); color: var(--white) !important; }
.btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary) !important; }
.btn-outline:hover { background: var(--primary); color: var(--white) !important; }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--primary) !important; }
.btn-ghost:hover { background: var(--light); color: var(--primary-dark) !important; }
.btn-primary:active, .btn-secondary:active, .btn-outline:active, .btn-ghost:active, .sd-button:active { transform: translateY(0); }
button:disabled, .btn-primary.disabled, .btn-secondary.disabled, .btn-outline.disabled, .btn-ghost.disabled { cursor: not-allowed; opacity: .58; transform: none; }

.sd-card, .project-card, .service-card, .feature-card, .testimonial-card, .pricing-card, .solution-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal);
}
.sd-card:hover, .project-card:hover, .service-card:hover, .feature-card:hover, .testimonial-card:hover, .pricing-card:hover, .solution-card:hover { border-color: rgba(240, 60, 2, .34); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.sd-card img, .project-card img, .service-card img { transition: transform var(--transition-slow); }
.sd-card:hover img, .project-card:hover img, .service-card:hover img { transform: scale(1.03); }

/* Header: enhances existing semantic navigation without changing destinations. */
#header { background: rgba(255, 255, 255, .96); border-bottom: 1px solid transparent; box-shadow: none; min-height: 76px; padding: 12px clamp(1rem, 3vw, 2rem); transition: background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal); }
#header.header-scrolled, #header.sd-header-scrolled { border-color: var(--border); box-shadow: var(--shadow-sm); }
#header .logo img { height: 44px; max-height: 44px; width: auto; aspect-ratio: 312 / 77; }
#header .nav-menu > ul { align-items: center; gap: .1rem; }
#header .nav-menu a { border-radius: var(--radius-sm); color: var(--text); font-weight: 600; padding: .62rem .72rem; }
#header .nav-menu > ul > li > a:hover, #header .nav-menu > ul > li > a:focus-visible { background: var(--light); color: var(--primary); }
#header .nav-menu .enq_button { background: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius-sm); color: var(--white); font: inherit; font-weight: 700; min-height: 42px; padding: .55rem .9rem; }
#header .nav-menu .enq_button:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.sd-mobile-toggle { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--dark); display: none; font-size: 1.25rem; height: 44px; margin-left: auto; width: 44px; }

/* Footer: visual grouping without removing current contacts or links. */
#footer { background: var(--white) !important; border-top: 1px solid var(--border); }
#footer .footer-top { background: var(--dark) !important; padding-block: clamp(2.5rem, 5vw, 4rem); }
#footer .footer-top h3 { color: var(--white); font-size: 1rem; letter-spacing: .02em; margin-bottom: var(--space-4); }
#footer .footer-top p, #footer .footer-top li { color: #e9dfda; line-height: 1.7; }
#footer .footer-top a { color: #ffe0d3; }
#footer .footer-top a:hover { color: var(--white); text-decoration: underline; }
#footer .footer-top ul { margin: 0; padding: 0; }
#footer .footer-top li { margin-bottom: var(--space-2); }
/* Footer social icons. Root cause of the "empty orange circles": legacy style.css gives these links background #f03c02, and this file sets the glyph colour to the same var(--primary), so the icon was orange-on-orange. The link is now an outlined circle with a transparent background (hover fills it). */
#footer .social-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
@media (min-width: 768px) { #footer .social-links { justify-content: flex-end; } }
#footer .social-links a { background: transparent; border: 1px solid var(--primary); border-radius: 50%; color: var(--primary); display: inline-grid; flex: 0 0 auto; height: 36px; line-height: 1; margin: 0; padding: 0; place-items: center; text-decoration: none; width: 36px; }
#footer .social-links a i { font-size: 18px; line-height: 1; }
#footer .social-links a:hover, #footer .social-links a:focus-visible { background: var(--primary); border-color: var(--primary); color: var(--white); }
#footer .social-links a:focus-visible { outline: 3px solid rgba(240, 60, 2, .35); outline-offset: 2px; }

/* Reusable low-cost motion. JavaScript adds .is-visible. */
.reveal { opacity: 0; transition: opacity var(--transition-slow), transform var(--transition-slow); }
.reveal-up { transform: translateY(20px); }
.reveal-left { transform: translateX(-20px); }
.reveal-right { transform: translateX(20px); }
.reveal.is-visible { opacity: 1; transform: translate(0); }

@media (max-width: 991px) {
  #header { min-height: 68px; position: relative; }
  .sd-mobile-toggle { display: inline-grid; place-items: center; }
  #header .nav-menu { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: none !important; left: 1rem; max-height: calc(100vh - 92px); overflow-y: auto; padding: var(--space-3); position: absolute; right: 1rem; top: calc(100% + .45rem); z-index: 1000; }
  #header .nav-menu.is-open { display: block !important; }
  #header .nav-menu > ul { display: block; }
  #header .nav-menu li { display: block; float: none; width: 100%; }
  #header .nav-menu > ul > li + li { padding-left: 0; }
  #header .nav-menu a { display: block; padding: .8rem; }
  #header .nav-menu .drop-down > ul { box-shadow: none; display: none; opacity: 1; padding-left: var(--space-3); position: static; visibility: visible; }
  #header .nav-menu .drop-down.is-expanded > ul { display: block; }
  #header .nav-menu .enq_button { margin: var(--space-2) 0; width: 100%; }
  .section { padding-block: clamp(3rem, 10vw, 4.5rem); }
}

@media (max-width: 480px) { .section-header { margin-bottom: var(--space-6); } .section-title { font-size: 1.85rem; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .sd-edu-grid .sd-edu-card { transition-delay: 0s !important; }
  .sd-media-grid .sd-media-card { transition-delay: 0s !important; }
}

/* --------------------------------------------------------------------------
   Phase 3: homepage experience. Scoped to #sd-modern-home to protect legacy
   page templates and allow existing homepage content to remain in the DOM.
   -------------------------------------------------------------------------- */
#sd-modern-home { background: var(--white); overflow: hidden; }
#sd-modern-home .section { position: relative; }
.sd-eyebrow { color: var(--primary); font-family: var(--font-heading); font-size: .74rem; font-weight: 800; letter-spacing: .13em; margin-bottom: var(--space-3); text-transform: uppercase; }
.sd-hero { background: radial-gradient(circle at 83% 22%, rgba(245, 158, 11, .18), transparent 22rem), linear-gradient(135deg, #fffaf7 0%, #fff 48%, #fff5ef 100%); min-height: min(760px, calc(100vh - 76px)); padding-block: clamp(4rem, 9vw, 8rem); }
.sd-hero__grid, .sd-split-layout, .sd-founder { align-items: center; display: grid; gap: clamp(2.5rem, 7vw, 7rem); grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
.sd-hero h1 { font-size: clamp(2.65rem, 5.4vw, 5rem); font-weight: 800; letter-spacing: -.06em; line-height: .99; margin-bottom: var(--space-5); max-width: 13ch; }
.sd-hero__lead { color: var(--muted); font-size: clamp(1.06rem, 2vw, 1.22rem); line-height: 1.75; max-width: 58ch; }
.sd-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.sd-hero__proof { color: var(--muted); display: flex; flex-wrap: wrap; font-size: .88rem; font-weight: 600; gap: 1.25rem; list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.sd-hero__proof li::before { color: var(--primary); content: "✓"; margin-right: .42rem; }
.sd-ecosystem { aspect-ratio: 1 / .9; isolation: isolate; margin-inline: auto; max-width: 570px; position: relative; width: 100%; }
.sd-ecosystem::before { border: 1px dashed rgba(240, 60, 2, .28); border-radius: 50%; content: ""; inset: 10% 6%; position: absolute; }
.sd-ecosystem__glow { background: radial-gradient(circle, rgba(240, 60, 2, .23), rgba(245, 158, 11, .08) 42%, transparent 70%); inset: 0; position: absolute; }
.sd-ecosystem__core { align-items: center; background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.8); border-radius: 1.5rem; box-shadow: var(--shadow-lg); display: grid; inset: 31% 27%; justify-content: center; padding: 1.5rem; position: absolute; z-index: 2; }
.sd-ecosystem__core img { height: auto; max-width: 170px; width: 100%; }
.sd-orbit-card { background: rgba(255,255,255,.9); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: grid; padding: .75rem .95rem; position: absolute; z-index: 3; }
.sd-orbit-card span { color: var(--dark); font-family: var(--font-heading); font-size: .9rem; font-weight: 800; }
.sd-orbit-card small { color: var(--muted); font-size: .7rem; }
.sd-orbit-card--ai { left: 2%; top: 18%; }.sd-orbit-card--school { right: 0; top: 12%; }.sd-orbit-card--mobile { bottom: 7%; left: 12%; }.sd-orbit-card--web { bottom: 4%; right: 11%; }.sd-orbit-card--commerce { left: 0; top: 54%; }.sd-orbit-card--automation { right: 0; top: 54%; }
.sd-value-grid, .sd-ai-grid, .sd-service-grid, .sd-project-grid, .sd-why-grid { display: grid; gap: var(--space-4); }
.sd-value-grid { grid-template-columns: repeat(3, 1fr); }
.sd-value-grid--4 { grid-template-columns: repeat(4, 1fr); margin-top: var(--space-7); }
.sd-value-grid--2 { grid-template-columns: repeat(2, 1fr); margin-top: var(--space-6); }
#page-project .sd-project-deepdive { align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: grid; gap: var(--space-6); grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); margin-bottom: var(--space-5); overflow: hidden; padding: var(--space-6); transition: box-shadow var(--transition-normal); }
#page-project .sd-project-deepdive:hover { box-shadow: var(--shadow-md); }
#page-project .sd-project-deepdive__media { align-items: center; aspect-ratio: 1 / 1; background: linear-gradient(135deg, #fff0e8, #fff); border-radius: var(--radius-md); display: flex; justify-content: center; overflow: hidden; }
#page-project .sd-project-deepdive__media img { height: 65%; object-fit: contain; width: 65%; }
#page-project .sd-project-deepdive__copy h3 { font-size: 1.4rem; margin: .2rem 0 .6rem; }
#page-project .sd-project-deepdive__copy > p { color: var(--muted); margin: 0 0 var(--space-5); }
@media (max-width: 768px) { #page-project .sd-project-deepdive { grid-template-columns: 1fr; } #page-project .sd-project-deepdive__media { max-width: 220px; margin: 0 auto; } }.sd-value-card { background: var(--light); border: 1px solid var(--border); border-radius: var(--radius-md); padding: clamp(1.3rem, 3vw, 2rem); }.sd-value-card h3 { font-size: 1.12rem; margin: 1rem 0 .55rem; }.sd-value-card p { color: var(--muted); margin: 0; }.sd-icon { color: var(--primary); font-family: var(--font-heading); font-size: .82rem; font-weight: 800; }
.sd-school { background: #251b17; color: var(--white); }.sd-school .section-title { color: var(--white); }.sd-school .section-subtitle { color: #e1d7d2; margin-bottom: var(--space-5); }.sd-school .btn-outline { border-color: #f9b599; color: #ffe1d4 !important; }.sd-school .btn-outline:hover { background: var(--primary); border-color: var(--primary); }
.sd-school-flow { align-items: center; background: linear-gradient(140deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); display: grid; gap: .55rem; justify-items: center; padding: clamp(1.2rem, 3vw, 2rem); text-align: center; }.sd-school-flow > span { color: #f8ac8d; }.sd-flow-node { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 99px; font-size: .82rem; font-weight: 700; padding: .57rem .86rem; }.sd-flow-node--main { background: var(--primary); border-color: var(--primary); }.sd-flow-node--ai { background: #4f347d; }.sd-flow-node--accent { background: #276945; }.sd-flow-row { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.sd-node-graphic { margin: 0 auto var(--space-6); max-width: 620px; }
.sd-node-graphic svg { display: block; height: auto; width: 100%; }
.sd-edu { background: var(--light); isolation: isolate; overflow: hidden; position: relative; }
.sd-edu__orb { background: radial-gradient(circle, rgba(240,60,2,.12), transparent 70%); border-radius: 50%; height: 26rem; left: -10rem; position: absolute; top: -8rem; width: 26rem; z-index: -1; }
.sd-edu__cap { color: var(--primary); font-size: 1rem; margin-right: .4rem; }
.sd-edu-tracks { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 0 auto; max-width: 760px; position: relative; text-align: center; }
.sd-edu-track { background: var(--white); border: 1px solid var(--border); border-radius: 99px; box-shadow: var(--shadow-sm); font-family: var(--font-heading); font-size: .82rem; font-weight: 700; padding: .65rem 1.15rem; }
.sd-edu-track--main { background: var(--primary); border-color: var(--primary); color: var(--white); flex-basis: 100%; margin-top: .25rem; }
.sd-edu-tracks__plus { color: var(--muted); font-size: 1.15rem; font-weight: 800; }
.sd-edu-graphic { flex-basis: 100%; margin: -.25rem auto -.5rem; max-width: 320px; width: 100%; }
.sd-edu-graphic svg { display: block; height: auto; width: 100%; }
.sd-edu-subhead { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; margin: var(--space-7) 0 var(--space-4); }
.sd-edu-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, 1fr); }
.sd-edu-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.3rem; text-align: center; transition: box-shadow var(--transition-normal), transform var(--transition-normal); }
.sd-edu-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.sd-edu-avatar { background: var(--light); border-radius: 50%; height: 84px; margin: 0 auto var(--space-3); position: relative; width: 84px; }
.sd-edu-avatar img { border-radius: 50%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); width: 100%; }
.sd-edu-card:hover .sd-edu-avatar img { transform: scale(1.08); }
.sd-edu-avatar__badge { background: var(--dark); border-radius: 99px; bottom: -6px; color: var(--white); font-size: .55rem; font-weight: 700; left: 50%; letter-spacing: .03em; padding: .16rem .5rem; position: absolute; text-transform: uppercase; transform: translateX(-50%); white-space: nowrap; }
.sd-edu-card h4 { font-size: 1rem; margin: 0 0 .3rem; }
.sd-edu-person { color: var(--text); font-size: .86rem; font-weight: 700; margin: 0 0 .5rem; }
.sd-edu-person span { color: var(--muted); display: block; font-size: .74rem; font-weight: 600; margin-top: .1rem; }
.sd-edu-location { align-items: center; color: var(--muted); display: flex; font-size: .76rem; gap: .3rem; justify-content: center; margin: 0 0 .8rem; }
.sd-edu-badge { background: var(--light); border: 1px solid var(--border); border-radius: 99px; color: var(--primary); display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .02em; padding: .3rem .6rem; text-transform: uppercase; }
.sd-edu-grid--colleges { grid-template-columns: repeat(2, 1fr); margin-top: var(--space-4); }
.sd-edu-card--college { display: grid; gap: 1.1rem; grid-template-columns: 84px 1fr; padding: 1.5rem; text-align: left; }
.sd-edu-card--college .sd-edu-avatar { margin: 0; }
.sd-edu-card--college .sd-edu-location { justify-content: flex-start; }
.sd-edu-card--college .sd-edu-person { margin-bottom: .3rem; }
.sd-edu-desc { color: var(--muted); font-size: .86rem; line-height: 1.7; margin: 0 0 .8rem; }
.sd-edu-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.sd-edu-cta { margin-top: var(--space-7); text-align: center; }
.sd-edu-cta a span { display: inline-block; transition: transform var(--transition-fast); }
.sd-edu-cta a:hover span { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
  .sd-edu__orb { animation: sd-ambient 9s ease-in-out infinite alternate; }
  .sd-edu-grid .sd-edu-card:nth-child(1) { transition-delay: 0s; }
  .sd-edu-grid .sd-edu-card:nth-child(2) { transition-delay: .06s; }
  .sd-edu-grid .sd-edu-card:nth-child(3) { transition-delay: .12s; }
  .sd-edu-grid .sd-edu-card:nth-child(4) { transition-delay: .18s; }
  .sd-edu-grid .sd-edu-card:nth-child(5) { transition-delay: .24s; }
  .sd-edu-grid .sd-edu-card:nth-child(6) { transition-delay: .3s; }
  .sd-edu-grid .sd-edu-card:nth-child(7) { transition-delay: .36s; }
  .sd-edu-grid .sd-edu-card:nth-child(8) { transition-delay: .42s; }
}
.sd-media { background: var(--white); isolation: isolate; overflow: hidden; position: relative; }
.sd-media__orb { background: radial-gradient(circle, rgba(240,60,2,.10), transparent 70%); border-radius: 50%; bottom: -10rem; height: 28rem; position: absolute; right: -10rem; width: 28rem; z-index: -1; }
.sd-media__icon { color: var(--primary); font-size: 1rem; margin-right: .4rem; }
.sd-media-flow { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 0 auto var(--space-7); max-width: 960px; position: relative; }
.sd-media-node { align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: 99px; box-shadow: var(--shadow-sm); display: inline-flex; font-family: var(--font-heading); font-size: .8rem; font-weight: 700; gap: .4rem; padding: .6rem 1rem; }
.sd-media-node i { color: var(--primary); font-size: 1rem; }
.sd-media-node--accent { background: var(--primary); border-color: var(--primary); color: var(--white); }
.sd-media-node--accent i { color: var(--white); }
.sd-media-flow__arrow { color: var(--border); font-size: 1rem; font-weight: 800; }
.sd-media-waveform { align-items: flex-end; display: flex; gap: .2rem; height: 22px; margin-left: .5rem; }
.sd-media-waveform span { background: var(--primary); border-radius: 2px; display: block; width: 4px; }
.sd-media-waveform span:nth-child(1) { height: 40%; }
.sd-media-waveform span:nth-child(2) { height: 75%; }
.sd-media-waveform span:nth-child(3) { height: 100%; }
.sd-media-waveform span:nth-child(4) { height: 60%; }
.sd-media-waveform span:nth-child(5) { height: 85%; }
.sd-media-videobadge { align-items: center; background: var(--dark); border-radius: var(--radius-sm); color: var(--white); display: grid; font-size: 1.3rem; height: 34px; justify-content: center; margin-left: .5rem; width: 46px; }
.sd-media-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
.sd-media-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); display: grid; gap: 1.1rem; grid-template-columns: 84px 1fr; padding: 1.5rem; transition: box-shadow var(--transition-normal), transform var(--transition-normal); }
.sd-media-card:hover { box-shadow: var(--shadow-md), 0 0 28px rgba(240,60,2,.14); transform: translateY(-4px); }
.sd-media-avatar { background: var(--light); border-radius: 50%; height: 84px; position: relative; width: 84px; }
.sd-media-avatar img { border-radius: 50%; height: 100%; object-fit: contain; padding: .35rem; transition: transform var(--transition-slow); width: 100%; }
.sd-media-card:hover .sd-media-avatar img { transform: scale(1.08); }
.sd-media-avatar__badge { background: var(--dark); border-radius: 99px; bottom: -6px; color: var(--white); font-size: .55rem; font-weight: 700; left: 50%; letter-spacing: .03em; padding: .16rem .5rem; position: absolute; text-transform: uppercase; transform: translateX(-50%); white-space: nowrap; }
.sd-media-card h3 { font-size: 1.05rem; margin: 0 0 .2rem; }
.sd-media-owner { color: var(--muted); font-size: .82rem; font-weight: 600; margin: 0 0 .7rem; }
.sd-media-services { display: flex; flex-direction: column; gap: .35rem; list-style: none; margin: 0 0 .8rem; padding: 0; }
.sd-media-services li { color: var(--text); font-size: .8rem; padding-left: 1.1rem; position: relative; }
.sd-media-services li::before { color: var(--primary); content: "\2713"; font-weight: 800; left: 0; position: absolute; }
.sd-media-link { color: var(--primary); display: inline-flex; font-size: .86rem; font-weight: 800; gap: .35rem; }
.sd-media-link span { display: inline-block; transition: transform var(--transition-fast); }
.sd-media-link:hover span { transform: translateX(4px); }
.sd-media-cta { margin-top: var(--space-7); text-align: center; }
.sd-media-cta a span { display: inline-block; transition: transform var(--transition-fast); }
.sd-media-cta a:hover span { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
  .sd-media__orb { animation: sd-ambient 10s ease-in-out infinite alternate; }
  .sd-media-videobadge { animation: sd-float 3.4s ease-in-out infinite; }
  .sd-media-waveform span { animation: sd-wave 1.2s ease-in-out infinite; }
  .sd-media-waveform span:nth-child(2) { animation-delay: -.2s; }
  .sd-media-waveform span:nth-child(3) { animation-delay: -.4s; }
  .sd-media-waveform span:nth-child(4) { animation-delay: -.6s; }
  .sd-media-waveform span:nth-child(5) { animation-delay: -.8s; }
  .sd-media-grid .sd-media-card:nth-child(1) { transition-delay: 0s; }
  .sd-media-grid .sd-media-card:nth-child(2) { transition-delay: .08s; }
  .sd-media-grid .sd-media-card:nth-child(3) { transition-delay: .16s; }
  .sd-media-grid .sd-media-card:nth-child(4) { transition-delay: .24s; }
}
@keyframes sd-wave { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }
.sd-hub { aspect-ratio: 1 / 1; margin: 0 auto; max-width: 460px; position: relative; width: 100%; }
.sd-hub svg { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
.sd-hub__core { align-items: center; background: var(--primary); border-radius: 50%; box-shadow: var(--shadow-lg); color: var(--white); display: flex; font-family: var(--font-heading); font-size: .82rem; font-weight: 800; height: 118px; justify-content: center; left: 50%; padding: .5rem; position: absolute; text-align: center; top: 50%; transform: translate(-50%, -50%); width: 118px; z-index: 2; }
.sd-hub__node { align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: 99px; box-shadow: var(--shadow-sm); display: inline-flex; font-family: var(--font-heading); font-size: .76rem; font-weight: 700; gap: .35rem; padding: .5rem .85rem; position: absolute; transform: translate(-50%, -50%); transition: box-shadow var(--transition-normal), transform var(--transition-normal); white-space: nowrap; z-index: 2; }
.sd-hub__node:hover { box-shadow: var(--shadow-md); transform: translate(-50%, -50%) translateY(-3px); }
.sd-hub__node i { color: var(--primary); font-size: 1rem; }
.sd-hub__node--n1 { left: 50%; top: 6%; }
.sd-hub__node--n2 { left: 88%; top: 27%; }
.sd-hub__node--n3 { left: 88%; top: 73%; }
.sd-hub__node--n4 { left: 50%; top: 94%; }
.sd-hub__node--n5 { left: 12%; top: 73%; }
.sd-hub__node--n6 { left: 12%; top: 27%; }
.sd-hub--four .sd-hub__node--n1 { left: 50%; top: 6%; }
.sd-hub--four .sd-hub__node--n2 { left: 94%; top: 50%; }
.sd-hub--four .sd-hub__node--n3 { left: 50%; top: 94%; }
.sd-hub--four .sd-hub__node--n4 { left: 6%; top: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .sd-hub .sd-node-dot { animation: sd-pulse 2.6s ease-in-out infinite; }
  .sd-hub .sd-node-dot:nth-of-type(2) { animation-delay: -.45s; }
  .sd-hub .sd-node-dot:nth-of-type(3) { animation-delay: -.9s; }
  .sd-hub .sd-node-dot:nth-of-type(4) { animation-delay: -1.35s; }
  .sd-hub .sd-node-dot:nth-of-type(5) { animation-delay: -1.8s; }
  .sd-hub .sd-node-dot:nth-of-type(6) { animation-delay: -2.25s; }
  .sd-hub .sd-node-line { animation: sd-dash 5s linear infinite; }
}
@media (max-width: 640px) {
  .sd-hub { max-width: 340px; }
  .sd-hub__core { font-size: .72rem; height: 92px; width: 92px; }
  .sd-hub__node { font-size: .68rem; padding: .4rem .65rem; }
}
.sd-uiflow { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: center; margin: 0 auto var(--space-7); max-width: 720px; }
.sd-uiflow__stage { text-align: center; width: 260px; }
.sd-uiflow__label { align-items: center; color: var(--muted); display: flex; font-family: var(--font-heading); font-size: .82rem; font-weight: 700; gap: .4rem; justify-content: center; margin-top: var(--space-3); }
.sd-uiflow__label i { color: var(--primary); font-size: 1rem; }
.sd-uiflow__arrow { color: var(--primary); font-size: 1.7rem; }
.sd-browser-mock { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden; transition: transform var(--transition-normal), box-shadow var(--transition-normal); }
.sd-browser-mock:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.sd-browser-mock__bar { align-items: center; background: var(--light); display: flex; gap: .3rem; padding: .55rem .7rem; }
.sd-browser-mock__bar span { background: var(--border); border-radius: 50%; display: block; height: 8px; width: 8px; }
.sd-browser-mock__body { padding: 1.1rem; }
.sd-wire-block { background: var(--border); border-radius: 4px; height: 10px; margin-bottom: .55rem; width: 100%; }
.sd-wire-block--title { height: 14px; width: 55%; }
.sd-wire-grid { display: grid; gap: .4rem; grid-template-columns: repeat(3, 1fr); margin-top: .7rem; }
.sd-wire-grid span { background: var(--light); border: 1px dashed var(--border); border-radius: 4px; display: block; height: 40px; }
.sd-ui-hero { background: linear-gradient(120deg, var(--primary), #ffbd9e); border-radius: 6px; height: 46px; margin-bottom: .65rem; }
.sd-ui-cards { display: grid; gap: .4rem; grid-template-columns: repeat(3, 1fr); }
.sd-ui-cards span { background: var(--light); border: 1px solid var(--border); border-radius: 6px; display: block; height: 40px; }
@media (prefers-reduced-motion: no-preference) {
  .sd-browser-mock { animation: sd-float 4.2s ease-in-out infinite; }
  .sd-browser-mock--final { animation-delay: -2.1s; }
}
@media (max-width: 640px) {
  .sd-uiflow__arrow { transform: rotate(90deg); }
}
.sd-filmstrip { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0 auto var(--space-7); max-width: 780px; }
.sd-filmstrip__frame { align-items: center; background: var(--dark); border-radius: var(--radius-sm); color: var(--white); display: flex; flex-direction: column; gap: .5rem; height: 110px; justify-content: center; padding: .8rem; position: relative; transition: box-shadow var(--transition-normal), transform var(--transition-normal); width: 130px; }
.sd-filmstrip__frame::before, .sd-filmstrip__frame::after { background-image: radial-gradient(circle, rgba(255,255,255,.35) 2px, transparent 2.2px); background-position: center; background-repeat: repeat-x; background-size: 16px 10px; content: ""; height: 10px; left: 0; position: absolute; right: 0; }
.sd-filmstrip__frame::before { top: 4px; }
.sd-filmstrip__frame::after { bottom: 4px; }
.sd-filmstrip__frame i { color: #ffb092; font-size: 1.6rem; }
.sd-filmstrip__frame span { font-family: var(--font-heading); font-size: .8rem; font-weight: 700; }
.sd-filmstrip__frame:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.sd-filmstrip__frame--final { background: var(--primary); }
.sd-filmstrip__frame--final i { color: var(--white); }
.sd-filmstrip__arrow { color: var(--muted); font-size: 1.3rem; }
@media (prefers-reduced-motion: no-preference) {
  .sd-filmstrip__frame i { animation: sd-pulse 3s ease-in-out infinite; }
  .sd-filmstrip__frame:nth-of-type(2) i { animation-delay: -.75s; }
  .sd-filmstrip__frame:nth-of-type(3) i { animation-delay: -1.5s; }
  .sd-filmstrip__frame:nth-of-type(4) i { animation-delay: -2.25s; }
}
@media (max-width: 640px) {
  .sd-filmstrip__arrow { transform: rotate(90deg); }
}
.sd-cloudflow { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin: 0 auto var(--space-7); max-width: 860px; }
.sd-cloudflow__node { align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: 99px; box-shadow: var(--shadow-sm); display: inline-flex; font-family: var(--font-heading); font-size: .82rem; font-weight: 700; gap: .4rem; padding: .6rem 1.1rem; transition: box-shadow var(--transition-normal), transform var(--transition-normal); }
.sd-cloudflow__node:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.sd-cloudflow__node i { color: var(--primary); font-size: 1rem; }
.sd-cloudflow__node--accent { background: var(--primary); border-color: var(--primary); color: var(--white); }
.sd-cloudflow__node--accent i { color: var(--white); }
.sd-cloudflow__arrow { color: var(--muted); font-size: 1.3rem; }
.sd-cloudflow__cloud { height: 72px; width: 115px; }
.sd-cloudflow__cloud svg { display: block; filter: drop-shadow(0 6px 14px rgba(240, 60, 2, .25)); height: 100%; width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .sd-cloudflow__cloud { animation: sd-float 4s ease-in-out infinite; }
}
@media (max-width: 640px) {
  .sd-cloudflow__arrow { transform: rotate(90deg); }
}
#page-dev-service .features.services .row .col-lg-6,
#page-android .features.services .row .col-lg-6,
#page-ios .features.services .row .col-lg-6,
#page-hybrid .features.services .row .col-lg-6,
#page-mac .features.services .row .col-lg-6,
#page-windows .features.services .row .col-lg-6,
#page-software-dev .features.services .row .col-lg-6,
#page-website-dev .features.services .row .col-lg-6 {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  padding: 1.3rem 1.5rem !important;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
#page-dev-service .features.services .row .col-lg-6:hover,
#page-android .features.services .row .col-lg-6:hover,
#page-ios .features.services .row .col-lg-6:hover,
#page-hybrid .features.services .row .col-lg-6:hover,
#page-mac .features.services .row .col-lg-6:hover,
#page-windows .features.services .row .col-lg-6:hover,
#page-software-dev .features.services .row .col-lg-6:hover,
#page-website-dev .features.services .row .col-lg-6:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
#page-dev-service .features.services .row .col-lg-6 h5,
#page-android .features.services .row .col-lg-6 h5,
#page-ios .features.services .row .col-lg-6 h5,
#page-hybrid .features.services .row .col-lg-6 h5,
#page-mac .features.services .row .col-lg-6 h5,
#page-windows .features.services .row .col-lg-6 h5,
#page-software-dev .features.services .row .col-lg-6 h5,
#page-website-dev .features.services .row .col-lg-6 h5 {
  align-items: center;
  color: var(--dark);
  display: flex;
  font-family: var(--font-heading);
  gap: .5rem;
  margin-bottom: .6rem;
}
#page-dev-service .features.services .row .col-lg-6 h5::before,
#page-android .features.services .row .col-lg-6 h5::before,
#page-ios .features.services .row .col-lg-6 h5::before,
#page-hybrid .features.services .row .col-lg-6 h5::before,
#page-mac .features.services .row .col-lg-6 h5::before,
#page-windows .features.services .row .col-lg-6 h5::before,
#page-software-dev .features.services .row .col-lg-6 h5::before,
#page-website-dev .features.services .row .col-lg-6 h5::before {
  color: var(--primary);
  content: "\25C6";
  font-size: .8rem;
}
#page-digital .features.services .row .col-lg-4,
#page-digital-marketing .features.services .row .col-lg-4 {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  padding: 1.3rem 1.5rem !important;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
#page-digital .features.services .row .col-lg-4:hover,
#page-digital-marketing .features.services .row .col-lg-4:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
#page-digital .features.services .row .col-lg-4 h5,
#page-digital-marketing .features.services .row .col-lg-4 h5 {
  align-items: center;
  color: var(--dark);
  display: flex;
  font-family: var(--font-heading);
  gap: .5rem;
  margin-bottom: .6rem;
}
#page-digital .features.services .row .col-lg-4 h5::before,
#page-digital-marketing .features.services .row .col-lg-4 h5::before {
  color: var(--primary);
  content: "\25C6";
  font-size: .8rem;
}
#page-cloud .features h5,
#page-uiux .features h5,
#page-iot .features h5,
#page-security .features h5,
#page-animation .features h5 {
  align-items: center;
  border-left: 3px solid var(--primary);
  color: var(--dark);
  display: flex;
  font-family: var(--font-heading);
  gap: .5rem;
  margin: var(--space-5) 0 .7rem;
  padding-left: .9rem;
}
#page-cloud .features .row > div > h5:first-child,
#page-uiux .features .row > div > h5:first-child,
#page-iot .features .row > div > h5:first-child,
#page-security .features .row > div > h5:first-child,
#page-animation .features .row > div > h5:first-child {
  margin-top: 0;
}
#page-cloud .features h5::before,
#page-uiux .features h5::before,
#page-iot .features h5::before,
#page-security .features h5::before,
#page-animation .features h5::before {
  color: var(--primary);
  content: "\25C6";
  font-size: .8rem;
}
#page-cloud .features h5 + p,
#page-uiux .features h5 + p,
#page-iot .features h5 + p,
#page-security .features h5 + p,
#page-animation .features h5 + p {
  background: var(--light);
  border-radius: var(--radius-sm);
  margin-bottom: 0;
  padding: 1rem 1.2rem;
}
.sd-about-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--space-5); }
.sd-about-badge { align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: 99px; box-shadow: var(--shadow-sm); display: inline-flex; font-family: var(--font-heading); font-size: .8rem; font-weight: 700; gap: .4rem; padding: .55rem .95rem; transition: box-shadow var(--transition-normal), transform var(--transition-normal); }
.sd-about-badge:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.sd-about-badge i { color: var(--primary); font-size: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .sd-about-badge { animation: sd-float 3.6s ease-in-out infinite; }
  .sd-about-badge:nth-child(2) { animation-delay: -.6s; }
  .sd-about-badge:nth-child(3) { animation-delay: -1.2s; }
  .sd-about-badge:nth-child(4) { animation-delay: -1.8s; }
  .sd-about-badge:nth-child(5) { animation-delay: -2.4s; }
  .sd-about-badge:nth-child(6) { animation-delay: -3s; }
}
.sd-node-line { stroke: rgba(103, 58, 183, .3); stroke-dasharray: 7 9; stroke-width: 2; }
.sd-node-dot { fill: #673ab7; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .sd-node-line { animation: sd-dash 4s linear infinite; }
  .sd-node-dot { animation: sd-pulse 2.6s ease-in-out infinite; }
  .sd-node-dot:nth-of-type(2) { animation-delay: -.65s; }
  .sd-node-dot:nth-of-type(3) { animation-delay: -1.3s; }
  .sd-node-dot:nth-of-type(4) { animation-delay: -1.95s; }
}
@keyframes sd-dash { to { stroke-dashoffset: -32; } }
@keyframes sd-pulse { 50% { transform: scale(1.35); } }
.sd-ai { background: #f8f4ff; isolation: isolate; overflow: hidden; }.sd-ai__orb { border-radius: 50%; filter: blur(4px); opacity: .55; position: absolute; z-index: -1; }.sd-ai__orb--one { background: #d5b7ff; height: 20rem; right: -8rem; top: -8rem; width: 20rem; }.sd-ai__orb--two { background: #ffcfb8; bottom: -10rem; height: 22rem; left: -9rem; width: 22rem; }.sd-ai-grid { grid-template-columns: repeat(4, 1fr); }.sd-ai-card { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(255,255,255,.72); border: 1px solid rgba(86, 47, 150, .16); border-radius: var(--radius-md); padding: 1.4rem; }.sd-ai-card > span { color: #673ab7; font-size: 1.45rem; }.sd-ai-card h3 { font-size: 1rem; margin: .9rem 0 .45rem; }.sd-ai-card p { color: var(--muted); font-size: .9rem; margin: 0; }
.sd-service-grid { grid-template-columns: repeat(4, 1fr); }.sd-service-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); display: flex; flex-direction: column; min-height: 210px; padding: 1.35rem; text-decoration: none !important; transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal); }.sd-service-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); color: var(--text); transform: translateY(-4px); }.sd-service-card span { color: var(--primary); font-family: var(--font-heading); font-size: .76rem; font-weight: 800; }.sd-service-card h3 { font-size: 1.08rem; margin: auto 0 .45rem; }.sd-service-card p { color: var(--muted); font-size: .88rem; margin: 0; }.sd-service-card b { color: var(--primary); font-size: 1.25rem; margin-top: var(--space-3); transition: transform var(--transition-fast); }.sd-service-card:hover b { transform: translateX(4px); }
.sd-social-platforms { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: var(--space-4) 0 var(--space-5); }.sd-social-platforms span { align-items: center; color: var(--text); display: inline-flex; font-size: .86rem; font-weight: 700; gap: .45rem; }.sd-social-platforms i { font-size: 1.2rem; }.sd-social-platforms span:nth-child(1) i { color: #d6249f; }.sd-social-platforms span:nth-child(2) i { color: #1877f2; }.sd-social-platforms span:nth-child(3) i { color: #ff0000; }
.sd-digital { background: var(--light); }.sd-digital-visual { min-height: 340px; position: relative; }.sd-phone-card { background: #201914; border: 8px solid #201914; border-radius: 2rem; box-shadow: var(--shadow-lg); display: grid; gap: .65rem; left: 20%; padding: 1rem; position: absolute; top: 0; transform: rotate(-6deg); width: min(240px, 65%); }.sd-phone-card div { background: linear-gradient(115deg, var(--primary), #ffbd9e); border-radius: .8rem; height: 55px; }.sd-phone-card div:nth-child(2) { background: #f2ddd3; height: 92px; }.sd-phone-card div:nth-child(3) { background: #3c2d27; }.sd-phone-card small { color: #fff; font-size: .65rem; text-align: center; }.sd-social-chip { background: var(--white); border: 1px solid var(--border); border-radius: 99px; box-shadow: var(--shadow-sm); font-size: .8rem; font-weight: 800; padding: .55rem .75rem; position: absolute; }.sd-social-chip--one { left: 0; top: 15%; }.sd-social-chip--two { bottom: 22%; right: 2%; }.sd-social-chip--three { right: 0; top: 4%; }
.sd-social-chip--four { bottom: 2%; left: 6%; }
@media (prefers-reduced-motion: no-preference) {
  .sd-social-chip { animation: sd-float 3.8s ease-in-out infinite; }
  .sd-social-chip--two { animation-delay: -1.3s; }
  .sd-social-chip--three { animation-delay: -2.6s; }
  .sd-social-chip--four { animation-delay: -.65s; }
}
.sd-video-tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: var(--space-5) 0 0; padding: 0; }.sd-video-tags li { background: var(--light); border: 1px solid var(--border); border-radius: 99px; color: var(--text); font-size: .78rem; font-weight: 700; padding: .42rem .8rem; }
.sd-split-layout--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }.sd-video-timeline { display: grid; gap: .7rem; }.sd-video-timeline > div { align-items: center; background: var(--dark); border-radius: var(--radius-sm); color: var(--white); display: flex; gap: 1rem; padding: 1rem 1.2rem; }.sd-video-timeline b { color: #ffb092; font-family: var(--font-heading); font-size: 1.2rem; }.sd-video-timeline span { font-weight: 700; }
.sd-projects { background: #f7f7f8; }.sd-project-grid { grid-template-columns: repeat(4, 1fr); }.sd-project-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--transition-normal), transform var(--transition-normal); }.sd-project-card:hover { box-shadow: var(--shadow-md), 0 0 28px rgba(240,60,2,.16); transform: translateY(-4px); }.sd-project-card--feature { grid-column: span 2; }.sd-project-media { align-items: center; background: linear-gradient(135deg, #fff0e8, #fff); display: flex; height: 175px; justify-content: center; overflow: hidden; }.sd-project-media img { height: 100%; object-fit: cover; transition: transform var(--transition-slow); width: 100%; }.sd-project-media--top img { object-position: top; }.sd-project-media--contain img { object-fit: contain; padding: 1.4rem; }.sd-project-card:hover .sd-project-media img { transform: scale(1.05); }.sd-project-card--feature .sd-project-media { height: 220px; }.sd-project-placeholder { background: linear-gradient(135deg, #392424, #ed5b26); color: var(--white); flex-direction: column; gap: .65rem; isolation: isolate; position: relative; }.sd-project-placeholder::before { background-image: radial-gradient(rgba(255,255,255,.28) 1.5px, transparent 1.5px); background-size: 15px 15px; content: ""; inset: 0; opacity: .55; position: absolute; z-index: -1; }.sd-project-mark { align-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); border-radius: 1rem; display: grid; font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; height: 60px; justify-content: center; letter-spacing: .02em; width: 60px; }.sd-project-placeholder span { border: 1px solid rgba(255,255,255,.45); border-radius: 99px; font-family: var(--font-heading); font-size: .74rem; font-weight: 800; letter-spacing: .07em; padding: .55rem .85rem; text-transform: uppercase; }.sd-project-copy { padding: 1.15rem; }.sd-project-copy p { color: var(--primary); font-size: .72rem; font-weight: 800; letter-spacing: .04em; margin: 0 0 .45rem; text-transform: uppercase; }.sd-project-copy h3 { font-size: 1.15rem; margin: 0 0 .5rem; }.sd-project-copy span { color: var(--muted); display: block; font-size: .82rem; line-height: 1.5; }.sd-project-copy a { color: var(--dark); display: inline-flex; font-size: .86rem; font-weight: 800; gap: .4rem; margin-top: .9rem; }.sd-project-copy a b { color: var(--primary); transition: transform var(--transition-fast); }.sd-project-copy a:hover b { transform: translateX(4px); }.sd-projects__action { margin-top: var(--space-6); text-align: center; }
.sd-why { background: var(--dark); color: var(--white); }.sd-why .section-title { color: var(--white); }.sd-why-grid { grid-template-columns: repeat(4, 1fr); }.sd-why-grid > div { border-left: 1px solid rgba(255,255,255,.2); padding: .3rem 1.2rem; }.sd-why-grid b { color: #ffb092; display: block; font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: .6rem; }.sd-why-grid span { color: #ddd3cf; font-size: .92rem; line-height: 1.55; }
.sd-founder { max-width: 900px; }.sd-founder__portrait { background: linear-gradient(145deg, #fbe7de, #fff); border-radius: var(--radius-lg); overflow: hidden; }.sd-founder__portrait img { aspect-ratio: 1 / 1; display: block; object-fit: cover; width: 100%; }.sd-founder__role { color: var(--primary); font-family: var(--font-heading); font-size: 1rem; font-weight: 700; margin-bottom: var(--space-4); }
.sd-process { background: var(--light); }.sd-process-list { display: grid; gap: .8rem; grid-template-columns: repeat(7, 1fr); list-style: none; margin: 0; padding: 0; position: relative; }.sd-process-list::before { background: linear-gradient(90deg, transparent, var(--border) 8%, var(--primary) 50%, var(--border) 92%, transparent); content: ""; height: 2px; left: 4%; position: absolute; right: 4%; top: 1.55rem; }.sd-process-list li { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: .84rem; font-weight: 700; padding: 1rem .75rem; position: relative; }.sd-process-list b { color: var(--primary); display: block; font-size: .75rem; margin-bottom: .5rem; }
.sd-faq { max-width: 860px; }.sd-faq details { border-bottom: 1px solid var(--border); padding: 1rem 0; }.sd-faq summary { color: var(--dark); cursor: pointer; font-family: var(--font-heading); font-weight: 700; list-style: none; padding-right: 2rem; position: relative; }.sd-faq summary::-webkit-details-marker { display: none; }.sd-faq summary::after { color: var(--primary); content: "+"; font-size: 1.4rem; position: absolute; right: .25rem; top: -.3rem; }.sd-faq details[open] summary::after { content: "−"; }.sd-faq details p { color: var(--muted); line-height: 1.7; margin: .85rem 0 0; }
.sd-contact-cta { background: linear-gradient(115deg, var(--primary-dark), var(--primary) 58%, #f36d39); color: var(--white); text-align: center; }.sd-contact-cta .container { max-width: 760px; }.sd-contact-cta .sd-eyebrow { color: #ffe1d4; }.sd-contact-cta h2 { color: var(--white); font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.04em; }.sd-contact-cta p { color: #ffede7; font-size: 1.08rem; }.sd-contact-cta div { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-5); }.sd-contact-cta .sd-button { background: var(--white); border-color: var(--white); color: var(--primary-dark) !important; }.sd-contact-cta .btn-outline { border-color: #ffd1bf; color: var(--white) !important; }.sd-contact-cta .btn-outline:hover { background: var(--white); border-color: var(--white); color: var(--primary-dark) !important; }

/* The original hero remains in source; the redesigned hero is the visual entry point. */
#sd-modern-home + #hero { display: none; }

@media (max-width: 991px) { .sd-hero { min-height: auto; }.sd-hero__grid, .sd-split-layout, .sd-split-layout--reverse, .sd-founder { grid-template-columns: 1fr; }.sd-hero__content { text-align: center; }.sd-hero h1 { margin-inline: auto; }.sd-hero__actions, .sd-hero__proof { justify-content: center; }.sd-ecosystem { max-width: 500px; }.sd-ai-grid { grid-template-columns: repeat(2, 1fr); }.sd-service-grid { grid-template-columns: repeat(3, 1fr); }.sd-project-grid { grid-template-columns: repeat(2, 1fr); }.sd-why-grid { grid-template-columns: repeat(2, 1fr); }.sd-process-list { grid-template-columns: repeat(4, 1fr); }.sd-digital-visual { grid-row: 2; }.sd-process-list::before { display: none; }.sd-edu-grid { grid-template-columns: repeat(2, 1fr); }.sd-edu-grid--colleges { grid-template-columns: 1fr; }.sd-value-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sd-hero { padding-top: 3.5rem; }.sd-hero h1 { font-size: clamp(2.35rem, 12vw, 3.25rem); }.sd-hero__actions > * { width: 100%; }.sd-hero__proof { display: grid; gap: .55rem; text-align: left; }.sd-ecosystem { aspect-ratio: 1 / 1; }.sd-ecosystem__core { inset: 33% 19%; }.sd-orbit-card { padding: .55rem .65rem; }.sd-orbit-card span { font-size: .72rem; }.sd-orbit-card small { display: none; }.sd-orbit-card--ai { left: 0; }.sd-orbit-card--school { right: 0; }.sd-orbit-card--commerce { left: 2%; }.sd-orbit-card--automation { right: 2%; }.sd-value-grid, .sd-ai-grid, .sd-service-grid, .sd-project-grid, .sd-why-grid { grid-template-columns: 1fr; }.sd-project-card--feature { grid-column: span 1; }.sd-project-card--feature .sd-project-media { height: 175px; }.sd-why-grid > div { border-left: 0; border-top: 1px solid rgba(255,255,255,.2); padding: 1rem 0; }.sd-process-list { grid-template-columns: repeat(2, 1fr); }.sd-school-flow { font-size: .84rem; }.sd-flow-row { display: grid; grid-template-columns: 1fr; }.sd-digital-visual { margin-inline: auto; width: min(100%, 330px); }.sd-founder__portrait { margin-inline: auto; max-width: 330px; }.sd-contact-cta div > * { width: 100%; }.sd-edu-grid { grid-template-columns: 1fr; }.sd-edu-card--college { grid-template-columns: 1fr; text-align: center; }.sd-edu-card--college .sd-edu-avatar { margin: 0 auto var(--space-3); }.sd-edu-card--college .sd-edu-location, .sd-edu-card--college .sd-edu-badges { justify-content: center; }.sd-media-grid { grid-template-columns: 1fr; }.sd-media-card { grid-template-columns: 1fr; text-align: center; }.sd-media-avatar { margin: 0 auto; }.sd-media-services li { padding-left: 0; }.sd-media-services li::before { display: none; }.sd-media-waveform, .sd-media-videobadge { display: none; }.sd-value-grid--4 { grid-template-columns: 1fr; }.sd-value-grid--2 { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: no-preference) { .sd-orbit-card { animation: sd-float 6s ease-in-out infinite; }.sd-orbit-card--school { animation-delay: -1.3s; }.sd-orbit-card--automation { animation-delay: -2s; }.sd-orbit-card--mobile { animation-delay: -2.8s; }.sd-orbit-card--web { animation-delay: -4s; }.sd-orbit-card--commerce { animation-delay: -5s; }.sd-ai__orb--one { animation: sd-ambient 13s ease-in-out infinite alternate; }.sd-ai__orb--two { animation: sd-ambient 16s ease-in-out infinite alternate-reverse; } }
@keyframes sd-float { 50% { transform: translateY(-8px); } }
@keyframes sd-ambient { to { transform: translate(20px, 12px) scale(1.08); } }

/* ==========================================================================
   Phase 3.2: legacy homepage harmonization.
   Scoped with "#sd-modern-home ~ #main" (and "#sd-modern-home ~ #cta" etc.)
   so these rules apply ONLY on index.html — #main, #features, .services and
   #cta are reused as generic IDs/classes on other page-shell templates
   (about.html, development_service.html, software_development.html,
   android_development.html, ...) and must not be affected.
   -------------------------------------------------------------------------- */

/* Transition strip between the new curated homepage and legacy detail content */
.sd-legacy-transition { align-items: center; color: var(--muted); display: flex; flex-direction: column; gap: .6rem; padding-block: clamp(2.2rem, 5vw, 3.2rem); text-align: center; }
.sd-legacy-transition span { font-family: var(--font-heading); font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sd-legacy-transition svg { color: var(--primary); }
@media (prefers-reduced-motion: no-preference) { .sd-legacy-transition svg { animation: sd-float 2.4s ease-in-out infinite; } }

/* Section rhythm: consistent padding + alternating light backgrounds, matching the new section cadence */
#sd-modern-home ~ #main #cta,
#sd-modern-home ~ #main #services,
#sd-modern-home ~ #main #features,
#sd-modern-home ~ #main #team { padding-block: var(--section-padding) !important; }
#sd-modern-home ~ #main #services { background: var(--white); }
#sd-modern-home ~ #main .services_product { background: var(--light) !important; }
#sd-modern-home ~ #main #team { background: var(--white); }

/* Typography hierarchy: tie legacy section intros to the new eyebrow/heading language.
   Padding lives on the parent section already (above); .section-title itself only gets
   margin so it never double-stacks vertical space when nested inside an already-padded
   section (#services/#features/#team/#cta). The two standalone occurrences (direct
   #main > .container > .section-title, i.e. the "Our Project"/"Our Client" intros that
   have no padded section of their own) get their own top padding below. */
#sd-modern-home ~ #main .section-title { margin: 0 auto var(--space-6); max-width: 46rem; text-align: center; }
#sd-modern-home ~ #main > div.container > .section-title { padding-top: var(--section-padding); }
#sd-modern-home ~ #main .section-title h2 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -.02em; }
#sd-modern-home ~ #main .section-title h2 strong { color: var(--primary); font-weight: 800; }
#sd-modern-home ~ #main .section-title p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
#sd-modern-home ~ #main #cta h3 { font-family: var(--font-heading); letter-spacing: -.01em; }
#sd-modern-home ~ #main #cta h3[style*="color"],
#sd-modern-home ~ #main #cta span[style*="color"] { color: var(--primary) !important; }
#sd-modern-home ~ #main #cta p { color: var(--muted); line-height: 1.75; }

/* Buttons: bring legacy CTAs onto the shared button language */
#sd-modern-home ~ #main .cta-btn { border-radius: var(--radius-sm) !important; font-weight: 700; transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
#sd-modern-home ~ #main .cta-btn:hover { background: var(--primary) !important; color: var(--white) !important; transform: translateY(-1px); }
#sd-modern-home ~ #main .btn-danger { background: var(--primary) !important; border-color: var(--primary) !important; border-radius: var(--radius-sm) !important; font-weight: 700; transition: background-color var(--transition-fast), transform var(--transition-fast); }
#sd-modern-home ~ #main .btn-danger:hover { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; transform: translateY(-1px); }
#sd-modern-home ~ #main .page-link.nav-link.active,
#sd-modern-home ~ #main .page-link.nav-link:hover { color: var(--primary) !important; }
#sd-modern-home ~ #main .pagination.nav-tabs { border: none; box-shadow: var(--shadow-sm) !important; }

/* Services cards: fix clipped description text, add card elevation + hover to match sd-card family */
#sd-modern-home ~ #main .services .icon-box { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); height: auto; min-height: 230px; transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal); }
#sd-modern-home ~ #main .services .icon-box:hover { border-color: rgba(240, 60, 2, .34); box-shadow: var(--shadow-md); transform: translateY(-4px); }
#sd-modern-home ~ #main .services .description { -webkit-box-orient: vertical; -webkit-line-clamp: 4; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; white-space: normal; }

/* Portfolio / project showcase cards */
#sd-modern-home ~ #main .project_complete { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; padding: 1.1rem; transition: box-shadow var(--transition-normal), transform var(--transition-normal); }
#sd-modern-home ~ #main .project_complete:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
#sd-modern-home ~ #main .project_complete figure { margin: 0 0 .75rem; }
#sd-modern-home ~ #main .project_complete figure img { transition: transform var(--transition-slow); }
#sd-modern-home ~ #main .project_complete:hover figure img { transform: scale(1.06); }
#sd-modern-home ~ #main .project_complete .title a { color: var(--dark); font-weight: 700; }
#sd-modern-home ~ #main .project_complete .title a:hover { color: var(--primary); }
#sd-modern-home ~ #main .project_complete .description { -webkit-box-orient: vertical; -webkit-line-clamp: 5; display: -webkit-box; overflow: hidden; }

/* Team cards */
#sd-modern-home ~ #main .team .member { border-radius: var(--radius-md); overflow: hidden; transition: transform var(--transition-normal); }
#sd-modern-home ~ #main .team .member:hover { transform: translateY(-4px); }
#sd-modern-home ~ #main .team .member-img { border-radius: var(--radius-md); overflow: hidden; position: relative; }
#sd-modern-home ~ #main .team .member-img.sd-avatar-fallback::before { align-items: center; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: var(--white); content: attr(data-initials); display: flex; font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; inset: 0; justify-content: center; position: absolute; }
#sd-modern-home ~ #main .team .member-img img { transition: transform var(--transition-slow); }
#sd-modern-home ~ #main .team .member:hover .member-img img { transform: scale(1.06); }
#sd-modern-home ~ #main .team .member-info h4 { color: var(--dark); font-weight: 700; }
#sd-modern-home ~ #main .team .member-info span { color: var(--muted); }
#sd-modern-home ~ #main .team .social a { transition: color var(--transition-fast), transform var(--transition-fast); }
#sd-modern-home ~ #main .team .social a:hover { color: var(--primary) !important; transform: translateY(-2px); }
#sd-modern-home ~ #main .owl-carousel .owl-nav button.owl-next,
#sd-modern-home ~ #main .owl-carousel .owl-nav button.owl-prev { color: var(--primary) !important; transition: transform var(--transition-fast); }
#sd-modern-home ~ #main .owl-carousel .owl-nav button.owl-next:hover,
#sd-modern-home ~ #main .owl-carousel .owl-nav button.owl-prev:hover { color: var(--primary-dark) !important; }
#sd-modern-home ~ #main .owl-carousel .owl-nav button.owl-next:hover { transform: translateX(3px); }
#sd-modern-home ~ #main .owl-carousel .owl-nav button.owl-prev:hover { transform: translateX(-3px); }

/* Testimonials */
#sd-modern-home ~ #main .block-text { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-inline: auto; max-width: 640px; padding: clamp(1.5rem, 4vw, 2.25rem); }
#sd-modern-home ~ #main .block-text p { color: var(--text); font-size: 1.05rem; line-height: 1.75; }
#sd-modern-home ~ #main .person-text a { color: var(--dark); font-weight: 700; }
#sd-modern-home ~ #main .person-text i { color: var(--muted); }
#sd-modern-home ~ #main .person-text img { box-shadow: var(--shadow-sm); }

/* "Our Client" logo strip */
#sd-modern-home ~ #main .our_client { align-items: center; display: flex; justify-content: center; padding: .5rem; }
#sd-modern-home ~ #main .our_client img { filter: grayscale(35%); opacity: .82; transition: filter var(--transition-normal), opacity var(--transition-normal), transform var(--transition-normal); }
#sd-modern-home ~ #main .carousel-item:hover .our_client img { filter: none; opacity: 1; transform: scale(1.05); }
#sd-modern-home ~ #main .client { color: var(--muted); font-weight: 700; }

/* Legacy inline banner image */
#sd-modern-home ~ #main #cta img { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }

@media (prefers-reduced-motion: reduce) {
  #sd-modern-home ~ #main .project_complete:hover figure img,
  #sd-modern-home ~ #main .team .member:hover .member-img img,
  #sd-modern-home ~ #main .carousel-item:hover .our_client img { transform: none; }
}

/* ==========================================================================
   Phase 3.3: project.html + about.html visual-consistency audit.
   Scoped with "#page-project" / "#page-about" (ids added to each page's own
   <body> tag only) so nothing here can affect any of the other page-shell
   templates that share generic ids/classes like #main, #features, .services,
   .project_complete, .icon-box, h5, ul, etc.
   -------------------------------------------------------------------------- */

/* ---- project.html ---- */
#page-project .project_complete { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 1.25rem; transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal); }
#page-project .project_complete:hover { border-color: rgba(240, 60, 2, .3); box-shadow: var(--shadow-md); transform: translateY(-4px); }
#page-project .project_complete figure { align-items: center; background: var(--light); border-radius: var(--radius-sm); display: flex; height: 96px; justify-content: center; margin: 0 0 1rem; overflow: hidden; padding: .5rem; }
#page-project .project_complete figure img { height: auto !important; max-height: 72px !important; max-width: 100%; object-fit: contain; transition: transform var(--transition-slow); width: auto !important; }
#page-project .project_complete:hover figure img { transform: scale(1.06); }
#page-project .project_complete .title { color: var(--dark); font-weight: 700; margin-bottom: .5rem; }
#page-project .project_complete .title a { color: var(--dark); font-weight: 700; }
#page-project .project_complete .title a:hover { color: var(--primary); }
#page-project .project_complete .description { -webkit-box-orient: vertical; -webkit-line-clamp: 4; color: var(--muted); display: -webkit-box; flex-grow: 1; overflow: hidden; }
#page-project .project_complete .btn { margin-top: auto; padding-top: .85rem; }
#page-project a.view_project, #page-project button.view_project { transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
#page-project a.view_project:hover, #page-project button.view_project:hover { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--white) !important; transform: translateY(-1px); }
#page-project a.view_project { color: rgba(0, 0, 0, .6); display: inline-block; }
@media (prefers-reduced-motion: reduce) { #page-project .project_complete:hover figure img { transform: none; } }

/* ---- about.html ---- */
#page-about #about-us .content { text-align: left !important; }
#page-about #about-us p { color: var(--text); line-height: 1.8; margin-bottom: 1.1rem; }
#page-about #about-us h3 { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.15rem); margin-bottom: 1rem; }
#page-about #about-us h5 { border-left: 3px solid var(--primary); color: var(--primary) !important; font-family: var(--font-heading); font-size: 1.05rem; letter-spacing: .01em; margin: 2.25rem 0 .75rem; padding-left: .75rem; }
#page-about #about-us .row.no-gutters + .row.no-gutters { margin-top: .5rem; }
#page-about #about-us ul { display: grid; gap: .65rem; grid-template-columns: repeat(2, 1fr); margin: 1rem 0 0; padding: 0; width: 100%; }
#page-about #about-us ul li { align-items: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; font-weight: 600; padding: .8rem 1rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
#page-about #about-us ul li:hover { border-color: rgba(240, 60, 2, .34); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
#page-about #about-us .col-xl-3 { padding: var(--space-6) 0; }
#page-about #about-us .col-xl-3 img { align-self: center; aspect-ratio: 1 / 1; border-radius: 50%; box-shadow: var(--shadow-lg); height: auto !important; max-width: 220px; object-fit: contain; width: 70%; }

/* ---- contact form feedback + enquiry actions (Book Consultant / Get In Touch, contact.html) ---- */
.php_form .loading, .php-form .loading,
.php_form .sent-message, .php-form .sent-message,
.php_form .error-message, .php-form .error-message {
  border-radius: var(--radius-sm);
  display: none;
  font-size: .92rem;
  font-weight: 600;
  margin: var(--space-3) 0;
  padding: .8rem 1rem;
}
.php_form .loading, .php-form .loading { background: var(--light); color: var(--muted); }
.php_form .sent-message, .php-form .sent-message { background: #e9f9ee; color: #1e7b3c; }
.php_form .error-message, .php-form .error-message { background: #fdecea; color: #b3261e; }
.php_form .validate, .php-form .validate { color: #b3261e; display: none; font-size: .8rem; margin: -.4rem 0 .75rem; }
.sd-form-honeypot { left: -9999px; position: absolute; top: -9999px; }
.sd-enquiry-actions { align-items: stretch; display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-4); }
.sd-btn { align-items: center; border-radius: 999px; display: inline-flex; flex: 1 1 auto; font-family: var(--font-heading); font-size: .95rem; font-weight: 700; gap: .5rem; justify-content: center; min-width: 130px; padding: .8rem 1.3rem; text-decoration: none; transition: box-shadow var(--transition-normal), transform var(--transition-normal); }
.sd-btn:hover { text-decoration: none; transform: translateY(-2px); }
.sd-btn i { font-size: 1.1rem; }
.sd-btn-send { background: var(--primary); border: 1px solid var(--primary); box-shadow: var(--shadow-sm); color: var(--white); cursor: pointer; }
.sd-btn-send:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: var(--shadow-md); color: var(--white); }
.sd-btn-send:disabled { cursor: not-allowed; opacity: .65; transform: none; }
.sd-btn-whatsapp { background: #25d366; border: 1px solid #25d366; box-shadow: var(--shadow-sm); color: var(--white); }
.sd-btn-whatsapp:hover { background: #1ebe5b; border-color: #1ebe5b; box-shadow: var(--shadow-md); color: var(--white); }
.sd-btn-call { background: var(--white); border: 1px solid var(--primary); color: var(--primary); }
.sd-btn-call:hover { background: var(--light); box-shadow: var(--shadow-sm); color: var(--primary-dark); }
@media (max-width: 480px) {
  .sd-enquiry-actions { flex-direction: column; }
  .sd-btn { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-btn:hover { transform: none; }
}
@media (max-width: 640px) { #page-about #about-us ul { grid-template-columns: 1fr; } }
/* Homepage testimonial attribution: was a dead href="#" link, now plain text with the same look minus the underline. */
.person-text .person-name { color: red; display: block; font-size: 14px; margin-top: 3px; }
/* ===== Pass 26 ===== */
/* Real photos on creator/artist avatars (square source images, so cover = no crop, aspect ratio kept). */
.sd-media-avatar--photo img { object-fit: cover; padding: 0; }

/* Keyboard focus + pressed states for every .sd-btn (there were none). */
.sd-btn:focus-visible { outline: 3px solid rgba(240, 60, 2, .4); outline-offset: 3px; }
.sd-btn-send:active { box-shadow: var(--shadow-sm); transform: translateY(0); }

/* Contact page "Send Message" button: was an unstyled browser-default button. White on var(--primary-dark) is ~5.9:1 (white on the brand orange is ~3.9:1). */
.sd-btn-send--form { background: var(--primary-dark); border-color: var(--primary-dark); font-size: 1rem; letter-spacing: .01em; margin-top: .5rem; min-height: 50px; min-width: 200px; padding: .85rem 2.25rem; }
.sd-btn-send--form:hover { background: #9c2700; border-color: #9c2700; }

/* Footer "Call Us" block (replaces the non-functional Request-for-Call form). In normal flow, so it cannot overlap the Quick Link columns. */
#footer .sd-footer-note { color: #e9dfda; margin: 0 0 var(--space-3); }
#footer .footer-top a.sd-footer-call { align-items: center; background: var(--primary-dark); border: 1px solid var(--primary-dark); border-radius: 999px; color: var(--white); display: inline-flex; font-family: var(--font-heading); font-weight: 700; gap: .5rem; max-width: 100%; min-height: 44px; padding: .55rem 1.1rem; text-decoration: none; }
#footer .footer-top a.sd-footer-call:hover { background: #d63500; border-color: #d63500; color: var(--white); text-decoration: none; }
#footer .footer-top a.sd-footer-call:focus-visible, #footer .footer-top a.sd-footer-enquiry:focus-visible { outline: 3px solid #ffe0d3 !important; outline-offset: 3px; }
#footer .footer-top a.sd-footer-enquiry { display: block; margin-top: var(--space-3); text-decoration: underline; width: fit-content; }

/* Back-to-top button: respect device safe areas (no effect where there are none). */
.back-to-top { bottom: max(15px, env(safe-area-inset-bottom)); right: max(15px, env(safe-area-inset-right)); }

/* Pass 27: <picture> wrappers (WebP + original fallback) must not create a layout box, so images keep behaving exactly as direct children. */
picture { display: contents; }