:root {
  --navy: #0a315f;
  --navy-deep: #061d3a;
  --yellow: #f5c729;
  --cream: #fffaf0;
  --warm: #f3e8d5;
  --ink: #17202b;
  --muted: #66707d;
  --white: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 17px; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.site-header { position: absolute; z-index: 10; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 24px clamp(20px, 5vw, 72px); }
.brand-link { display: inline-flex; }
.brand-logo { width: 115px; height: auto; object-fit: contain; }
.header-phone { padding: 8px 12px; border-radius: 999px; background: rgba(255,250,240,.9); box-shadow: 0 5px 16px rgba(6,29,58,.14); color: var(--navy); font-size: .9rem; font-weight: 800; letter-spacing: .02em; }

.hero { min-height: 92vh; display: flex; background: var(--warm); }
.hero-copy { width: 100%; max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 130px clamp(24px, 6vw, 100px) 80px; }
.eyebrow { margin: 0 0 18px; color: var(--navy); font-size: .76rem; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.hero h1 { margin: 0; color: var(--navy-deep); font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.25rem, 5.4vw, 6rem); font-weight: 500; letter-spacing: -.065em; line-height: .88; }
.hero h1 em { color: inherit; font-weight: inherit; font-style: normal; }
.hero-text { max-width: 530px; margin: 30px 0 18px; color: #4a5562; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.65; }
.hero-services-inline { margin: 2px 0 24px; }
.hero-services-inline .eyebrow { margin-bottom: 12px; }
.service-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.service-tags strong { padding: 11px 16px; border: 2px solid var(--navy); border-radius: 999px; color: var(--navy-deep); font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; font-weight: 600; }
.primary-link { display: inline-flex; width: fit-content; align-items: center; gap: 20px; padding: 15px 22px; border-radius: 999px; background: var(--navy); color: white; font-size: .9rem; font-weight: 800; transition: transform .2s ease, background .2s ease; }
.primary-link:hover { transform: translateY(-2px); background: var(--navy-deep); }
.section { padding: clamp(74px, 9vw, 130px) clamp(20px, 6vw, 92px); }
.section-heading { max-width: 690px; margin-bottom: 48px; }
.section-heading h2, .contact h2 { margin: 0; color: var(--navy-deep); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.35rem, 4.5vw, 4.4rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.section-heading > p:last-child, .contact > div > p:last-child { max-width: 600px; margin: 20px 0 0; color: var(--muted); line-height: 1.7; }
.gallery-section { background: var(--navy-deep); }
.section-heading.light h2, .section-heading.light p { color: white; }
.section-heading.light > p:last-child { color: #b7c2d0; }
.gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.gallery-card { position: relative; min-height: 410px; margin: 0; overflow: hidden; background: #102c4d; }
.gallery-card-1, .gallery-card-4 { grid-column: span 7; }
.gallery-card-2, .gallery-card-3 { grid-column: span 5; }
.gallery-card-5, .gallery-card-6 { grid-column: span 6; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-card:hover img { transform: scale(1.025); }
.gallery-card figcaption { position: absolute; inset: auto 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 55px 24px 22px; background: linear-gradient(transparent, rgba(6,29,58,.88)); color: white; }
.gallery-card figcaption span { font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.gallery-card figcaption strong { max-width: 270px; font-family: Georgia, serif; font-size: 1.25rem; text-align: right; }
.process { background: var(--warm); }
.process-list { max-width: 1000px; margin: 0; padding: 0; list-style: none; }
.process-list li { display: grid; grid-template-columns: 85px 1fr; gap: 24px; align-items: start; padding: 32px 0; border-top: 1px solid #cfc3b1; }
.process-list li:last-child { border-bottom: 1px solid #cfc3b1; }
.process-list li > span { color: var(--navy); font-family: Georgia, serif; font-size: 2rem; }
.process-list strong { color: var(--navy-deep); font-family: Georgia, serif; font-size: 1.55rem; }
.process-list p { max-width: 600px; margin: 8px 0 0; color: var(--muted); line-height: 1.6; }
.contact { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(520px, 620px); gap: 60px; align-items: center; background: var(--yellow); }
.contact .eyebrow { color: var(--navy-deep); }
.contact > div > p:last-child { color: #454b50; }
.contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.phone-card { padding: 26px 30px; border: 2px solid var(--navy-deep); border-radius: 8px; color: var(--navy-deep); transition: background .2s ease, color .2s ease; }
.phone-card:hover { background: var(--navy-deep); color: white; }
.phone-card span { display: block; margin-bottom: 8px; font-size: .65rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.phone-card strong { font-size: 1.5rem; }
.whatsapp-card { background: var(--navy-deep); color: white; }
.whatsapp-card:hover { background: white; color: var(--navy-deep); }
footer { display: flex; align-items: center; gap: 26px; padding: 34px clamp(20px, 6vw, 92px); background: var(--cream); color: var(--muted); font-size: .8rem; }
footer p { margin: 0; }
footer > span { margin-left: auto; }
footer .brand-logo { width: 74px; height: auto; }

@media (max-width: 900px) {
  .hero-copy { min-height: 670px; }
  .contact { grid-template-columns: 1fr; }
  .contact-actions { width: 100%; }
  .phone-card { width: 100%; }
}

@media (max-width: 620px) {
  html { font-size: 18px; }
  .site-header { padding: 20px 16px; }
  .brand-logo { width: 91px; height: auto; }
  .header-phone { padding: 9px 11px; font-size: .9rem; }
  .hero-copy { min-height: 620px; padding: 115px 22px 60px; }
  .eyebrow { font-size: .84rem; letter-spacing: .13em; line-height: 1.45; }
  .hero-text { font-size: 1.05rem; line-height: 1.65; }
  .service-tags strong { font-size: 1.1rem; }
  .primary-link { font-size: 1rem; }
  .section-heading > p:last-child, .contact > div > p:last-child { font-size: 1rem; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-card, .gallery-card-1, .gallery-card-2, .gallery-card-3, .gallery-card-4, .gallery-card-5, .gallery-card-6 { grid-column: auto; min-height: 480px; }
  .gallery-card figcaption { align-items: flex-start; flex-direction: column; }
  .gallery-card figcaption span { font-size: .78rem; line-height: 1.4; }
  .gallery-card figcaption strong { font-size: 1.32rem; line-height: 1.25; text-align: left; }
  .process-list li { grid-template-columns: 48px 1fr; gap: 10px; }
  .process-list p { font-size: 1rem; }
  .phone-card span { font-size: .78rem; }
  .phone-card strong { font-size: 1.3rem; }
  .contact-actions { grid-template-columns: 1fr; }
  footer { align-items: flex-start; flex-direction: column; gap: 12px; font-size: .92rem; line-height: 1.5; }
  footer > span { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}