/*
Theme Name: Raaz Hydraulic Works
Theme URI: https://raazhydraulicworks.com
Author: A3 Digital Services
Author URI: https://a3digitalservices.com
Description: Custom theme for Raaz Hydraulic Works — HDD & construction machinery hydraulic repair, parts and international overhaul.
Version: 1.1.0
Text Domain: raaz
*/

:root{
  --graphite:#14181B; --panel:#20262B; --panel-2:#262E34; --paper:#EAE5D9;
  --paper-dim:#B9B4A6; --line:#38424A; --amber:#C96A22; --amber-bright:#E08A3E;
  --steel:#7FA0B8; --steel-dim:#3E5566; --ink:#14181B;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--graphite); color:var(--paper); font-family:'IBM Plex Sans', Arial, sans-serif; font-size:16px; line-height:1.6; overflow-x:hidden;}
h1,h2,h3,h4{font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:700; letter-spacing:0.2px; line-height:1.08; color:var(--paper);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block; object-fit:cover;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
section{position:relative;}

header.site-header{position:sticky; top:0; z-index:50; background:rgba(20,24,27,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 28px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand .mark{width:34px; height:34px; flex:none;}
.brand .word{font-family:'Barlow Condensed'; font-weight:700; font-size:20px; letter-spacing:0.5px; white-space:nowrap;}
.brand .word span{color:var(--amber);}
.brand .sub{font-size:10.5px; color:var(--paper-dim); letter-spacing:1.2px; margin-top:1px;}
nav.links{display:flex; gap:26px; font-size:14px;}
nav.links a{color:var(--paper-dim); border-bottom:1px solid transparent; padding-bottom:3px; transition:color .15s,border-color .15s;}
nav.links a:hover{color:var(--paper); border-color:var(--amber);}
.nav-cta{display:flex; align-items:center; gap:8px; background:var(--amber); color:#14181B; font-weight:600; font-size:14px; padding:9px 16px; border-radius:2px; white-space:nowrap; flex:none;}
.nav-cta:hover{background:var(--amber-bright);}
.nav-cta svg{flex:none;}

.foot-logo{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.foot-logo .mark{width:28px; height:28px; flex:none;}

.hero{padding:64px 0 60px; background:radial-gradient(ellipse 900px 500px at 82% 8%, rgba(201,106,34,0.10), transparent 60%), var(--graphite); border-bottom:1px solid var(--line);}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;}
.eyebrow-line{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.eyebrow-line .dash{width:26px; height:2px; background:var(--amber);}
.eyebrow-line span{font-size:13px; color:var(--steel); letter-spacing:0.4px;}
h1.hero-h{font-size:48px; max-width:560px; margin-bottom:20px;}
h1.hero-h em{font-style:normal; color:var(--amber);}
.hero p.lead{font-size:16.5px; color:var(--paper-dim); max-width:480px; margin-bottom:26px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; font-size:14.5px; font-weight:600; border-radius:2px; border:1px solid transparent; transition:transform .12s ease,background .15s,border-color .15s;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--amber); color:#14181B;}
.btn-primary:hover{background:var(--amber-bright);}
.btn-ghost{border-color:var(--line); color:var(--paper);}
.btn-ghost:hover{border-color:var(--steel);}
.hero-brands{display:flex; gap:28px; padding-top:22px; border-top:1px solid var(--line); flex-wrap:wrap;}
.hero-brands b{font-family:'Barlow Condensed'; font-size:19px; font-weight:600;}
.hero-brands span{display:block; font-size:11.5px; color:var(--paper-dim);}

.hero-art{position:relative; border:1px solid var(--line); overflow:hidden; aspect-ratio:4/3.2;}
.hero-art img{width:100%; height:100%; object-fit:cover;}
.hero-art .cap{position:absolute; left:0; right:0; bottom:0; padding:12px 16px; background:linear-gradient(0deg, rgba(20,24,27,0.88), transparent); font-size:12px; color:var(--paper-dim);}
.corner{position:absolute; width:14px; height:14px; border:2px solid var(--amber); z-index:2;}
.corner.tl{top:8px; left:8px; border-right:none; border-bottom:none;}
.corner.tr{top:8px; right:8px; border-left:none; border-bottom:none;}
.corner.bl{bottom:8px; left:8px; border-right:none; border-top:none;}
.corner.br{bottom:8px; right:8px; border-left:none; border-top:none;}

.trust{padding:24px 0; border-bottom:1px solid var(--line); background:var(--panel);}
.trust .wrap{display:flex; align-items:center; gap:34px; flex-wrap:wrap; justify-content:space-between;}
.trust .label{font-size:12px; color:var(--paper-dim); letter-spacing:0.5px; white-space:nowrap;}
.trust .brands{display:flex; gap:30px; flex-wrap:wrap; align-items:center;}
.trust .brands b{font-family:'Barlow Condensed'; font-size:18px; font-weight:600;}
.trust .brands span{color:var(--paper-dim); font-size:12.5px;}

.section-pad{padding:80px 0;}
.section-head{max-width:620px; margin-bottom:44px;}
.section-head .tag{color:var(--amber); font-size:13px; letter-spacing:0.4px; margin-bottom:10px; display:block;}
.section-head h2{font-size:33px;}
.section-head p{color:var(--paper-dim); margin-top:12px; font-size:15px;}

.pillar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line);}
.pillar{background:var(--panel); display:flex; flex-direction:column;}
.pillar .ph{aspect-ratio:16/10; overflow:hidden; position:relative;}
.pillar .ph img{width:100%; height:100%; object-fit:cover; filter:saturate(0.9);}
.pillar .plate-no{position:absolute; top:12px; left:12px; font-size:11px; color:var(--paper); background:rgba(20,24,27,0.72); padding:3px 8px; font-family:'Barlow Condensed'; letter-spacing:1px; z-index:2;}
.pillar .body{padding:26px 24px; flex:1; display:flex; flex-direction:column;}
.pillar h3{font-size:22px; margin-bottom:9px;}
.pillar p{color:var(--paper-dim); font-size:14px; margin-bottom:16px; flex:1;}
.pillar a.more{font-size:13.5px; color:var(--steel); border-bottom:1px solid var(--steel-dim); padding-bottom:2px; align-self:flex-start;}
.pillar a.more:hover{color:var(--amber-bright); border-color:var(--amber-bright);}

.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); border:1px solid var(--line);}
.svc-card{background:var(--panel);}
.svc-card .ph{aspect-ratio:4/3; overflow:hidden;}
.svc-card .ph img{width:100%; height:100%; object-fit:cover;}
.svc-card .body{padding:20px 20px 24px;}
.svc-card h4{font-size:18px; margin-bottom:8px; font-family:'IBM Plex Sans'; font-weight:600;}
.svc-card p{font-size:13.3px; color:var(--paper-dim); margin-bottom:12px;}
.svc-card a{font-size:12.5px; color:var(--steel);}
.svc-card a:hover{color:var(--amber-bright);}

.brand-rows{display:flex; flex-direction:column; gap:2px; background:var(--line); border:1px solid var(--line);}
.brand-row{background:var(--panel); display:grid; grid-template-columns:260px 1fr; align-items:center;}
.brand-row .ph{overflow:hidden; aspect-ratio:4/3;}
.brand-row .ph img{width:100%; height:100%; object-fit:cover;}
.brand-row .body{padding:28px 30px; display:flex; flex-direction:column; justify-content:center;}
.brand-row h4{font-size:24px; margin-bottom:8px;}
.brand-row p{color:var(--paper-dim); font-size:14.5px; max-width:640px; margin-bottom:12px;}
.brand-row a{font-size:13.5px; color:var(--steel); border-bottom:1px solid var(--steel-dim); padding-bottom:2px; align-self:flex-start;}
.brand-row a:hover{color:var(--amber-bright); border-color:var(--amber-bright);}

.intl{padding:80px 0; background:var(--panel-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.intl-top{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:52px;}
.intl h2{font-size:32px; margin-bottom:14px;}
.intl p.lead{color:var(--paper-dim); font-size:15px; max-width:520px;}
.intl-photo{position:relative; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line);}
.intl-photo img{width:100%; height:100%; object-fit:cover;}
.intl-note{border-left:2px solid var(--amber); padding-left:18px; margin-top:20px;}
.intl-note b{font-family:'Barlow Condensed'; font-size:26px; color:var(--paper); font-weight:700; display:block;}
.intl-note span{font-size:12.5px; color:var(--paper-dim);}

.timeline{display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative;}
.timeline::before{content:""; position:absolute; top:17px; left:5%; right:5%; height:1px; background:var(--line);}
.tl-step{position:relative; padding-right:16px;}
.tl-num{width:34px; height:34px; border:1px solid var(--amber); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed'; font-size:15px; color:var(--amber); background:var(--panel-2); position:relative; z-index:2; margin-bottom:14px;}
.tl-step h4{font-size:15px; font-weight:600; color:var(--paper); margin-bottom:6px; font-family:'IBM Plex Sans';}
.tl-step p{font-size:12.5px; color:var(--paper-dim);}

.parts-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); border:1px solid var(--line);}
.part-card{background:var(--panel);}
.part-card .ph{aspect-ratio:4/3; overflow:hidden;}
.part-card .ph img{width:100%; height:100%; object-fit:cover;}
.part-card .body{padding:18px 18px 22px;}
.part-card h4{font-size:17px; font-weight:600; font-family:'IBM Plex Sans'; margin-bottom:5px;}
.part-card span{font-size:12px; color:var(--paper-dim);}

.area{padding:70px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.area .ph{aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line);}
.area .ph img{width:100%; height:100%; object-fit:cover;}
.area h2{font-size:30px; margin-bottom:14px;}
.area p{color:var(--paper-dim); font-size:15px; margin-bottom:10px;}
.area ul{list-style:none; margin-top:14px;}
.area li{font-size:14px; color:var(--paper-dim); padding:8px 0; border-top:1px solid var(--line);}
.area li:first-child{border-top:none;}
.area li b{color:var(--paper); font-weight:600;}

.why{padding:76px 0; border-top:1px solid var(--line);}
.why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line); border:1px solid var(--line);}
.why-item{background:var(--panel); padding:26px 26px;}
.why-item h4{font-size:18px; margin-bottom:8px; font-family:'IBM Plex Sans'; font-weight:600; color:var(--amber-bright);}
.why-item p{font-size:14px; color:var(--paper-dim);}

.faq{padding:76px 0; border-top:1px solid var(--line);}.faq-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);}
.faq-item{background:var(--panel); padding:20px 24px;}
.faq-item h4{font-size:16.5px; font-weight:600; font-family:'IBM Plex Sans'; margin-bottom:8px; color:var(--paper);}
.faq-item p{font-size:14px; color:var(--paper-dim);}

.resources{padding:76px 0; border-top:1px solid var(--line); background:var(--panel-2);}
.res-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line);}
.res-card{background:var(--panel-2); padding:26px 24px;}
.res-card .tag2{font-size:11px; color:var(--amber); letter-spacing:0.5px; margin-bottom:10px; display:block;}
.res-card h4{font-size:19px; margin-bottom:10px; line-height:1.15;}
.res-card p{font-size:13.5px; color:var(--paper-dim); margin-bottom:14px;}
.res-card a{font-size:13px; color:var(--steel);}
.res-card a:hover{color:var(--amber-bright);}

.cta{padding:64px 0; background:linear-gradient(120deg, #1B2126, #22160E); border-top:1px solid var(--line);}
.cta-grid{display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;}
.cta h2{font-size:30px; max-width:480px;}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap;}

footer.site-footer{padding:54px 0 30px; border-top:1px solid var(--line); background:var(--graphite);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px;}
.foot-brand .word{font-family:'Barlow Condensed'; font-size:20px; font-weight:700;}
.foot-brand .word span{color:var(--amber);}
.foot-brand p{color:var(--paper-dim); font-size:13.5px; margin-top:12px; max-width:280px;}
footer h5{font-size:13px; color:var(--paper); letter-spacing:0.4px; margin-bottom:14px;}
footer ul{list-style:none;}
footer li{margin-bottom:9px; font-size:13.5px;}
footer li a{color:var(--paper-dim);}
footer li a:hover{color:var(--amber-bright);}
.foot-bottom{border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; font-size:12.5px; color:var(--paper-dim); flex-wrap:wrap; gap:10px;}
.foot-bottom .credit{color:var(--amber-bright); font-weight:600; border-bottom:1px solid transparent;}
.foot-bottom .credit:hover{border-bottom-color:var(--amber-bright);}

/* ---------- CONTACT PAGE FORMS ---------- */
.quick-contact{padding:26px 0; border-bottom:1px solid var(--line); background:var(--panel);}
.quick-contact .wrap{display:flex; gap:16px; flex-wrap:wrap;}
.quick-contact .btn{flex:1; justify-content:center; min-width:220px;}

.form-banner{margin:0 0 32px; padding:16px 20px; border:1px solid var(--line); font-size:14.5px;}
.form-banner.success{border-color:#4C7A6B; color:#BFE3D6; background:rgba(76,122,107,0.12);}
.form-banner.error{border-color:var(--amber); color:var(--paper); background:rgba(201,106,34,0.10);}

.forms-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line);}
.form-card{background:var(--panel); padding:32px 30px;}
.form-card .form-tag{color:var(--amber); font-size:13px; letter-spacing:0.4px; margin-bottom:6px; display:block;}
.form-card h3{font-size:24px; margin-bottom:8px;}
.form-card > p{color:var(--paper-dim); font-size:14px; margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; color:var(--paper-dim); margin-bottom:6px; letter-spacing:0.2px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field input[type="text"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--paper);
  padding:11px 12px; font-family:'IBM Plex Sans'; font-size:14px; border-radius:2px;
}
.field textarea{resize:vertical; min-height:90px;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--steel); outline-offset:1px; border-color:var(--steel);}
.form-submit{width:100%; justify-content:center; border:none; cursor:pointer; margin-top:6px;}

.contact-info{padding:70px 0; border-top:1px solid var(--line);}
.contact-info-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line);}
.info-card{background:var(--panel); padding:26px 26px;}
.info-card h4{font-size:16px; margin-bottom:8px; font-family:'IBM Plex Sans'; font-weight:600; color:var(--amber-bright);}
.info-card p, .info-card a{font-size:14.5px; color:var(--paper-dim);}
.info-card .map-embed{margin-top:14px; border:1px solid var(--line); overflow:hidden;}
.info-card .map-embed iframe{width:100%; height:220px; border:0; display:block;}


@media (max-width:980px){
  nav.links{display:none;}
  .brand .word{font-size:17px;}
  .brand .sub{font-size:9.5px;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{order:-1;}
  .pillar-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .brand-row{grid-template-columns:1fr;}
  .brand-row .ph{aspect-ratio:16/9;}
  .intl-top{grid-template-columns:1fr;}
  .timeline{grid-template-columns:repeat(2,1fr); row-gap:24px;}
  .timeline::before{display:none;}
  .parts-grid{grid-template-columns:repeat(2,1fr);}
  .area{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .res-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  h1.hero-h{font-size:38px;}
  .forms-grid{grid-template-columns:1fr;}
  .contact-info-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .wrap{padding:0 18px;}
  .services-grid{grid-template-columns:1fr;}
  .parts-grid{grid-template-columns:1fr;}
  .timeline{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .cta-grid{flex-direction:column; align-items:flex-start;}

  /* compact mobile header so the hero isn't pushed below the fold */
  .nav{padding:10px 14px; gap:10px;}
  .brand{gap:8px;}
  .brand .mark{width:26px; height:26px;}
  .brand .word{font-size:14.5px; white-space:nowrap;}
  .brand .sub{display:none;}
  .nav-cta{padding:9px 10px;}
  .nav-cta .cta-label{display:none;}
  .hero{padding:36px 0 44px;}
  h1.hero-h{font-size:30px;}
}
:focus-visible{outline:2px solid var(--steel); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; scroll-behavior:auto !important;} }