/* HR Website Design - site styles
   Mirrors the original MyWebsite NOW theme: navy #004177, gold #E5B249,
   Merriweather headings, Barlow navigation, Arial body text. */

:root{
  --hr-navy:#004177;
  --hr-navy-deep:#012B4F;
  --hr-gold:#E5B249;
  --hr-gold-text:#eab64b;      /* body text on navy */
  --hr-gold-head:#ffad49;      /* headings on navy */
  --hr-brown:#4c3912;          /* text on gold */
  --hr-link:#003d71;           /* nav + button text */
  --hr-heading:'Merriweather',Georgia,'Times New Roman',serif;
  --hr-nav:'Barlow','Arial',sans-serif;
  --hr-body:Arial,'Helvetica Neue',Helvetica,sans-serif;
  --hr-wrap:912px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--hr-body);font-size:16px;line-height:normal;color:var(--hr-brown);background:var(--hr-navy);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--hr-heading);font-weight:400;line-height:normal;margin:0 0 .7em;overflow-wrap:break-word}
h1{font-size:40px}h2{font-size:33px}h3{font-size:28px}h4{font-size:23px}
p{margin:0 0 1em}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--hr-navy);padding:10px 16px;z-index:200}
.skip:focus{left:12px;top:12px}
.container{max-width:var(--hr-wrap);margin:0 auto;padding:0 20px;box-sizing:content-box}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- bands ---------- */
.band{position:relative}
.band--gold{background:var(--hr-gold);color:var(--hr-brown)}
.band--gold h1,.band--gold h2,.band--gold h3,.band--gold h4{color:var(--hr-brown)}
.band--navy{background:var(--hr-navy);color:var(--hr-gold-text)}
.band--navy h1,.band--navy h2,.band--navy h3,.band--navy h4{color:var(--hr-gold-head)}
.band--img{background-size:cover;background-position:center;background-repeat:no-repeat}
.center{text-align:center}

/* coded sections (original paste blocks) */
.coded{padding:32px 0}
.coded>.coded-inner{max-width:960px;margin:0 auto;padding:0 20px;box-sizing:content-box}

/* ---------- header ---------- */
.site-header{background:var(--hr-gold);position:relative;z-index:50}
.hdr{display:flex;align-items:flex-start;gap:24px;padding-top:15px;padding-bottom:10px}
.logo{flex:0 0 auto;display:block}
.logo img{width:139px;height:139px}
.site-nav{flex:1;display:flex;justify-content:center;padding-top:51px}
.site-nav>ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.site-nav li{position:relative}
.site-nav a,.site-nav .sub-toggle{font-family:var(--hr-nav);font-size:14px;color:var(--hr-link);text-decoration:none;display:inline-flex;align-items:center;padding:8px 10px;border-bottom:2px solid transparent;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;line-height:normal}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--hr-brown)}
.site-nav a[aria-current="page"],.site-nav li.is-current>a{color:var(--hr-brown);border-bottom-color:var(--hr-brown)}
.has-sub{display:flex;align-items:center}
.has-sub>a{padding-right:2px}
.sub-toggle{padding:8px 6px 8px 2px!important}
.sub-toggle svg{width:11px;height:11px;transition:transform .15s}
.site-nav .sub{list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;left:0;min-width:240px;background:var(--hr-gold);box-shadow:0 10px 24px rgba(1,43,79,.22);border-top:2px solid var(--hr-brown);display:none;z-index:60}
.site-nav .sub a{display:block;padding:10px 16px;border:0;white-space:nowrap}
.site-nav .sub a:hover{background:rgba(255,255,255,.25)}
@media (hover:hover) and (min-width:1001px){.has-sub:hover>.sub{display:block}}
.has-sub:focus-within>.sub,.has-sub.open>.sub{display:block}
.has-sub.open .sub-toggle svg{transform:rotate(180deg)}
.nav-toggle{display:none;margin-left:auto;margin-top:46px;background:none;border:0;color:var(--hr-link);padding:10px;cursor:pointer}
.nav-toggle svg{width:28px;height:28px;display:block}
.hdr-social{display:flex;justify-content:center;gap:16px;padding:30px 0 23px}

/* social icons */
.social{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.social a{display:inline-flex;line-height:0;color:var(--hr-brown)}
.social a:hover{opacity:.8}
.social--square a svg{width:36px;height:36px}
.social--circle a svg{width:48px;height:48px}
.social--small a svg{width:24px;height:24px}
.social--gold a{color:var(--hr-gold-text)}
.social-band{padding:56px 0}
.social-band .social{justify-content:center}

/* ---------- footer ---------- */
.site-footer{background:var(--hr-navy);color:var(--hr-gold-text)}
.ftr{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:20px;padding-top:32px;padding-bottom:32px}
.ftr nav{grid-column:2;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ftr nav a{color:var(--hr-gold-text);text-decoration:none;padding:8px 10px;border-bottom:2px solid transparent}
.ftr nav a:hover{border-bottom-color:var(--hr-gold-text)}
.ftr nav a[aria-current="page"]{border-bottom-color:var(--hr-gold-text)}
.ftr .copy{grid-column:3;justify-self:end;max-width:139px;margin:16px 0 0}

/* ---------- buttons ---------- */
.hb-btn{display:inline-block;background:var(--hr-gold);color:var(--hr-link);border:1px solid var(--hr-gold);border-radius:8px;padding:8px;font-family:var(--hr-body);font-size:16px;text-decoration:none;line-height:normal;cursor:pointer}
.hb-btn:hover{background:#edc56f}
.hb-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.band--gold .hb-btn:focus-visible{outline-color:var(--hr-navy)}

/* ---------- heroes ---------- */
.hb-hero{min-height:720px;display:flex;align-items:center;justify-content:center;text-align:center;padding:80px 0}
.hb-hero h1{margin:0}
.hb-hero--top{min-height:700px;align-items:flex-start;padding-top:126px}
.hb-hero .hb-lede{max-width:760px;margin:26px auto 0;color:var(--hr-gold-text)}

/* ---------- generic layouts ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px;align-items:start}
.pad-xl{padding:80px 0}
.pad-l{padding:72px 0}
.pad-m{padding:56px 0}

/* home: vision */
.vision{padding:80px 0}
.vision .split{grid-template-columns:371px 1fr;gap:93px;align-items:center}
.vision .text{padding-top:56px}
.vision img{width:448px;height:448px;object-fit:cover}

/* home: why choose */
.hb-why{padding:83px 24px 72px}
.hb-why .intro{margin-bottom:46px}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1232px;margin:0 auto}
.why-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:28px}
.why-grid h2{text-align:center;margin-bottom:.9em}
.why-grid p{text-align:center}

/* home: featured clients */
.featured{padding:52px 0 56px}
.featured .container{max-width:879px}
.featured h2.featured-title{font-size:40px;color:var(--hr-gold-head);font-weight:700;text-decoration:underline;text-underline-offset:4px;margin:0 0 6px}
.featured-grid{display:grid;grid-template-columns:repeat(2,minmax(0,393px));gap:30px 93px;margin-bottom:40px}
.featured-grid>*:first-child{grid-column:1}

/* home: CTA + hours */
.hb-cta{padding:76px 0 64px}
.hb-cta h3{margin-bottom:28px}
.hb-cta p{margin-bottom:24px}
.hours{padding:24px 0 48px}
.hours .social{margin:0 0 36px 8px}
.hours h2{margin-bottom:28px}
.hours dl{display:grid;grid-template-columns:auto auto;justify-content:start;column-gap:34px;row-gap:10px;margin:28px 0 0}
.hours dt,.hours dd{margin:0}
.hours dd{text-align:right}

/* contact blocks */
.contact-lines p{margin:0 0 16px}
.contact-band{padding:80px 0 72px}

/* ---------- forms ---------- */
.cform{padding:16px 8px 0}
.cform .field{margin-bottom:24px}
.cform label{display:block;margin-bottom:8px}
.cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform textarea{width:100%;font:inherit;color:var(--hr-brown);background:transparent;border:2px solid var(--hr-brown);border-radius:8px;padding:12px 16px}
.cform textarea{height:208px;resize:vertical}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--hr-navy);outline-offset:1px}
.cform .consent{display:flex;gap:8px;align-items:flex-start;margin:44px 0 30px}
.cform .consent input{appearance:none;-webkit-appearance:none;flex:0 0 20px;width:20px;height:20px;border:2px solid var(--hr-brown);border-radius:4px;margin:2px 0 0;display:grid;place-content:center;cursor:pointer;background:transparent}
.cform .consent input::after{content:"";width:10px;height:10px;transform:scale(0);background:var(--hr-brown);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
.cform .consent input:checked::after{transform:scale(1)}
.cform .consent label{margin:0}
.cform .req-note{margin:0 0 22px}
.cform button[type=submit]{display:block;width:100%;font:inherit;color:var(--hr-link);background:transparent;border:2px solid transparent;border-radius:4px;padding:8px 16px;cursor:pointer}
.cform button[type=submit]:hover{background:rgba(255,255,255,.2)}
.cform button[type=submit][disabled]{opacity:.6;cursor:wait}
.cform .hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.form-msg{margin-top:16px;padding:12px 16px;border-radius:6px;display:none}
.form-msg.ok{display:block;background:rgba(255,255,255,.35)}
.form-msg.err{display:block;background:#fbe3e0;color:#7a1b12}
.cform .error-text{color:#7a1b12;font-size:14px;margin-top:6px;display:none}
.cform .field.invalid .error-text{display:block}
.cform .field.invalid input,.cform .field.invalid textarea{border-color:#a3271a}
.cform--square input[type=text],.cform--square input[type=email],.cform--square input[type=tel],.cform--square textarea{border-radius:0}
.cform--square button[type=submit]{background:var(--hr-gold);border-radius:0}

/* services contact band */
.getintouch{padding:59px 0 40px}
.getintouch .split{grid-template-columns:400px 384px;gap:72px;justify-content:center}
.getintouch .social{margin-top:16px;gap:16px;padding-left:8px}

/* about */
.about-main{padding:80px 0 72px}
.about-main .split{gap:16px}
.about-main .photo{width:448px;max-width:100%;margin-top:32px}
.about-main .logo-sq{width:448px;max-width:100%;margin-top:-28px}
.about-main .hb-btn{margin-top:40px}
.about-cta{padding:76px 0 56px}
.about-cta h2{margin-bottom:28px}
.about-cta h3{margin-bottom:28px}

/* legal / privacy */
.details{padding:68px 0 56px;text-align:center}
.details p{margin:0 0 16px}
.details .gap{height:18px}
.doc-links{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-start;margin-top:40px;text-align:left}
.doc-links .hb-btn{width:216px}
.policy{padding:72px 0 56px}
.policy .policy-body{padding:0 10px}
.policy .policy-body p{margin:0 0 16px}
.policy .hb-btn{margin-top:20px}

/* ---------- booking ---------- */
.booking{padding:16px 0 38px;font-family:'Quattrocento',Georgia,serif}
.bk{display:grid;grid-template-columns:220px 1fr;gap:32px;max-width:832px;margin:0 auto;align-items:start}
.bk-steps{background:#fff;border-radius:8px;box-shadow:0 4px 28px rgba(0,0,0,.15);padding:20px;list-style:none;margin:0}
.bk-steps li{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:14px;color:#060605}
.bk-steps .ic{width:32px;height:32px;border-radius:8px;border:1px solid #060605;display:grid;place-items:center;flex:0 0 32px}
.bk-steps .ic svg{width:16px;height:16px}
.bk-steps li.active{color:var(--hr-navy)}
.bk-steps li.active .ic{background:var(--hr-navy);border-color:var(--hr-navy);color:#fff}
.bk-steps li.done .ic{background:#e7eef5;border-color:var(--hr-navy);color:var(--hr-navy)}
.bk-panel{background:#fff;border-radius:8px;color:#040404;display:flex;flex-direction:column;min-height:420px}
.bk-body{padding:24px 24px 16px}
.bk-panel h3{font-family:'Quattrocento',Georgia,serif;font-weight:700;color:var(--hr-navy);font-size:18px;margin:16px 0 14px}
.bk-svc{display:flex;gap:20px;align-items:center;width:100%;text-align:left;background:#fff;border:1px solid #040404;border-radius:8px;padding:20px;margin-bottom:24px;cursor:pointer;font:inherit;color:inherit}
.bk-svc img{width:56px;height:56px;border-radius:50%;flex:0 0 56px}
.bk-svc .nm{font-size:18px;display:block;margin-bottom:8px}
.bk-svc .du{font-size:16px}
.bk-svc[aria-pressed="true"]{border:2px solid var(--hr-navy);box-shadow:0 0 0 3px rgba(0,65,119,.15);padding:19px}
.bk-foot{border-top:1px solid #040404;padding:16px 28px;display:flex;justify-content:space-between;gap:12px;margin-top:auto}
.bk-btn{font-family:'Quattrocento',Georgia,serif;font-size:14px;font-weight:500;border-radius:6px;padding:10px 20px;cursor:pointer;border:1px solid var(--hr-navy);display:inline-flex;align-items:center;gap:8px}
.bk-next{background:var(--hr-navy);color:#fff;margin-left:auto}
.bk-next b{font-weight:700}
.bk-next[disabled]{opacity:.45;cursor:not-allowed}
.bk-back{background:#fff;color:var(--hr-navy)}
.bk-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.bk-cal .dow{font-size:12px;color:#5a6b7c;padding:4px 0}
.bk-cal button{font:inherit;font-size:15px;border:1px solid #d6dde4;background:#fff;border-radius:6px;padding:9px 0;cursor:pointer;color:#040404}
.bk-cal button[disabled]{color:#b7bec5;background:#f6f7f8;border-color:#eef0f2;cursor:not-allowed}
.bk-cal button[aria-pressed="true"]{background:var(--hr-navy);color:#fff;border-color:var(--hr-navy)}
.bk-month{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.bk-month button{background:none;border:1px solid #d6dde4;border-radius:6px;width:34px;height:34px;cursor:pointer;font-size:18px;color:var(--hr-navy)}
.bk-month button[disabled]{opacity:.35;cursor:not-allowed}
.bk-month strong{font-size:17px;color:var(--hr-navy)}
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:8px}
.bk-slots button{font:inherit;font-size:15px;border:1px solid var(--hr-navy);background:#fff;color:var(--hr-navy);border-radius:6px;padding:9px 0;cursor:pointer}
.bk-slots button[aria-pressed="true"]{background:var(--hr-navy);color:#fff}
.bk-note{font-size:14px;color:#5a6b7c;margin:10px 0 0}
.bk-form .field{margin-bottom:16px}
.bk-form label{display:block;font-size:15px;margin-bottom:6px}
.bk-form input,.bk-form textarea{width:100%;font-family:var(--hr-body);font-size:16px;border:1px solid #9aa6b2;border-radius:6px;padding:10px 12px;color:#040404}
.bk-form textarea{height:96px;resize:vertical}
.bk-form .consent{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.bk-form .consent input{width:18px;height:18px;flex:0 0 18px;margin-top:2px}
.bk-sum dl{display:grid;grid-template-columns:130px 1fr;gap:10px 16px;margin:0}
.bk-sum dt{color:#5a6b7c}
.bk-sum dd{margin:0}
.bk-done{text-align:center;padding:40px 20px}
.bk-done svg{width:56px;height:56px;color:var(--hr-navy);margin:0 auto 14px;display:block}
.bk-err{background:#fbe3e0;color:#7a1b12;border-radius:6px;padding:10px 12px;margin-top:12px;font-size:15px;display:none}
.bk-err.show{display:block}

/* ---------- cookie consent ---------- */
.cookie-fab{position:fixed;left:32px;bottom:32px;z-index:90;width:56px;height:56px;border-radius:50%;background:#0b1c2c;color:#fff;border:0;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.cookie-fab svg{width:22px;height:22px}
.cc{position:fixed;inset:auto 0 0 0;z-index:100;background:#fff;color:#12212F;box-shadow:0 -6px 30px rgba(0,0,0,.25);padding:22px 0;font-family:var(--hr-body);font-size:15px;line-height:1.5}
.cc[hidden]{display:none}
.cc .container{max-width:1060px}
.cc h2{font-family:var(--hr-heading);font-size:20px;color:var(--hr-navy);margin:0 0 8px}
.cc p{margin:0 0 14px}
.cc a{color:var(--hr-navy)}
.cc-actions{display:flex;flex-wrap:wrap;gap:10px}
.cc-actions button{font:inherit;font-size:15px;border-radius:6px;padding:10px 18px;cursor:pointer;border:2px solid var(--hr-navy)}
.cc-accept{background:var(--hr-navy);color:#fff}
.cc-reject,.cc-custom,.cc-save{background:#fff;color:var(--hr-navy)}
.cc-prefs{margin:6px 0 16px;display:grid;gap:10px}
.cc-prefs[hidden]{display:none}
.cc-prefs label{display:flex;gap:10px;align-items:flex-start}
.cc-prefs input{width:18px;height:18px;margin-top:2px;flex:0 0 18px}
.cc-prefs small{display:block;color:#5a6b7c}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .vision .split{grid-template-columns:1fr 1fr;gap:40px}
  .vision img{width:100%;height:auto;aspect-ratio:1/1}
  .getintouch .split{grid-template-columns:1fr 1fr;gap:40px}
  .nav-toggle{display:block}
  .hdr{align-items:center}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--hr-gold);padding:8px 20px 20px;border-top:1px solid rgba(76,57,18,.25);box-shadow:0 12px 24px rgba(1,43,79,.2)}
  .site-nav.open{display:block}
  .site-nav>ul{flex-direction:column;gap:0;align-items:stretch}
  .site-nav>ul>li{border-bottom:1px solid rgba(76,57,18,.18)}
  .site-nav a{font-size:17px;padding:14px 4px}
  .has-sub{flex-wrap:wrap;justify-content:space-between}
  .sub-toggle{padding:14px 10px!important}
  .sub-toggle svg{width:14px;height:14px}
  .site-nav .sub{position:static;box-shadow:none;border-top:0;width:100%;padding:0 0 8px 14px;background:transparent;min-width:0}
  .has-sub:focus-within>.sub{display:none}
  .has-sub.open>.sub{display:block}
  .site-nav .sub a{font-size:16px;padding:10px 4px;white-space:normal}
}
@media (max-width:767px){
  h1{font-size:35px}h2{font-size:28.9px}h3{font-size:24.5px}h4{font-size:20.1px}
  .container{padding:0 20px}
  .logo img{width:116px;height:116px}
  .hdr{padding-top:12px}
  .nav-toggle{margin-top:0}
  .hdr-social{padding:24px 0 22px}
  .hb-hero,.hb-hero--top{min-height:520px;padding:64px 0;align-items:center}
  .split,.vision .split,.getintouch .split{grid-template-columns:1fr;gap:28px}
  .vision{padding:48px 0}
  .vision .text{padding-top:0}
  .hb-why{padding:56px 20px}
  .why-grid{grid-template-columns:1fr;gap:28px}
  .featured-grid{grid-template-columns:1fr;gap:24px}
  .featured h2.featured-title{font-size:30px}
  .about-main .logo-sq{margin-top:0}
  .ftr{grid-template-columns:1fr;justify-items:center;text-align:center}
  .ftr nav,.ftr .copy{grid-column:1;justify-self:center}
  .ftr .copy{max-width:none;margin:4px 0 0}
  .doc-links{justify-content:center}
  .bk{grid-template-columns:1fr;gap:16px}
  .bk-steps{display:flex;justify-content:space-between;padding:12px}
  .bk-steps li{flex-direction:column;gap:6px;font-size:12px;text-align:center;padding:0}
  .bk-body{padding:18px 16px 8px}
  .bk-foot{padding:14px 16px}
  .bk-sum dl{grid-template-columns:1fr}
  .bk-sum dt{margin-top:6px}
  .cookie-fab{left:16px;bottom:16px;width:48px;height:48px}
  .cform{padding:16px 0 0}
}

/* The original builder theme set Merriweather (weight from the block, normal
   spacing) on headings inside the pasted blocks. Same specificity as the theme
   rule, so block rules with more specific selectors still win, as they did live. */
.coded div :is(h1,h2,h3),.featured-grid div :is(h1,h2,h3){font-family:var(--hr-heading);line-height:normal;letter-spacing:normal;font-weight:400}
.featured-grid a{color:var(--hr-gold-head)}

/* featured clients: three across on wide screens */
@media (min-width:1001px){
  .featured .container{max-width:1000px}
  .featured-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
}
@media (min-width:768px) and (max-width:1000px){
  .featured-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
.contact-band{padding:108px 0 72px}

/* the original theme used fixed (parallax) section backgrounds on desktop */
@media (min-width:1025px) and (hover:hover){.band--img{background-attachment:fixed}}
.bk-panel h3:focus{outline:none}
.coded.pad-reviews{padding:104px 0 80px}
@media (max-width:767px){
  .coded.pad-reviews{padding:56px 0 48px}
  .contact-band{padding:64px 0 48px}
  .featured{padding:48px 0}
}
.bk-foot[hidden]{display:none}
.coded.coded-full{padding:0}