:root { --ink:#182626; --paper:#f4f1ea; --accent:#9bc443; --line:rgba(24,38,38,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.site-header { height:90px; padding:0 clamp(22px,4vw,64px); display:grid; grid-template-columns:220px 1fr auto; align-items:center; gap:35px; background:var(--paper); position:relative; z-index:3; }
.brand img { width:188px; height:auto; filter:brightness(0) saturate(100%) invert(12%) sepia(14%) saturate(914%) hue-rotate(131deg) brightness(92%); }
nav { display:flex; justify-content:center; gap:clamp(18px,3vw,44px); font-size:13px; text-transform:uppercase; letter-spacing:.11em; }
nav a { padding:10px 0; border-bottom:1px solid transparent; }
nav a:hover { border-color:var(--ink); }
.header-cta { background:var(--ink); color:white; padding:15px 20px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.hero { min-height:calc(100vh - 90px); height:760px; position:relative; display:flex; align-items:center; overflow:hidden; color:white; }
.hero-image,.hero-overlay { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-image { object-position:center 42%; }
.hero-overlay { background:linear-gradient(90deg,rgba(8,29,31,.86) 0%,rgba(8,29,31,.55) 42%,rgba(8,29,31,.08) 78%); }
.hero-content { position:relative; z-index:1; max-width:900px; padding:40px clamp(24px,7vw,108px); }
.eyebrow,.section-index { display:block; text-transform:uppercase; font-size:11px; font-weight:bold; letter-spacing:.18em; margin-bottom:28px; }
.eyebrow { color:var(--accent); }
h1,h2 { margin:0; font-family:Georgia, 'Times New Roman', serif; font-weight:400; letter-spacing:-.04em; line-height:.98; }
h1 { font-size:clamp(53px,7vw,102px); }
.hero-content>p { max-width:600px; font-size:18px; line-height:1.7; margin:30px 0 36px; color:rgba(255,255,255,.83); }
.hero-actions { display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:30px; min-width:240px; padding:18px 21px; text-transform:uppercase; font-size:12px; font-weight:bold; letter-spacing:.09em; }
.button-light { background:var(--accent); color:var(--ink); }
.button-dark { background:var(--ink); color:white; }
.text-link { font-size:13px; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:7px; }
.hero-note { position:absolute; z-index:1; right:0; bottom:0; background:var(--paper); color:var(--ink); padding:24px 34px; width:min(360px,40%); }
.hero-note strong,.hero-note span { display:block; }
.hero-note strong { font-family:Georgia,serif; font-size:25px; margin-bottom:5px; }
.hero-note span { font-size:12px; color:#5c6967; }
.section { padding:clamp(85px,10vw,150px) clamp(24px,7vw,108px); }
.intro { display:grid; grid-template-columns:1fr 2fr; gap:50px; }
.intro-copy h2,.section-heading h2,.projects-heading h2,.contact-title h2 { font-size:clamp(46px,6vw,84px); }
h2 em { color:#75827e; font-weight:400; }
.intro-copy>p { max-width:680px; margin:40px 0 55px; font-size:18px; line-height:1.8; color:#53605e; }
.facts { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); padding-top:28px; gap:25px; }
.facts strong,.facts span { display:block; }
.facts strong { font:400 42px Georgia,serif; }
.facts span { margin-top:8px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#65706e; }
.services { background:#e7e4db; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:75px; }
.section-heading h2 { width:66%; }
.service-list { border-top:1px solid var(--line); }
.service-row { min-height:112px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:70px 1fr 1.15fr 35px; align-items:center; gap:25px; }
.service-row>span { font:16px Georgia,serif; color:#7b8884; }
.service-row h3 { margin:0; font:400 30px Georgia,serif; }
.service-row p { margin:0; color:#5e6866; line-height:1.55; font-size:14px; }
.service-row b { font-size:21px; font-weight:400; }
.projects { padding:clamp(85px,10vw,150px) clamp(24px,7vw,108px); background:var(--ink); color:white; }
.projects-heading { display:grid; grid-template-columns:1fr 2fr; margin-bottom:65px; }
.projects-heading em { color:#93a09b; }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.project { margin:0; height:440px; position:relative; overflow:hidden; }
.project-wide { grid-column:span 2; height:570px; }
.project img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.project:hover img { transform:scale(1.025); }
.project figcaption { position:absolute; inset:auto 0 0; display:flex; justify-content:space-between; padding:50px 25px 22px; background:linear-gradient(transparent,rgba(0,0,0,.7)); text-transform:uppercase; font-size:12px; letter-spacing:.1em; }
.about-strip { display:grid; grid-template-columns:1.05fr .95fr; min-height:620px; }
.about-image img { width:100%; height:100%; object-fit:cover; }
.about-text { background:var(--accent); padding:clamp(55px,7vw,100px); display:flex; flex-direction:column; justify-content:center; }
.about-text h2 { font-size:clamp(40px,4.5vw,64px); }
.about-text p { line-height:1.75; margin:30px 0; }
.about-text ul { padding:0; margin:0; list-style:none; border-top:1px solid rgba(24,38,38,.25); }
.about-text li { padding:15px 0; border-bottom:1px solid rgba(24,38,38,.25); font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.about-text li::before { content:'✓'; margin-right:14px; }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,10vw,150px); }
.contact-card>p { font:28px/1.45 Georgia,serif; margin:38px 0; max-width:520px; }
.contact-details { margin-top:55px; border-top:1px solid var(--line); }
.contact-details a,.contact-details address { display:block; padding:20px 0; border-bottom:1px solid var(--line); font-style:normal; line-height:1.55; }
.contact-details small { display:block; text-transform:uppercase; letter-spacing:.12em; font-size:10px; color:#71807c; margin-bottom:6px; }
footer { background:#111c1d; color:white; padding:55px clamp(24px,7vw,108px) 30px; display:grid; grid-template-columns:1fr 1fr auto; gap:30px; align-items:start; }
footer img { width:180px; filter:brightness(0) invert(1); }
footer p { margin:0; color:#a8b2af; font-size:14px; }
footer>a { font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
footer small { grid-column:1/-1; margin-top:45px; padding-top:25px; border-top:1px solid rgba(255,255,255,.12); color:#7e8c89; }
.floating-whatsapp { position:fixed; z-index:5; right:22px; bottom:22px; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:#25d366; color:white; font-weight:bold; font-size:13px; box-shadow:0 8px 25px rgba(0,0,0,.22); }

@media (max-width:900px) {
  .site-header { height:76px; grid-template-columns:1fr auto; }
  .brand img { width:155px; }
  nav { display:none; }
  .header-cta { padding:13px 15px; font-size:10px; }
  .hero { min-height:700px; height:calc(100vh - 76px); }
  .hero-note { width:auto; right:20px; padding:18px 22px; }
  .intro,.projects-heading,.contact { grid-template-columns:1fr; }
  .section-heading { display:block; }
  .section-heading h2 { width:100%; }
  .service-row { grid-template-columns:45px 1fr 25px; padding:22px 0; }
  .service-row p { grid-column:2/4; }
  .about-strip { grid-template-columns:1fr; }
  .about-image { height:430px; }
}

@media (max-width:600px) {
  .site-header { padding:0 18px; }
  .header-cta { font-size:0; min-width:46px; }
  .header-cta::after { content:'WhatsApp'; font-size:10px; }
  .hero-content { padding:35px 22px 100px; }
  h1 { font-size:49px; }
  .hero-content>p { font-size:16px; }
  .hero-note { display:none; }
  .section { padding:78px 22px; }
  .intro-copy h2,.section-heading h2,.projects-heading h2,.contact-title h2 { font-size:44px; }
  .facts { grid-template-columns:1fr; }
  .facts div { display:flex; align-items:baseline; gap:15px; }
  .facts strong { font-size:35px; }
  .project-grid { grid-template-columns:1fr; }
  .project,.project-wide { grid-column:auto; height:420px; }
  .projects { padding:78px 22px; }
  .about-image { height:320px; }
  .about-text { padding:65px 24px; }
  footer { grid-template-columns:1fr; }
  footer small { grid-column:auto; }
}