/* ==========================================================
   Structures & Co brand layer (loaded after the template CSS)
   Palette taken from the visiting card:
   terracotta #A65F3B, clay #C07A55, sage #B9BCAE,
   cream #F5EDE3, espresso #2E2620
   ========================================================== */
:root {
  --sc-terracotta: #A65F3B;
  --sc-clay: #D49A76;
  --sc-sage: #B9BCAE;
  --sc-cream: #F5EDE3;
  --sc-espresso: #2E2620;
  --sc-ink: #4A403A;
}

body { color: #6B615A; font-size: 16px; background: #fff; }
h1, h2, h3, h4, h5, h6 { color: var(--sc-espresso); font-weight: 600; text-transform: none; letter-spacing: 0.2px; }
h1, .h1 { line-height: 1.05; }
p { line-height: 1.75; }
a { transition: color .25s ease; }
.secondary-light { color: var(--sc-clay) !important; }
.secondarylight { color: var(--sc-cream); }
.teko { font-family: "Jost", Arial, sans-serif; }

/* Small uppercase label used above headings */
.eyebrow {
  font-family: "Jost", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sc-terracotta);
}
.eyebrow-light { color: var(--sc-clay) !important; }

/* Accessibility */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: var(--sc-espresso); color: #fff; padding: 10px 16px; }
.skip-link:focus { left: 10px; top: 10px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--sc-terracotta); outline-offset: 2px; }

/* Brand logo (header + footer) */
.brand-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-logo img { width: 44px; height: auto; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: "Jost", Arial, sans-serif; font-size: 22px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; white-space: nowrap; }
.brand-tag { font-family: "Jost", Arial, sans-serif; font-size: 9.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--sc-clay); margin-top: 6px; white-space: nowrap; }
.brand-logo-lg img { width: 60px; }
.brand-logo-lg .brand-name { font-size: 28px; }
.brand-logo-lg .brand-tag { font-size: 11px; }
header .header-nav .header-logo img { width: 44px; }
@media (max-width: 768px) {
  header .header-nav .header-logo img { width: 36px; }
  .brand-name { font-size: 18px; }
  .brand-tag { font-size: 8px; letter-spacing: 2px; }
}

/* Header */
header .header-top { font-size: 14px; }
header .header-nav .navbar-nav .nav-link { letter-spacing: 1.5px; font-size: 14px; }
header .header-icons a.white { color: #fff; }
.navbar-sticky-in { background: var(--sc-espresso); }
.dropdown-item.active, header .header-nav .navbar-nav .nav-item .dropdown-menu > li > a.active { background-color: var(--sc-terracotta) !important; color: #fff !important; }
header .header-nav .navbar-nav .nav-item .dropdown-menu { min-width: 280px; }
@media (max-width: 1180px) {
  .slicknav_btn { right: 52px; }
  .slicknav_nav { height: auto; max-height: 75vh; }
}

/* Buttons */
.btn-primary, .btn-secondary { letter-spacing: .5px; border: 2px solid transparent; }
.btn-primary { background-color: var(--sc-terracotta); }
.btn-primary:hover { background-color: var(--sc-espresso); }
button.btn-primary { cursor: pointer; }

/* Hero */
.banner .slide { height: 860px; background-size: cover; }
.banner .banner-info h1, .banner .banner-info .h1 { font-size: 64px; margin-bottom: 18px; }
.hero-sub { font-size: 18px; color: #EFE6DC; }
.since-num { font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; font-weight: 600; color: var(--sc-clay); line-height: 1; }
.banner .since-section { background: var(--sc-espresso) !important; }
@media (max-width: 1200px) { .banner .banner-info h1, .banner .banner-info .h1 { font-size: 52px; } }
@media (max-width: 768px) {
  .banner .slide { height: 720px; }
  .banner .banner-info h1, .banner .banner-info .h1 { font-size: 36px; }
  .hero-sub { font-size: 16px; }
  .banner .since-section { position: relative !important; bottom: auto !important; }
}

/* Inner page hero */
.breadcrumb { height: 460px; background-size: cover; background-position: center; }
.breadcrumb h1 { font-size: 58px; }
.breadcrumb .overlay { background: linear-gradient(180deg, rgba(46, 38, 32, .75) 0%, rgba(46, 38, 32, .55) 100%); }
.sc-crumbs a { color: var(--sc-clay); }
.sc-crumbs a:hover { color: #fff; }
@media (max-width: 768px) { .breadcrumb { height: 400px; } .breadcrumb h1 { font-size: 36px; } }

/* About */
.signature-name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; font-style: italic; color: var(--sc-espresso); }
.sc-stats .stat-num { font-family: "Cormorant Garamond", Georgia, serif; font-size: 40px; font-weight: 600; display: block; line-height: 1.1; }
.heading-clip { -webkit-text-stroke-color: #EDE4DA; stroke: #EDE4DA; }

/* Services */
.service .service-body .service-box { padding: 36px 26px; }
.service .service-body .service-box h3 { font-size: 30px; }

/* Values box on dark */
.sc-values li { color: #E9E1D8; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.15); }
.sc-values li:last-child { border-bottom: 0; }

/* Process (dark section) */
.process .eyebrow, .process .eyebrow-light { color: var(--sc-clay) !important; -webkit-text-stroke-width: 0; }
.process .process-box p { color: #D8CFC6; }
.process .process-box h3 { font-size: 30px; }

/* Workspace types gallery: keep titles visible on touch devices */
.project .project-box { text-decoration: none; }
.project .project-box .overlay { opacity: 1; top: 0; background: linear-gradient(0deg, rgba(20,15,12,.85) 0, rgba(20,15,12,0) 65%); }
.project .project-box .project-info { bottom: 0; }
.project .project-box .project-info .btn-secondary { opacity: 0; transition: opacity .4s ease; }
.project .project-box:hover .project-info .btn-secondary { opacity: 1; }
@media (max-width: 768px) { .project .project-box { min-height: 300px; height: 300px; } .project .project-box .project-info .btn-secondary { opacity: 1; } }

/* Locations */
.sc-locations { background: #fff; }
.sc-chips li { background: var(--sc-cream); color: var(--sc-ink); padding: 10px 16px; font-size: 14px; border: 1px solid #EADFD2; }

/* Founder */
.sc-founder img { min-height: 420px; object-position: center top; }
.sc-quote { font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; font-style: italic; color: var(--sc-terracotta); border-left: 3px solid var(--sc-terracotta); padding-left: 16px; }
.footer-quote { font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; }

/* FAQ */
.faq .accordion-button { font-family: "Jost", Arial, sans-serif; font-size: 16px; font-weight: 500; color: var(--sc-espresso); }
.faq .accordion-button:not(.collapsed), .faq-accordion .accordion-button:not(.collapsed) { background: var(--sc-terracotta); color: #fff; }
.faq-accordion .accordion-button { font-size: 16px; font-weight: 500; }
.accordion-header { margin: 0; }
.accordion-button:focus { box-shadow: none; }

/* Forms */
.sc-enquiry-form input, .sc-enquiry-form select, .sc-enquiry-form textarea { background: #fff; color: var(--sc-ink); }
.sc-enquiry-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #A65F3B 50%), linear-gradient(135deg, #A65F3B 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.sc-enquiry-form .form-note { color: #8A7F77; }
.sc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form-right { border-top: 3px solid var(--sc-terracotta); }
.sc-contact-list li { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px dashed #EADFD2; color: var(--sc-ink); }
.sc-contact-list i { width: 22px; font-size: 20px; text-align: center; }

/* Service detail */
.sc-offer { background: #fff; transition: border-color .3s ease, transform .3s ease; }
.sc-offer:hover { border-color: var(--sc-clay) !important; transform: translateY(-3px); }
.sc-offer h3 { font-family: "Jost", Arial, sans-serif; font-size: 18px; font-weight: 600; }
.sc-checklist li { padding: 6px 0; color: var(--sc-ink); }
.sc-step-list { list-style: none; padding: 0; }
.sc-step-num { font-family: "Cormorant Garamond", Georgia, serif; font-size: 32px; color: var(--sc-terracotta); font-weight: 600; line-height: 1; display: block; margin-bottom: 6px; }
.sc-step-list h3 { font-family: "Jost", Arial, sans-serif; font-size: 17px; font-weight: 600; }
.sc-ideal { border-left: 4px solid var(--sc-terracotta); }
.cv-box { background-size: cover; background-position: center; }
.cv-box a.h3:hover { color: var(--sc-clay) !important; }
@media (min-width: 992px) { .sc-sticky { position: sticky; top: 110px; } }
.service-image img, .sc-img-frame img { aspect-ratio: 16 / 10; object-fit: cover; }
.sc-img-frame { overflow: hidden; }
.sc-img-frame img { transition: transform .6s ease; }
.sc-img-frame:hover img { transform: scale(1.04); }
.lead-sm { font-size: 18px; font-style: italic; font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; }

/* Appointment strip + footer */
.appointment-icon { font-size: 40px; }
.footer-areas { line-height: 2; color: #D8CFC6; }
footer .overlay { background: rgba(30, 24, 20, .9); }
footer a:hover { color: var(--sc-clay); }

/* Thank you / legal */
.sc-thanks-icon { font-size: 64px; display: block; margin-bottom: 16px; }
.sc-legal p, .sc-legal li { color: var(--sc-ink); }

/* Floating contact buttons */
.sc-float { position: fixed; left: 20px; bottom: 20px; z-index: 1001; display: flex; flex-direction: column; gap: 12px; }
.sc-float-btn { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; box-shadow: 0 6px 18px rgba(0,0,0,.22); transition: transform .25s ease; }
.sc-float-btn:hover { transform: scale(1.08); color: #fff; }
.sc-float-wa { background: #25D366; }
.sc-float-call { background: var(--sc-terracotta); font-size: 22px; }

/* Back to top colour */
#back-to-top a:hover { background-color: var(--sc-espresso) !important; }

@media (max-width: 576px) {
  section, .section-padding { padding: 70px 0; }
  .sc-quote { font-size: 22px; }
  .sc-stats .stat-num { font-size: 30px; }
}

/* Fixes after QA */
.sc-contact-list a { color: var(--sc-ink); }
.sc-contact-list a:hover { color: var(--sc-terracotta); }
.appointment .h3 { white-space: nowrap; font-size: 30px; }
@media (max-width: 1200px) { .appointment .h3 { font-size: 24px; } }
.sc-founder .col-md-5 { min-height: 420px; }
.sc-founder .col-md-5 img { height: 100%; }
.service .service-title { background-image: url(../img/grade-a-commercial-buildings-pune.jpg); }
.service .service-title .overlay { background: rgba(46, 38, 32, .78); }
footer { background-color: var(--sc-espresso); }
@media (max-width: 1400px) { .appointment .h3 { font-size: 24px; } }
@media (max-width: 991px) {
  .service .service-title, .faq, .stat, footer { background-attachment: scroll; }
}
@media (max-width: 768px) {
  .about { padding-top: 70px; }
  .banner .banner-info { padding-top: 110px; }
}
@media (max-width: 576px) {
  .sc-float { left: 12px; bottom: 14px; gap: 10px; }
  .sc-float-btn { width: 46px; height: 46px; font-size: 22px; }
  .sc-float-call { font-size: 19px; }
}

/* ==========================================================
   Responsive images (Android + iOS)
   Every content image keeps a fixed frame and crops with
   object-fit, so any uploaded photo size or ratio looks right.
   ========================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }
main img { display: block; }

.about .about-right img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }
.why-us .why-us-image img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.why-us > .container > .row img.w-100 { aspect-ratio: 4 / 3; object-fit: cover; }
.service-image img, .sc-img-frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.sc-founder .col-md-5 { min-height: 0; }
.sc-founder .col-md-5 img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: center 20%; }

/* iOS Safari zooms into inputs smaller than 16px */
.sc-enquiry-form input, .sc-enquiry-form select, .sc-enquiry-form textarea { font-size: 16px; }

@media (max-width: 991px) {
  /* About block: drop the dark side stripe and stack the quote under the photo */
  .about .about-right { padding: 0 !important; background-image: none; }
  .about .about-right img { aspect-ratio: 4 / 3; }
  .about .about-qoute { width: 100% !important; margin-top: 0 !important; }

  /* Why us: two photos side by side, values box below them */
  .why-us .why-us-image { margin-right: 0 !important; }
  .why-us .why-us-image img.mt-5 { margin-top: 0 !important; }
  .why-us .why-us-progressbar { width: 100% !important; margin-top: 16px !important; }

  /* Founder photo */
  .sc-founder .col-md-5 img { min-height: 0; height: auto; aspect-ratio: 4 / 5; max-height: 560px; }

  /* Hero and page banners */
  .banner .slide { background-position: center center; }
  .breadcrumb { height: auto; min-height: 380px; }
  .breadcrumb .container { position: relative !important; top: auto !important; left: auto !important; transform: none !important; padding: 170px 15px 60px; }
  .breadcrumb .breadcrumb-inner { margin-top: 0 !important; }

  .project .project-box { background-position: center; }
  .sc-stats .stat-num { font-size: 28px; }
}

@media (max-width: 576px) {
  .about .about-right img { aspect-ratio: 1 / 1; }
  .why-us .why-us-image img { aspect-ratio: 4 / 5; }
  .heading-clip { display: none; }
  .about-btns > ul { justify-content: center !important; }
  .appointment .h3 { font-size: 22px; }
}

/* Mobile: floating buttons become a bottom contact bar so they never cover text */
.sc-float-label { display: none; }
@media (max-width: 576px) {
  body { padding-bottom: 56px; }
  .sc-float { left: 0; right: 0; bottom: 0; flex-direction: row; gap: 0; padding-bottom: env(safe-area-inset-bottom); background: var(--sc-espresso); box-shadow: 0 -4px 14px rgba(0,0,0,.15); }
  .sc-float-btn { flex: 1; width: auto; height: 56px; border-radius: 0; box-shadow: none; font-size: 20px; gap: 10px; }
  .sc-float-btn:hover { transform: none; }
  .sc-float-call { font-size: 18px; }
  .sc-float-label { display: inline; font-family: "Jost", Arial, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: .5px; }
  #back-to-top { bottom: 72px !important; right: 14px; }
  #back-to-top a { width: 42px; height: 42px; }
}

/* Info popup: phone and email links were inheriting white text */
.intereal-info-modal .contact-info a { color: var(--sc-ink) !important; }
.intereal-info-modal .contact-info a:hover { color: var(--sc-terracotta) !important; }
.intereal-info-modal .contact-info i { color: var(--sc-terracotta); }