/* Perfecto Qatar — Premium Architectural V2 — staged 2026-10-27.
   Preserve public content, anchors, technical PDFs, real photos, forms, metadata and original CSS.
   This isolated last-in cascade contains only design and interaction styling. */
:root { --pq-ink:#182125; --pq-dark:#172126; --pq-red:#c24f55; --pq-cream:#f5f3ef; --pq-line:#e5e3df; }
html { scroll-padding-top:90px; }
body { background:#fff; }
.site-header, .site-header .header-inner { background:#fff !important; }
.site-header { box-shadow:0 1px 0 rgba(17,21,26,.09); }
.site-header .brand, .site-header .brand img { background:#fff; }
.site-header .main-nav a { color:var(--pq-ink); }
.site-header .header-cta { background:var(--pq-red); color:#fff; border-radius:2px; }
.site-header .nav-toggle { color:var(--pq-ink); }
.utility-bar { background:var(--pq-dark); }
.hero { position:relative; isolation:isolate; overflow:hidden; background:var(--pq-dark); color:#fff; min-height:710px; }
.hero::before { content:""; position:absolute; z-index:-2; inset:0; background-image:linear-gradient(90deg,rgba(7,16,22,.9) 0%,rgba(9,18,25,.76) 35%,rgba(13,20,25,.24) 88%),url("assets/projects/energy_city_asphalt.webp"); background-size:cover; background-position:center 48%; transform:scale(1.02); }
.hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(0deg,rgba(9,15,20,.35),transparent 46%); pointer-events:none; }
.hero .hero-grid { display:flex; align-items:center; min-height:710px; gap:0; }
.hero .hero-copy { z-index:2; padding:86px 0 70px; width:min(850px,88%); min-height:670px; }
.hero .hero-visual { display:none !important; }
.hero .eyebrow { color:#f6e9e7; font-size:11px; letter-spacing:.19em; }
.hero .eyebrow .tiny-line { background:#e88b89; }
.hero h1 { font-size:clamp(58px,6.4vw,100px); line-height:1.005; letter-spacing:-.062em; color:#fff; font-weight:800; margin:30px 0 28px; max-width:900px; text-wrap:balance; }
.hero h1 em { color:#e58c87; font-style:normal; }
.hero .hero-intro { color:#f0f0ed; max-width:595px; font-size:16px; line-height:1.65; }
.hero .hero-actions { margin-top:26px; gap:12px 24px; }
.hero .button-primary { background:var(--pq-red); color:#fff; padding-inline:24px; }
.hero .button-quiet { color:#fff; border-bottom:1px solid rgba(255,255,255,.85); padding:11px 3px; }
.hero .button-quiet:hover { color:#fff; border-color:#e58c87; }
.hero .hero-bottom { margin-top:auto; padding-top:51px; gap:42px; }
.hero .hero-bottom strong { color:#fff; }
.hero .hero-bottom small { color:#d5d9d8; }
.pq-featured-work { background:#11191d; padding:7px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.pq-featured-work a { min-width:0; display:block; position:relative; aspect-ratio:2.55; overflow:hidden; background:#172126; }
.pq-featured-work img { width:100%;height:100%;object-fit:cover; filter:saturate(.80) brightness(.86); transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .45s ease; }
.pq-featured-work a:hover img { transform:scale(1.045); filter:saturate(.95) brightness(1); }
.pq-featured-work a:focus-visible { outline:3px solid white;outline-offset:-4px; }
.pq-featured-work span { position:absolute;bottom:14px;left:18px;color:white;font-size:11px;letter-spacing:.12em;font-weight:800;text-shadow:0 2px 8px #000; }
.ticker { background:#222b30; }
.ticker-inner { min-height:55px; }
.section { padding-block:clamp(70px,7vw,105px); }
.section h2 { font-size:clamp(36px,4.1vw,59px); letter-spacing:-.05em; }
.services-section { background:var(--pq-cream); }
.services-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.services-section .service-card { min-width:0; min-height:285px; padding:29px 24px 23px; border-color:#e4e2dd; transition:transform .24s ease,box-shadow .24s ease; }
.services-section .service-card:hover { transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.06); }
.services-section .service-icon { width:48px;height:48px;font-size:28px;margin:18px 0 15px; }
.services-section .service-card h3 { font-size:18px; }
.services-section .service-card p { font-size:13px; }
.tech-capabilities { background:#fff; }
.tech-capabilities .tech-card { transition:transform .25s ease; }
.tech-capabilities .tech-card:hover { transform:translateY(-3px); }
.client-strip { background:#fff; }
.projects-section { background:#1a2428 !important; color:#f7f6f2 !important; }
.projects-section h2, .projects-section .section-heading h2 { color:#fff; }
.projects-section .section-heading>p { color:#ccd2d2; }
.projects-section .project-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.projects-section .project-card { min-width:0;background:#253034;color:#f8f7f5;border:1px solid rgba(255,255,255,.08); }
.projects-section .project-image { height:clamp(210px,19vw,330px); }
.projects-section .project-image img { filter:saturate(.84);transition:transform .55s ease,filter .55s ease; }
.projects-section .project-card:hover .project-image img { transform:scale(1.045);filter:saturate(1.01); }
.projects-section .project-caption { padding:19px 20px;align-items:flex-start; }
.projects-section .project-caption h3 { color:#fff; }
.projects-section .project-caption span, .projects-section .project-location { color:#d1d7d7; }
.projects-section .project-caption .project-tag { color:#e8aaa8; }
.projects-section .portfolio-footer { color:#cbd4d3; }
.projects-section .text-link { color:#fff; }
.products-section { background:var(--pq-cream); }
.products-section .product-card { border-color:#dedbd6; }
.products-section .product-card .product-mark { background:#e6e2dc; }
.products-section .filter.active { background:#212c31; }
.about-section { background:#fff; }
.callout-band { background:#212b30; }
.contact-section { background:#f8f7f4; }
.contact-section .form-panel, .contact-section form { scroll-margin-top:100px; }
.footer { background:#192126; }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #d4565a;outline-offset:3px; }
.products-section .filter { min-height:44px; }
.pq-swipe-guide { display:none; }
.pq-quote-mobile { display:none; }
/* Never hide substantive content for animation; the cinematic entrance is hero-only. */
@keyframes pq-hero-enter { from { opacity:.7;transform:translateY(10px) } to {opacity:1;transform:translateY(0)} }
.hero .hero-copy { animation:pq-hero-enter .65s ease both; }
.hero h1 em { font-weight:790; }
@media(max-width:1150px) {
  .services-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .hero h1 {font-size:clamp(51px,6.5vw,79px);}
  .hero .hero-grid {min-height:640px;}
  .hero .hero-copy {min-height:630px;width:min(800px,98%);}
  .projects-section .project-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:810px) {
  .site-header .main-nav { background:#fff;color:#192126; }
  .hero {min-height:580px;}
  .hero .hero-grid {min-height:580px;}
  .hero .hero-copy {min-height:570px;padding-block:60px 45px;width:100%;}
  .hero::before {background-position:57% center;background-image:linear-gradient(90deg,rgba(7,16,22,.91),rgba(9,18,25,.58) 70%,rgba(9,18,25,.35)),url("assets/projects/energy_city_asphalt.webp");}
  .hero h1 {font-size:clamp(43px,7.2vw,66px);}
  .pq-featured-work a {aspect-ratio:1.7;}
  .section {padding-block:64px;}
}
@media(max-width:590px) {
  .utility-bar {display:none;}
  .site-header .header-inner {height:68px;min-height:68px;}
  .hero {min-height:620px;}
  .hero .hero-grid {min-height:620px;}
  .hero .hero-copy {min-height:605px;padding:69px 0 36px;}
  .hero h1 {font-size:clamp(43px,11vw,52px);line-height:1.06;margin:23px 0 20px;letter-spacing:-.059em;text-wrap:initial;}
  .hero .eyebrow {font-size:10px;line-height:1.5;}
  .hero .hero-intro {font-size:14px;line-height:1.65;max-width:340px;}
  .hero .hero-actions {gap:9px 12px;margin-top:20px;}
  .hero .button {min-height:44px;font-size:12px;padding:12px 15px;gap:15px;}
  .hero .button-quiet {padding:8px 1px;}
  .hero .hero-bottom {gap:19px;padding-top:25px;}
  .hero .hero-bottom strong {font-size:18px;}
  .hero .hero-bottom small {font-size:8px;letter-spacing:.02em;}
  .pq-featured-work {gap:4px;padding:4px;}
  .pq-featured-work a {aspect-ratio:.95;}
  .pq-featured-work span {font-size:9px;left:7px;bottom:7px;letter-spacing:0;}
  .ticker {overflow:hidden;}
  .ticker-inner {gap:12px;min-height:52px;flex-wrap:wrap;justify-content:center;}
  .ticker-inner span {font-size:9px;}
  .ticker-inner b {font-size:14px;}
  .services-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  .services-section .service-card {min-height:0;padding:18px 13px 16px;}
  .services-section .service-card h3 {font-size:15px;line-height:1.3;}
  .services-section .service-card p {font-size:12px;line-height:1.5;}
  .services-section .service-card .service-icon {width:38px;height:38px;font-size:24px;margin:12px 0;}
  .services-section .service-card .arrow-link {font-size:11px;padding-top:12px;}
  .section {padding-block:53px;}
  .section h2 {font-size:clamp(33px,8.5vw,43px);}
  .projects-section .project-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .projects-section .project-image {height:145px;}
  .projects-section .project-caption {display:block;padding:12px 12px 16px;}
  .projects-section .project-caption h3 {font-size:14px;}
  .projects-section .project-caption span {font-size:9px;}
  .projects-section .project-caption .project-tag {display:block;margin-top:7px;white-space:normal;}
  .products-section .product-grid {display:grid;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(278px,84vw);overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scroll-padding-inline:4px;gap:12px;padding:2px 0 15px;-webkit-overflow-scrolling:touch;}
  .products-section .product-card {scroll-snap-align:start;min-width:0;}
  .products-section .product-card.is-hidden {display:none;}
  .pq-swipe-guide {display:block;font-size:12px;line-height:1.5;color:#596267;margin:7px 0 10px;}
  .products-section .product-mark {padding:24px 20px;}
  .products-section .product-body {padding:17px 18px;}
  .products-section .catalog-controls {gap:6px;margin-bottom:8px;}
  .products-section .filter {padding:9px 11px;font-size:11px;}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .pq-enter {opacity:1!important;transform:none!important;}
  .hero::before {transform:none;}
}