*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --display:"Wix Madefor Display",Helvetica,Arial,sans-serif;
  --text:"Wix Madefor Text",Helvetica,Arial,sans-serif;
  --black:#000;--white:#fff;--slate:#677e82;--red:#8b0000;
  --ph:#d9d9d9;--ph-ink:#8a8a8a;--line:#000;
}
body{font-family:var(--text);color:var(--black);background:var(--white);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{max-width:1280px;margin:0 auto;padding:0 40px}

/* Placeholders */
.ph{position:relative;background:var(--ph);display:flex;align-items:center;justify-content:center;overflow:hidden;
  background-image:linear-gradient(135deg,transparent 49.6%,rgba(0,0,0,.08) 50%,transparent 50.4%),linear-gradient(45deg,transparent 49.6%,rgba(0,0,0,.08) 50%,transparent 50.4%)}
.ph span{font:500 13px/1 var(--text);color:var(--ph-ink);letter-spacing:.04em;text-transform:uppercase;background:var(--ph);padding:6px 10px;text-align:center}
.ph-dark{background-color:#8f877d}
.ph-dark span{background:#8f877d;color:#e8e2da}

/* Images inside placeholders */
.ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph > img.contain{object-fit:contain}
/* once a real image (not a .svg placeholder) is in, drop the placeholder styling */
.ph:has(> img:not([src$=".svg"])){background:none}
.ph-logo:has(> img:not([src$=".svg"])){clip-path:none}
.ph-icon:has(> img:not([src$=".svg"])){border-radius:0}

/* Hero — text sizes use --u = the smaller of 1% width / 1% of the 1920×1018 design height, so the layout always fits */
.hero{--u:min(1vw, 1.886vh);position:relative;height:100vh;min-height:560px;color:var(--white);display:flex;align-items:flex-end;overflow:hidden}
/* Header fills the screen. Parallax image box: at least the image's own proportions (full width visible
   on widescreens) and at least 110% of the header, so it always covers it; starts vertically centred and
   slides down at 0.3× scroll speed (see script in index.html). On tall-narrow windows the sides are trimmed. */
.hero-bg{position:absolute;left:0;right:0;top:50%;height:max(calc(100vw * 1323 / 1920), 110%);transform:translate3d(0,-50%,0);will-change:transform}
.hero-bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.12)}
.hero-inner{position:relative;z-index:1;width:100%;padding:0 5.2vw calc(var(--u) * 6.2);display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.hero-intro{font-size:clamp(13px,calc(var(--u) * 1.2),30px);line-height:1.8;max-width:24em;margin-bottom:calc(var(--u) * .6)}
.hero-intro strong{font-family:var(--display);font-weight:700}
.hero-title{font:700 calc(var(--u) * 11.5)/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.hero-title br{display:none}
.awards{width:calc(var(--u) * 41);aspect-ratio:10/1;margin:calc(var(--u) * 1.6) 0 0;align-self:center;background-color:rgba(255,255,255,.35)}
.awards span{background:transparent;color:#fff;font-size:11px}

/* Section headings */
.h-section{font:700 36px/1.4 var(--display)}
.h-big{font:700 clamp(44px,6vw,72px)/1.2 var(--display);padding-top:60px;padding-bottom:50px}

/* Projects */
.projects{padding-top:84px;padding-bottom:80px}
.projects-head{display:flex;justify-content:space-between;gap:40px;margin-bottom:40px}
.projects-intro{max-width:540px;font-size:16px}
.projects-intro ul{margin-top:8px}
.projects-intro li{position:relative;padding-left:16px;font-size:15px;line-height:1.75}
.projects-intro li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:#000}
.projects-intro li strong{font-family:var(--display);font-weight:600}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:64px 40px}
.project .ph{aspect-ratio:600/345}
.project h3{font:700 18px/1.2 var(--display);margin-top:28px}
.project p{font-size:16px;line-height:1.8}

/* Offer */
.offer{padding-top:30px}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.offer-col{display:flex;flex-direction:column;border-right:1px solid var(--line)}
.offer-col:last-child{border-right:0}
.offer-text{padding:44px 40px 50px}
.offer-text h3{font:500 18px/1.3 var(--text);margin-bottom:22px}
.offer-text p{font-size:16px;line-height:1.6;max-width:340px}
.offer-img{height:400px}

/* World */
.world{padding-top:80px;padding-bottom:40px}
.ph-map{aspect-ratio:1160/620;background-color:#f1f1f1;
  background-image:radial-gradient(#bdbdbd 1.6px,transparent 1.8px);background-size:10px 10px}
.ph-map span{background:#f1f1f1}
.world-title{font:400 clamp(28px,3.5vw,48px)/1.1 var(--display);margin:24px 0 0 auto;width:fit-content;padding-right:60px}

/* Contact */
.contact{background:var(--slate);color:#000;padding:60px 0}
.contact-inner{display:flex;justify-content:space-between;gap:60px;align-items:center}
.ph-logo{width:140px;height:125px;clip-path:polygon(50% 0,100% 100%,0 100%);background-color:#a9b8ba;margin-bottom:30px}
.ph-logo span{background:transparent;color:#677e82;margin-top:40px}
.contact-left h2{font:400 clamp(36px,4vw,55px)/1.22 var(--display)}
.contact-left h2 strong{font-weight:800}
.contact-form{flex:0 1 460px;display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-right:60px}
.contact-form input,.contact-form textarea{font:400 14px var(--display);background:#fff;border:1px solid #000;padding:8px 10px;color:#000;outline:none;width:100%}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--red)}
.contact-form textarea{grid-column:1/-1;min-height:86px;resize:vertical}
.contact-form button{grid-column:1/2;background:var(--red);color:#fff;border:0;font:400 16px var(--display);padding:10px;cursor:pointer;margin-top:4px}
.contact-form button:hover{background:#a40000}
.contact-form button:disabled{opacity:.6;cursor:default}
.form-status{grid-column:1/-1;min-height:1.4em;font-size:14px}

/* Footer */
.footer{background:#000;color:#fff;padding:60px 0 50px;font-family:var(--display);font-size:14px}
.footer-inner{display:flex;justify-content:space-between;gap:40px}
.f-brand{font-size:20px}
.f-sub{font-size:16px;margin-bottom:50px}
.footer address{font-style:normal;line-height:1.55}
.f-right{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;min-width:300px}
.socials{display:flex;gap:10px}
.ph-icon{width:20px;height:20px;border-radius:50%;background-color:#555}
.copy{align-self:flex-start;margin-top:80px}

/* Responsive */
/* Phones: the wide header would make the text unreadably small, so let it grow taller (image crops at the sides) */
@media (max-width:700px){
  .hero{height:auto;min-height:540px}
  .hero-bg{height:130%}
  .hero-inner{padding:0 20px 40px}
  .hero-intro{font-size:15px;margin-bottom:14px}
  .hero-title{font-size:19vw;white-space:normal}
  .hero-title br{display:inline}
  .awards{width:100%;margin-top:24px}
}
@media (max-width:900px){
  .container{padding:0 20px}
  .projects-head{flex-direction:column}
  .grid-2{grid-template-columns:1fr;gap:40px}
  .offer-grid{grid-template-columns:1fr}
  .offer-col{border-right:0;border-bottom:1px solid var(--line)}
  .offer-text{padding:32px 20px}
  .offer-img{height:300px}
  .world-title{padding-right:0}
  .contact-inner{flex-direction:column;align-items:flex-start}
  .contact-form{margin-right:0;width:100%;flex:none}
  .footer-inner{flex-direction:column}
  .f-right{align-items:flex-start}
  .copy{margin-top:30px}
}
@media (max-width:480px){
  .contact-form{grid-template-columns:1fr}
  .contact-form textarea,.contact-form button{grid-column:auto}
}