/* ==========================================================================
   Mukur General Construction — shared styles
   Brand blue + sunset palette. Tailwind (CDN) handles layout utilities;
   this file holds the reusable components that both the public site and
   the admin panel share.
   ========================================================================== */

:root {
  --brand-950: #102E40;
  --brand-900: #173F56;
  --brand-800: #1D506C;
  --brand-700: #216487;
  --brand-600: #247DA8;
  --brand-500: #3499C5;
  --brand-100: #D9EEFA;
  --brand-50:  #F1F9FD;

  --sunset-rose:  #FFB17D;
  --sunset-500:   #F47745;
  --sunset-600:   #E65F32;
  --sunset-gold:  #C84A27;
  --sunset: linear-gradient(100deg, var(--sunset-rose) 0%, var(--sunset-500) 48%, var(--sunset-gold) 100%);

  --ink: #0F1B2D;
  --muted: #5B6578;
  --line: #E6E2DA;
  --paper: #F6FAFE;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
[x-cloak] { display: none !important; }
::selection { background: #FFC3A3; color: var(--brand-950); }

.font-display {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
}

/* ---- Sunset accents --------------------------------------------------- */
.bg-sunset { background-image: var(--sunset); }
.text-sunset {
  background-image: var(--sunset);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sunset-rule { display: block; width: 56px; height: 3px; border-radius: 3px; background: var(--sunset); }
.sunset-glow {
  position: absolute; pointer-events: none; border-radius: 9999px; filter: blur(90px); opacity: .45;
  background: radial-gradient(circle, rgba(244,119,69,.72) 0%, rgba(125,202,251,.48) 45%, rgba(10,155,245,0) 70%);
}

/* ---- Eyebrow label ------------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brand-700);
}
.eyebrow::before { content: ''; width: 28px; height: 2px; border-radius: 2px; background: var(--sunset); }
.eyebrow.on-dark { color: #FFD84D; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .9rem 1.6rem; border-radius: 9999px;
  font-weight: 700; font-size: .9rem; line-height: 1;
  transition: transform .25s ease, box-shadow .25s ease, background-position .4s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap; cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid #7DCAFB; outline-offset: 3px; }
.btn-sm { padding: .65rem 1.15rem; font-size: .82rem; }

.btn-sunset {
  color: var(--brand-950);
  background-image: linear-gradient(100deg, var(--sunset-rose) 0%, var(--sunset-500) 35%, var(--sunset-gold) 70%, var(--sunset-500) 100%);
  background-size: 200% 100%; background-position: 0% 0;
  box-shadow: 0 10px 24px -10px rgba(230,95,50,.28);
}
.btn-sunset:hover { background-position: 60% 0; box-shadow: 0 14px 30px -10px rgba(230,95,50,.38); }

.btn-brand { color: #fff; background: var(--brand-900); box-shadow: 0 10px 24px -12px rgba(10,23,48,.6); }
.btn-brand:hover { background: var(--brand-700); }

.btn-ghost-light { color: #fff; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); backdrop-filter: blur(6px); }
.btn-ghost-light:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }

.btn-ghost { color: var(--brand-900); border: 1px solid #CFD8E6; background: #fff; }
.btn-ghost:hover { border-color: var(--brand-900); }

.btn-danger { color: #fff; background: #D9374F; }
.btn-danger:hover { background: #BF2B42; }

.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .88rem; color: var(--brand-900); }
.link-arrow i { transition: transform .25s ease; color: var(--brand-500); }
.link-arrow:hover i { transform: translateX(4px); }

/* ---- Form fields -------------------------------------------------------- */
.field {
  width: 100%; display: block;
  padding: .85rem 1rem; border-radius: .85rem;
  border: 1px solid #DAD6CF; background: #fff; color: var(--ink);
  font-size: .95rem; line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder { color: #9AA1AE; }
.field:hover { border-color: #BFC7D4; }
.field:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(52,153,197,.16); }
textarea.field { resize: vertical; min-height: 7rem; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2311264B' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

.field-label { display: block; margin-bottom: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #4A5468; }
.field-error { margin-top: .35rem; font-size: .8rem; color: #C62E46; }
.errorlist { margin-top: .35rem; font-size: .8rem; color: #C62E46; list-style: none; padding: 0; }

.field-file { width: 100%; font-size: .85rem; color: var(--muted); }
.field-file input[type=file], input[type=file].field-file { font-size: .85rem; }
input[type=file]::file-selector-button {
  margin-right: .9rem; padding: .55rem 1rem; border: 0; border-radius: 9999px;
  background: var(--brand-50); color: var(--brand-900); font-weight: 700; cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--brand-100); }

/* ---- Cards ------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 1.25rem;
}
.card-lift { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(17,38,75,.45); border-color: transparent; }

.service-card { position: relative; overflow: hidden; }
.service-card::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--sunset); transform: scaleX(0); transform-origin: left; transition: transform .45s ease;
}
.service-card:hover::after { transform: scaleX(1); }
.service-card .icon-wrap { transition: background-color .35s ease, color .35s ease; }
.service-card:hover .icon-wrap { background: var(--brand-900); color: var(--sunset-500); }

.img-zoom img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.img-zoom:hover img { transform: scale(1.05); }

/* ---- Navigation -------------------------------------------------------- */
.nav-link { position: relative; padding: .35rem 0; color: #3D475A; font-weight: 600; font-size: .92rem; transition: color .2s ease; }
.nav-link:hover { color: var(--brand-900); }
.nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--sunset); transform: scaleX(0); transition: transform .3s ease; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--brand-900); }

/* ---- Hero slider: slow zoom on the active slide ------------------- */
.hero-slide img { transform: scale(1.08); transition: transform 8s ease-out; }
.hero-slide.is-active img { transform: scale(1); }

/* ---- Rich text from the CMS ------------------------------------------- */
.prose-cms p { margin-bottom: 1.1em; }
.prose-cms p:last-child { margin-bottom: 0; }

/* ---- Scroll reveal (progressive: content is visible without JS) ------ */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card-lift, .img-zoom img, .hero-slide img { transition: none; }
}

/* ---- Survey options -------------------------------------------------- */
.option-dot { width: 1.1rem; height: 1.1rem; flex-shrink: 0; border: 2px solid #BFC7D4; background: #fff; transition: all .2s ease; }
.peer:checked + span .option-dot { border-color: var(--brand-900); background: var(--brand-900); box-shadow: inset 0 0 0 3px #fff; }
.peer:checked + span .fa-thumbs-up, .peer:checked + span .fa-thumbs-down { color: var(--sunset-500); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
input[type=checkbox], input[type=radio] { accent-color: var(--brand-900); width: 1.05rem; height: 1.05rem; }
.peer:checked + span { border-color: var(--brand-900); background: var(--brand-50); }

/* ---- Printing admin tables ------------------------------------------ */
@media print {
  aside, header, .no-print, nav { display: none !important; }
  body, main { background: #fff !important; padding: 0 !important; }
  .overflow-x-auto { overflow: visible !important; }
  table { font-size: 10px; }
  th, td { padding: 4px 6px !important; }
}

/* ---- Bright hero background: faint blueprint grid ------------------- */
.hero-grid {
  background-image:
    linear-gradient(rgba(52,153,197,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,153,197,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 30% 30%, #000 30%, transparent 75%);
}


/* ---- 2026 luxury editorial refresh: warm sunset + airy sky blue -------- */
:root {
  --brand-950: #12304A;
  --brand-900: #1B4968;
  --brand-800: #286487;
  --brand-700: #347FA8;
  --brand-600: #4D9CC6;
  --brand-500: #70B9E3;
  --brand-100: #D9EEFA;
  --brand-50: #F0F8FD;
  --sunset-rose: #FFB17D;
  --sunset-500: #F47745;
  --sunset-600: #E65F32;
  --sunset-gold: #C84A27;
  --sunset: linear-gradient(105deg, #FFC08D 0%, #F47745 55%, #D95136 100%);
  --ink: #182A38;
  --muted: #657786;
  --line: #E3EBF0;
  --paper: #F4F9FC;
}

/* Refined, spacious presentation inspired by premium custom-home websites. */
body { color: var(--ink); }
header.sticky { box-shadow: 0 5px 24px rgba(18,48,74,.045); border-bottom-color: rgba(205,222,233,.8); }
.nav-link { color: #405665; letter-spacing: .01em; }
.nav-link:hover, .nav-link.is-active { color: var(--brand-900); }
.btn-sunset { color: #fff; background-image: linear-gradient(105deg, #F98D58 0%, #E65F32 55%, #D95136 100%); box-shadow: 0 10px 24px -12px rgba(230,95,50,.6); }
.btn-sunset:hover { background-position: 60% 0; box-shadow: 0 14px 30px -10px rgba(230,95,50,.42); }
.btn-brand { background: var(--brand-900); }
.btn-brand:hover { background: var(--brand-700); }
.field:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(112,185,227,.18); }
.card { border-color: #E1EAF0; border-radius: 1rem; }
.card-lift:hover { box-shadow: 0 24px 50px -28px rgba(18,48,74,.28); }
.service-card::after { background: var(--sunset); }
.service-card:hover .icon-wrap { background: var(--brand-900); color: #FFB17D; }
.eyebrow::before, .sunset-rule { background: var(--sunset); }
.eyebrow.on-dark { color: #FFB17D; }
::selection { background: #FFD8C2; color: #12304A; }

/* Hero photography and project cards should feel cinematic, not boxed in. */
main > section:first-child { isolation: isolate; }
main > section:first-child img { filter: saturate(.94); }
main > section:first-child .bg-gradient-to-t { background-image: linear-gradient(to top, rgba(10,31,47,.86), rgba(18,48,74,.32) 58%, rgba(18,48,74,.14)); }
main .rounded-3xl { border-radius: 1rem; }
main .rounded-2xl { border-radius: .8rem; }
main .bg-\[\#FAFAF9\] { background-color: #F3F8FB; }

@media (max-width: 640px) {
  main > section:first-child { min-height: 76vh; }
  main > section:first-child h1 { font-size: clamp(2.5rem, 11vw, 3.6rem); line-height: 1.06; }
  .btn { white-space: normal; text-align: center; }
}


/* =====================================================================
   MUKUR CONSTRUCTION — premium residential / architectural refresh
   Palette: sunset coral + airy light blue. Cache-busted in head_assets.
   ===================================================================== */
:root {
  --brand-950: #102E40;
  --brand-900: #173F56;
  --brand-800: #1D506C;
  --brand-700: #216487;
  --brand-600: #247DA8;
  --brand-500: #3499C5;
  --brand-100: #D9EEFA;
  --brand-50: #F1F9FD;
  --sunset-rose: #FFA477;
  --sunset-500: #F47745;
  --sunset-600: #DF6030;
  --sunset-gold: #F98B59;
  --sunset: linear-gradient(110deg, #F47745 0%, #FFA477 100%);
  --paper: #F5FAFD;
  --line: #DFEAF0;
}

body { background: #fff; }
::selection { background: #FFD7C4; color: #102E40; }
.font-display { letter-spacing: -.035em; }

/* Light, architectural navigation */
header.sticky {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid #DFEAF0 !important;
  box-shadow: 0 5px 28px rgba(16,46,64,.045);
}
.nav-link { color: #385365; letter-spacing: .015em; }
.nav-link:hover, .nav-link.is-active { color: #F47745; }
.nav-link::after { background: #F47745; height: 2px; }

/* True sunset buttons rather than the previous yellow/gold */
.btn-sunset {
  color: #fff !important;
  background: linear-gradient(115deg, #F47745, #F98B59 55%, #FFA477) !important;
  background-size: 150% 100% !important;
  box-shadow: 0 10px 24px -10px rgba(223,96,48,.5) !important;
}
.btn-sunset:hover { background-position: 100% 0 !important; box-shadow: 0 14px 30px -10px rgba(223,96,48,.42) !important; }
.btn-ghost { border-color: #C9DFEA; }
.btn-ghost:hover { border-color: #F47745; color: #DF6030; }

/* Architectural photography and editorial rhythm */
.hero-slide img, section.relative.min-h-\[90vh\] img { filter: saturate(.88) contrast(1.03); }
section.relative.min-h-\[90vh\] { min-height: min(790px, calc(100vh - 40px)); }
section.relative.min-h-\[90vh\] > .absolute.inset-0 > .absolute.inset-0.bg-gradient-to-t {
  background: linear-gradient(90deg, rgba(16,46,64,.86) 0%, rgba(16,46,64,.63) 44%, rgba(16,46,64,.15) 100%), linear-gradient(0deg, rgba(16,46,64,.48), transparent 65%) !important;
}
section.relative.min-h-\[90vh\] h1 { max-width: 900px; text-wrap: balance; line-height: 1.02; }
section.relative.min-h-\[90vh\] .inline-flex.items-center.gap-2\.5 { border-color: rgba(255,255,255,.32); }

/* Clean pale-blue section backgrounds, fine borders and softer geometry */
.bg-\[\#FAFAF9\] { background-color: #F3F9FC !important; }
.bg-\[\#FAFAF9\].border-t, .bg-\[\#FAFAF9\].border-stone-200\/60 { border-color: #DFEAF0 !important; }
.rounded-3xl { border-radius: 1.15rem; }
.rounded-\[2\.5rem\] { border-radius: 1.35rem !important; }
.card, .service-card { border-color: #DFEAF0; }
.card-lift:hover { box-shadow: 0 24px 54px -32px rgba(16,46,64,.35); }
.service-card::after { background: linear-gradient(90deg,#F47745,#FFA477); }

/* Headings and micro-labels feel more like an architecture studio */
.eyebrow, .text-xs.font-bold.uppercase.tracking-\[0\.2em\] { letter-spacing: .17em; }
.eyebrow::before { background: #F47745; }
.eyebrow.on-dark { color: #FFA477; }
.link-arrow i { color: #F47745; }
.field:focus { border-color: #3499C5; box-shadow: 0 0 0 4px rgba(52,153,197,.14); }

/* Footer retains a deep architectural blue, with a restrained sunset accent */
footer.bg-brand-950 { background: #102E40 !important; }
footer .text-sunset, footer .text-sunset-400 { color: #FFA477 !important; }
footer .sunset-glow { background: radial-gradient(circle, rgba(244,119,69,.34), rgba(92,178,216,.22) 45%, transparent 72%); }

@media (max-width: 767px) {
  section.relative.min-h-\[90vh\] { min-height: 690px; }
  section.relative.min-h-\[90vh\] > .absolute.inset-0 > .absolute.inset-0.bg-gradient-to-t {
    background: linear-gradient(90deg, rgba(16,46,64,.77), rgba(16,46,64,.42)), linear-gradient(0deg, rgba(16,46,64,.62), transparent 85%) !important;
  }
}