/*
Theme Name: Hirepross
Theme URI: https://hirepross.com
Author: Hirepross
Author URI: https://hirepross.com
Description: Local services marketplace theme for Hirepross.com. Post a task, receive offers from vetted providers, hire and pay securely. Includes Customer, Provider and Admin dashboards, a full service-category directory, a multi-country engine (Canada, India, USA) and a built-in SEO/AEO/GEO content generator.
Version: 3.19.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hirepross
Tags: marketplace, directory, services, booking, custom-menu, custom-logo, translation-ready
*/

/* =========================================================
   1. TOKENS  (palette sampled from the supplied brand image)
   ========================================================= */
:root{
  --hp-blue:#2365FC;          /* primary brand blue  */
  --hp-blue-600:#1a54e0;
  --hp-blue-700:#1544bb;
  --hp-blue-50:#EEF3FF;
  --hp-blue-100:#DCE7FF;
  --hp-navy:#384179;          /* heading / nav text  */
  --hp-navy-900:#242B57;
  --hp-ink:#3B4256;
  --hp-muted:#6B7385;
  --hp-line:#E4E7F0;
  --hp-bg:#FFFFFF;
  --hp-bg-soft:#F7F8FC;
  --hp-green:#12894F;
  --hp-green-50:#E7F6EE;
  --hp-amber:#B7791F;
  --hp-amber-50:#FDF6E3;
  --hp-red:#C93636;
  --hp-red-50:#FDECEC;
  --hp-star:#FFB400;

  /* From the logo mark: the deep navy of the H bubble and the cyan of the P. */
  --hp-brand-navy:#141A5E;
  --hp-brand-cyan:#16C6E8;
  --hp-brand-cyan-50:#E4F9FD;
  --hp-ink-900:#101426;

  /* Photo overlays. A single scrim token keeps text legible on any image. */
  --hp-scrim:linear-gradient(180deg,rgba(16,20,38,.15) 0%,rgba(16,20,38,.62) 62%,rgba(16,20,38,.82) 100%);
  --hp-scrim-soft:linear-gradient(180deg,rgba(16,20,38,0) 40%,rgba(16,20,38,.72) 100%);

  --hp-r:10px;
  --hp-r-lg:16px;
  --hp-r-pill:999px;
  --hp-shadow:0 1px 2px rgba(24,31,56,.05),0 4px 16px rgba(24,31,56,.06);
  --hp-shadow-lg:0 16px 40px rgba(24,31,56,.14);
  --hp-max:1200px;
  --hp-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* =========================================================
   2. BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--hp-font);font-size:16px;line-height:1.6;
  color:var(--hp-ink);background:var(--hp-bg);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--hp-blue);text-decoration:none}
a:hover{color:var(--hp-blue-600)}
h1,h2,h3,h4,h5{font-weight:800;line-height:1.18;color:var(--hp-navy);margin:0 0 .55em;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.6rem,2.9vw,2.35rem)}
h3{font-size:1.22rem}
h4{font-size:1.02rem}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
hr{border:0;border-top:1px solid var(--hp-line);margin:32px 0}
table{border-collapse:collapse;width:100%}
.hp-container{max-width:var(--hp-max);margin:0 auto;padding:0 20px}
.hp-narrow{max-width:820px;margin:0 auto;padding:0 20px}
.hp-sec{padding:64px 0}
.hp-sec--sm{padding:40px 0}
.hp-soft{background:var(--hp-bg-soft)}
.hp-center{text-align:center}
.hp-muted{color:var(--hp-muted)}
.hp-sm{font-size:.875rem}
.hp-xs{font-size:.78rem}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.hp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:28px}
.hp-head h2{margin:0}
.hp-head p{margin:8px 0 0;color:var(--hp-muted)}

/* =========================================================
   3. BUTTONS / PILLS / BADGES
   ========================================================= */
.hp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--hp-r-pill);border:2px solid transparent;
  font-weight:700;font-size:.97rem;line-height:1;cursor:pointer;text-align:center;
  background:var(--hp-blue);color:#fff;transition:.15s ease;font-family:inherit;
}
.hp-btn:hover{background:var(--hp-blue-600);color:#fff}
.hp-btn:active{transform:translateY(1px)}
.hp-btn--outline{background:#fff;border-color:var(--hp-blue);color:var(--hp-blue)}
.hp-btn--outline:hover{background:var(--hp-blue-50);color:var(--hp-blue)}
.hp-btn--navy{background:var(--hp-navy)}
.hp-btn--navy:hover{background:var(--hp-navy-900)}
.hp-btn--white{background:#fff;color:var(--hp-blue)}
.hp-btn--white:hover{background:var(--hp-blue-50);color:var(--hp-blue)}
.hp-btn--ghost{background:transparent;border-color:var(--hp-line);color:var(--hp-navy)}
.hp-btn--ghost:hover{background:var(--hp-bg-soft);color:var(--hp-navy)}
.hp-btn--danger{background:var(--hp-red)}
.hp-btn--sm{padding:9px 18px;font-size:.85rem}
.hp-btn--lg{padding:17px 36px;font-size:1.05rem}
.hp-btn--block{display:flex;width:100%}
.hp-btn[disabled],.hp-btn.is-disabled{opacity:.5;pointer-events:none}

.hp-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--hp-r-pill);font-size:.74rem;font-weight:700;background:var(--hp-blue-50);color:var(--hp-blue);white-space:nowrap}
.hp-badge--green{background:var(--hp-green-50);color:var(--hp-green)}
.hp-badge--amber{background:var(--hp-amber-50);color:var(--hp-amber)}
.hp-badge--red{background:var(--hp-red-50);color:var(--hp-red)}
.hp-badge--grey{background:#EFF1F6;color:var(--hp-muted)}
.hp-badge--navy{background:#E9EBF6;color:var(--hp-navy)}

.hp-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border:1px solid var(--hp-line);border-radius:var(--hp-r-pill);background:#fff;color:var(--hp-navy);font-weight:600;font-size:.87rem;white-space:nowrap}
.hp-chip:hover{border-color:var(--hp-blue);background:var(--hp-blue-50);color:var(--hp-blue)}
.hp-chip.is-active{background:var(--hp-blue);border-color:var(--hp-blue);color:#fff}

/* =========================================================
   4. FORMS
   ========================================================= */
.hp-field{margin-bottom:20px}
.hp-field > label{display:block;font-weight:700;font-size:.9rem;margin-bottom:7px;color:var(--hp-navy)}
.hp-hint{font-size:.8rem;color:var(--hp-muted);margin-top:6px}
input[type=text],input[type=email],input[type=url],input[type=password],input[type=search],
input[type=number],input[type=tel],input[type=date],input[type=time],input[type=file],select,textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--hp-line);border-radius:var(--hp-r);
  font-family:inherit;font-size:.96rem;color:var(--hp-ink);background:#fff;transition:.15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--hp-blue);box-shadow:0 0 0 4px rgba(35,101,252,.13)}
textarea{min-height:140px;resize:vertical}
.hp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.hp-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
.hp-card-form{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:30px;box-shadow:var(--hp-shadow)}
.hp-radio-cards{display:grid;gap:10px}
.hp-radio-card{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1.5px solid var(--hp-line);border-radius:var(--hp-r);cursor:pointer;transition:.15s}
.hp-radio-card:hover{border-color:var(--hp-blue)}
.hp-radio-card input{margin-top:3px;width:auto}
.hp-radio-card b{display:block;color:var(--hp-navy)}
.hp-radio-card span{font-size:.85rem;color:var(--hp-muted)}
.hp-radio-card.is-on{border-color:var(--hp-blue);background:var(--hp-blue-50)}
.hp-check{display:flex;gap:9px;align-items:flex-start;font-weight:500;font-size:.92rem}
.hp-check input{width:auto;margin-top:4px}

.hp-notice{padding:14px 17px;border-radius:var(--hp-r);margin-bottom:22px;font-size:.93rem;border:1px solid}
.hp-notice--ok{background:var(--hp-green-50);border-color:#BCE3CC;color:#0e6b3e}
.hp-notice--err{background:var(--hp-red-50);border-color:#F3C6C6;color:#9a2a2a}
.hp-notice--info{background:var(--hp-blue-50);border-color:#C6D8FF;color:var(--hp-blue-700)}

/* =========================================================
   5. HEADER
   ========================================================= */
.hp-header{background:#fff;border-bottom:1px solid var(--hp-line);position:sticky;top:0;z-index:200}
.hp-header__in{display:flex;align-items:center;gap:14px;min-height:76px}
.hp-logo{display:inline-flex;align-items:center;gap:8px;font-size:1.6rem;font-weight:900;color:var(--hp-blue);letter-spacing:-.045em;flex-shrink:0;font-style:italic}
.hp-logo:hover{color:var(--hp-blue-600)}
.hp-logo img{max-height:38px;width:auto}

.hp-nav{display:flex;align-items:center;gap:2px;margin-left:6px}
.hp-nav ul{list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:0}
.hp-nav li{position:relative}
.hp-nav > ul > li > a{display:block;padding:10px 14px;border-radius:8px;font-weight:600;font-size:.95rem;color:var(--hp-navy)}
.hp-nav > ul > li > a:hover{color:var(--hp-blue)}
.hp-nav .sub-menu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:260px;background:#fff;border:1px solid var(--hp-line);
  border-radius:var(--hp-r-lg);box-shadow:var(--hp-shadow-lg);padding:10px;display:none;flex-direction:column;gap:1px;z-index:220;
}
.hp-nav li:hover > .sub-menu{display:flex}
.hp-nav .sub-menu a{display:block;padding:10px 13px;border-radius:8px;font-size:.9rem;font-weight:500;color:var(--hp-navy)}
.hp-nav .sub-menu a:hover{background:var(--hp-blue-50);color:var(--hp-blue)}
.hp-nav .sub-menu .sub-menu{top:-10px;left:calc(100% + 4px)}

.hp-header__right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}

/* country switcher */
.hp-country{position:relative}
.hp-country__btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--hp-line);border-radius:var(--hp-r-pill);background:#fff;font-weight:600;font-size:.85rem;color:var(--hp-navy);cursor:pointer;font-family:inherit}
.hp-country__btn:hover{border-color:var(--hp-blue);color:var(--hp-blue)}
.hp-country__menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r);box-shadow:var(--hp-shadow-lg);padding:8px;display:none;z-index:230}
.hp-country.is-open .hp-country__menu{display:block}
.hp-country__menu a{display:flex;gap:9px;align-items:center;padding:9px 12px;border-radius:8px;font-size:.9rem;color:var(--hp-navy);font-weight:500}
.hp-country__menu a:hover{background:var(--hp-blue-50);color:var(--hp-blue)}
.hp-country__menu a.is-active{background:var(--hp-blue);color:#fff}

/* mega menu for categories */
.hp-mega{
  position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--hp-line);
  box-shadow:var(--hp-shadow-lg);padding:30px 0;display:none;z-index:210;max-height:74vh;overflow-y:auto;
}
.hp-mega.is-open{display:block}
/*
 * auto-fit, not a fixed four: each cell is now one category rather than a stack
 * of six, so the panel has to lay out anywhere from three cells to twenty-four
 * and wrap onto as many rows as it needs.
 */
.hp-mega__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:26px 30px;align-items:start}
.hp-mega__col{min-width:0}
.hp-mega h4{font-size:.83rem;text-transform:uppercase;letter-spacing:.06em;color:var(--hp-muted);margin-bottom:10px}
.hp-mega ul{list-style:none;padding:0;margin:0}
.hp-mega li{margin-bottom:7px}
.hp-mega a{font-size:.9rem;color:var(--hp-navy)}

/* After .hp-mega h4, not before - same specificity, so source order decides,
   and the heading of a cell should read as a heading rather than as a label. */
.hp-mega__col h4{color:var(--hp-navy-900);font-weight:800}
.hp-mega__all{font-weight:700;color:var(--hp-blue);white-space:nowrap}
.hp-mega__foot{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  margin-top:24px;padding-top:18px;border-top:1px solid var(--hp-line)}
.hp-mega a:hover{color:var(--hp-blue)}

/* =========================================================
   6. HERO
   ========================================================= */
.hp-hero{padding:70px 0 78px;background:#fff;position:relative;overflow:hidden}
.hp-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.hp-hero h1{color:var(--hp-navy);margin-bottom:18px}
.hp-hero h1 em{font-style:normal;color:var(--hp-blue)}
.hp-hero__lead{font-size:1.14rem;color:var(--hp-muted);max-width:52ch;margin-bottom:28px}
.hp-hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.hp-hero__art{background:linear-gradient(150deg,var(--hp-blue-50),#fff 70%);border-radius:24px;padding:34px;border:1px solid var(--hp-line)}
.hp-hero__art .hp-mini{background:#fff;border:1px solid var(--hp-line);border-radius:14px;padding:15px 17px;box-shadow:var(--hp-shadow);margin-bottom:12px}
.hp-hero__art .hp-mini b{color:var(--hp-navy);display:block;font-size:.95rem}
.hp-hero__art .hp-mini span{font-size:.82rem;color:var(--hp-muted)}

.hp-searchrow{display:flex;gap:10px;background:#fff;border:1.5px solid var(--hp-line);border-radius:var(--hp-r-pill);padding:7px 7px 7px 20px;max-width:640px;align-items:center;box-shadow:var(--hp-shadow)}
.hp-searchrow input{border:none;padding:11px 0;background:transparent;font-size:.97rem}
.hp-searchrow input:focus{box-shadow:none}
.hp-searchrow .hp-btn{flex-shrink:0}

/* page banner */
.hp-pagehead{background:var(--hp-blue-50);padding:52px 0;border-bottom:1px solid var(--hp-line)}
.hp-pagehead h1{margin-bottom:10px}
.hp-pagehead p{color:var(--hp-muted);margin:0;max-width:74ch;font-size:1.04rem}
.hp-crumbs{font-size:.82rem;color:var(--hp-muted);margin-bottom:14px}
.hp-crumbs a{color:var(--hp-muted)}
.hp-crumbs a:hover{color:var(--hp-blue)}
.hp-crumbs span{margin:0 6px;opacity:.5}

/* =========================================================
   7. CARDS & GRIDS
   ========================================================= */
.hp-grid{display:grid;gap:20px}
.hp-g2{grid-template-columns:repeat(2,1fr)}
.hp-g3{grid-template-columns:repeat(3,1fr)}
.hp-g4{grid-template-columns:repeat(4,1fr)}
.hp-g5{grid-template-columns:repeat(5,1fr)}
.hp-g6{grid-template-columns:repeat(6,1fr)}

.hp-card{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);overflow:hidden;transition:.16s;display:flex;flex-direction:column;height:100%}
.hp-card:hover{box-shadow:var(--hp-shadow-lg);transform:translateY(-2px)}
.hp-card__media{aspect-ratio:16/11;background:var(--hp-blue-50);overflow:hidden;position:relative}
.hp-card__media img{width:100%;height:100%;object-fit:cover}
.hp-card__body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.hp-card__eyebrow{font-size:.73rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--hp-blue)}
.hp-card__title{font-size:1.04rem;font-weight:700;margin:0;line-height:1.35}
.hp-card__title a{color:var(--hp-navy)}
.hp-card__title a:hover{color:var(--hp-blue)}
.hp-card__meta{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:.83rem;color:var(--hp-muted)}
.hp-card__foot{padding:0 18px 18px;margin-top:auto}

/* category tile */
.hp-tile{
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:20px;transition:.16s;height:100%;
}
.hp-tile:hover{border-color:var(--hp-blue);box-shadow:var(--hp-shadow);transform:translateY(-2px)}
.hp-tile__ico{width:46px;height:46px;border-radius:13px;background:var(--hp-blue-50);display:grid;place-items:center;font-size:1.3rem}
.hp-tile b{color:var(--hp-navy);font-size:.98rem;line-height:1.3}
.hp-tile span{font-size:.82rem;color:var(--hp-muted)}

/* circular category (homepage strip) */
.hp-round{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:8px}
.hp-round__ico{width:76px;height:76px;border-radius:50%;background:var(--hp-blue-50);display:grid;place-items:center;font-size:1.9rem;transition:.16s}
.hp-round:hover .hp-round__ico{background:var(--hp-blue);transform:translateY(-3px)}
.hp-round b{font-size:.86rem;color:var(--hp-navy);font-weight:700;line-height:1.3}
.hp-round span{font-size:.76rem;color:var(--hp-muted)}

/* task card */
.hp-task{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:22px;display:flex;gap:20px;justify-content:space-between;align-items:flex-start;transition:.16s}
.hp-task:hover{box-shadow:var(--hp-shadow-lg)}
.hp-task__right{text-align:right;flex-shrink:0;min-width:120px}
.hp-task__price{font-size:1.5rem;font-weight:900;color:var(--hp-navy);line-height:1.1}
.hp-task__label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--hp-muted);font-weight:700}

/* provider card */
.hp-prov{display:flex;gap:16px;padding:20px;background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);transition:.16s}
.hp-prov:hover{box-shadow:var(--hp-shadow-lg)}
.hp-ava{width:64px;height:64px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--hp-blue-50);display:grid;place-items:center;font-weight:800;color:var(--hp-blue);font-size:1.3rem}
.hp-ava img{width:100%;height:100%;object-fit:cover}
.hp-ava--lg{width:112px;height:112px;font-size:2.2rem}
.hp-stars{color:var(--hp-star);letter-spacing:1.5px;font-size:.95rem}
.hp-rate{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--hp-muted)}

/* =========================================================
   8. LAYOUTS
   ========================================================= */
.hp-split{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start}
.hp-detail{display:grid;grid-template-columns:1fr 370px;gap:34px;align-items:start}
.hp-panel{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:30px}
.hp-side{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:26px;position:sticky;top:96px;box-shadow:var(--hp-shadow)}
.hp-filters{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:22px;position:sticky;top:96px}
.hp-filters h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--hp-muted);margin:22px 0 11px}
.hp-filters h4:first-child{margin-top:0}
.hp-filters ul{list-style:none;padding:0;margin:0;max-height:260px;overflow-y:auto}
.hp-filters li{margin-bottom:8px}
.hp-filters li a{font-size:.88rem;color:var(--hp-ink)}
.hp-filters li a:hover,.hp-filters li.is-active a{color:var(--hp-blue);font-weight:700}
.hp-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.hp-toolbar select{max-width:230px}

/* =========================================================
   9. SEO / AEO / GEO CONTENT BLOCKS
   ========================================================= */
.hp-answer{
  background:var(--hp-blue-50);border:1px solid var(--hp-blue-100);border-left:4px solid var(--hp-blue);
  border-radius:var(--hp-r);padding:20px 22px;margin:0 0 26px;
}
.hp-answer h2,.hp-answer h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--hp-blue-700);margin-bottom:8px}
.hp-answer p{margin:0;font-size:1.02rem;color:var(--hp-navy);font-weight:500}

.hp-keyfacts{border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);overflow:hidden;margin:26px 0}
.hp-keyfacts caption,.hp-keyfacts .cap{background:var(--hp-bg-soft);padding:13px 18px;font-weight:800;color:var(--hp-navy);text-align:left;font-size:.95rem;border-bottom:1px solid var(--hp-line)}
.hp-keyfacts td{padding:13px 18px;border-bottom:1px solid var(--hp-line);font-size:.93rem;vertical-align:top}
.hp-keyfacts tr:last-child td{border-bottom:0}
.hp-keyfacts td:first-child{color:var(--hp-muted);width:40%;font-weight:600}
.hp-keyfacts td:last-child{color:var(--hp-navy);font-weight:600}

.hp-faq{border-top:1px solid var(--hp-line)}
.hp-faq details{border-bottom:1px solid var(--hp-line);padding:18px 0}
.hp-faq summary{cursor:pointer;font-weight:700;color:var(--hp-navy);font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.hp-faq summary::-webkit-details-marker{display:none}
.hp-faq summary::after{content:"+";color:var(--hp-blue);font-size:1.35rem;line-height:1;flex-shrink:0}
.hp-faq details[open] summary::after{content:"\2212"}
.hp-faq details p{margin:12px 0 0;color:var(--hp-ink)}

.hp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
.hp-step{position:relative;padding-top:8px}
.hp-step::before{
  counter-increment:s;content:counter(s);display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;background:var(--hp-blue);color:#fff;font-weight:900;margin-bottom:16px;font-size:1.05rem;
}
.hp-step h3{margin-bottom:7px}
.hp-step p{margin:0;color:var(--hp-muted);font-size:.94rem}

.hp-cost td,.hp-cost th{padding:13px 16px;border-bottom:1px solid var(--hp-line);font-size:.93rem;text-align:left}
.hp-cost th{background:var(--hp-bg-soft);color:var(--hp-navy);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.hp-cost td:last-child,.hp-cost th:last-child{text-align:right;font-weight:700;color:var(--hp-navy)}

.hp-linklist{columns:4;column-gap:28px;list-style:none;padding:0;margin:0}
.hp-linklist li{break-inside:avoid;margin-bottom:9px}
.hp-linklist a{font-size:.9rem;color:var(--hp-ink)}
.hp-linklist a:hover{color:var(--hp-blue)}

.hp-entry h2{margin-top:1.7em}
.hp-entry h3{margin-top:1.4em}
.hp-entry ul li,.hp-entry ol li{margin-bottom:7px}
.hp-entry img{border-radius:var(--hp-r)}
blockquote{border-left:4px solid var(--hp-blue);padding-left:20px;margin-left:0;color:var(--hp-muted)}

/* =========================================================
   10. TASK WIZARD
   ========================================================= */
.hp-wizard{max-width:720px;margin:0 auto}
.hp-wizard__bar{display:flex;gap:8px;margin-bottom:30px}
.hp-wizard__bar span{flex:1;height:6px;border-radius:3px;background:var(--hp-line)}
.hp-wizard__bar span.is-done{background:var(--hp-blue)}
.hp-wizard__step{display:none}
.hp-wizard__step.is-on{display:block;animation:hpIn .25s ease}
@keyframes hpIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hp-wizard__nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px}
.hp-wizard__count{font-size:.82rem;color:var(--hp-muted);margin-bottom:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}

/* =========================================================
   11. DASHBOARDS
   ========================================================= */
.hp-dash{display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start}
.hp-dash__nav{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:12px;position:sticky;top:96px}
.hp-dash__nav a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:9px;font-weight:600;font-size:.91rem;color:var(--hp-navy)}
.hp-dash__nav a:hover{background:var(--hp-bg-soft)}
.hp-dash__nav a.is-active{background:var(--hp-blue);color:#fff}
.hp-dash__nav hr{margin:10px 6px}
.hp-dash__role{padding:14px;border-radius:9px;background:var(--hp-blue-50);margin-bottom:10px}
.hp-dash__role b{display:block;color:var(--hp-navy);font-size:.93rem}
.hp-dash__role span{font-size:.78rem;color:var(--hp-muted)}

.hp-table{width:100%;background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);overflow:hidden}
.hp-table th{background:var(--hp-bg-soft);text-align:left;padding:13px 16px;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--hp-muted)}
.hp-table td{padding:15px 16px;border-top:1px solid var(--hp-line);font-size:.92rem;vertical-align:middle}
.hp-table .num{text-align:right}
.hp-table tr:hover td{background:#FBFCFF}

.hp-empty{background:#fff;border:1.5px dashed var(--hp-line);border-radius:var(--hp-r-lg);padding:54px 24px;text-align:center;color:var(--hp-muted)}
.hp-empty h3{color:var(--hp-navy)}

.hp-tabs{display:flex;gap:4px;border-bottom:1px solid var(--hp-line);margin-bottom:24px;overflow-x:auto}
.hp-tabs a{padding:12px 18px;font-weight:700;font-size:.92rem;color:var(--hp-muted);border-bottom:3px solid transparent;white-space:nowrap}
.hp-tabs a.is-active{color:var(--hp-blue);border-bottom-color:var(--hp-blue)}

/* offers + messages */
.hp-offer{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--hp-line)}
.hp-offer__amt{margin-left:auto;text-align:right;flex-shrink:0}
.hp-offer__amt b{display:block;font-size:1.25rem;font-weight:900;color:var(--hp-navy)}
.hp-thread{display:flex;flex-direction:column;gap:14px;max-height:460px;overflow-y:auto;padding-right:6px}
.hp-msg{max-width:78%;padding:13px 16px;border-radius:14px;background:var(--hp-bg-soft);font-size:.92rem}
.hp-msg.is-mine{margin-left:auto;background:var(--hp-blue);color:#fff}
.hp-msg.is-mine .hp-xs{color:rgba(255,255,255,.75)}
.hp-msg__who{font-weight:700;font-size:.8rem;margin-bottom:3px}

/* =========================================================
   12. FOOTER
   ========================================================= */
.hp-footer{background:var(--hp-navy);color:#C3C8E4;margin-top:70px;padding:60px 0 0;font-size:.91rem}
.hp-footer h4{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.hp-footer a{color:#C3C8E4}
.hp-footer a:hover{color:#fff}
.hp-footer ul{list-style:none;padding:0;margin:0}
.hp-footer li{margin-bottom:10px}
.hp-footer__cols{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:34px;padding-bottom:44px}
.hp-footer__brand .hp-logo{color:#fff}
.hp-footer__brand p{max-width:36ch;color:#A9AFD3}
.hp-social{display:flex;gap:10px;margin-top:16px}
.hp-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;font-size:.78rem;font-weight:700}
.hp-social a:hover{background:var(--hp-blue)}
.hp-footer__seo{border-top:1px solid rgba(255,255,255,.13);padding:28px 0}
.hp-footer__seo h4{margin-bottom:12px}
.hp-footer__seo .list{display:flex;flex-wrap:wrap;gap:7px 16px;font-size:.83rem}
.hp-footer__bottom{border-top:1px solid rgba(255,255,255,.13);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.83rem}
.hp-footer__bottom nav{display:flex;gap:18px;flex-wrap:wrap}

/* =========================================================
   13. MISC
   ========================================================= */
.hp-pag{display:flex;gap:7px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.hp-pag .page-numbers{padding:10px 16px;border-radius:9px;border:1px solid var(--hp-line);background:#fff;color:var(--hp-navy);font-weight:700;font-size:.9rem}
.hp-pag .page-numbers.current,.hp-pag .page-numbers:hover{background:var(--hp-blue);border-color:var(--hp-blue);color:#fff}
.hp-band{background:var(--hp-blue);color:#fff;border-radius:22px;padding:48px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.hp-band h2{color:#fff;margin:0 0 8px}
.hp-band p{color:#D6E2FF;margin:0;max-width:56ch}
.hp-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.hp-trust__i{display:flex;gap:14px;align-items:flex-start}
.hp-trust__i .ico{width:46px;height:46px;border-radius:13px;background:var(--hp-blue-50);display:grid;place-items:center;font-size:1.25rem;flex-shrink:0}
.hp-trust__i b{display:block;color:var(--hp-navy);margin-bottom:4px}
.hp-trust__i p{margin:0;font-size:.9rem;color:var(--hp-muted)}
.hp-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.hp-gallery img{border-radius:10px;aspect-ratio:1;object-fit:cover}
.hp-speclist{list-style:none;padding:0;margin:0}
.hp-speclist li{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--hp-line);font-size:.92rem}
.hp-speclist li:last-child{border-bottom:0}
.hp-speclist li span:first-child{color:var(--hp-muted)}
.hp-speclist li span:last-child{font-weight:700;color:var(--hp-navy);text-align:right}

/* generator progress (admin) */
.hp-gen-bar{height:22px;background:#eef1f8;border-radius:11px;overflow:hidden;margin:14px 0}
.hp-gen-bar i{display:block;height:100%;background:#2365FC;width:0;transition:width .3s}
.hp-gen-log{max-height:280px;overflow:auto;background:#0f1424;color:#c7d2e8;padding:14px;border-radius:9px;font:12px/1.6 ui-monospace,Menlo,monospace}

/* =========================================================
   14. RESPONSIVE
   ========================================================= */
@media(max-width:1080px){
  .hp-linklist{columns:3}
  .hp-g6{grid-template-columns:repeat(4,1fr)}
  .hp-g5{grid-template-columns:repeat(3,1fr)}
  .hp-detail{grid-template-columns:1fr}
  .hp-side{position:static}
  .hp-hero__grid{grid-template-columns:1fr}
  .hp-hero__art:not(:has(img)){display:none}
}
@media(max-width:900px){
  /* The nav moves into the drawer wholesale rather than becoming a dropdown. */
  .hp-nav{display:none}
  .hp-header__in{position:relative}
  .hp-split,.hp-dash{grid-template-columns:1fr}
  .hp-filters,.hp-dash__nav{position:static}
  .hp-g4,.hp-g3{grid-template-columns:repeat(2,1fr)}
  .hp-trust,.hp-steps{grid-template-columns:1fr}
  .hp-footer__cols{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .hp-linklist{columns:2}
  .hp-g6,.hp-g5,.hp-g4,.hp-g3,.hp-g2{grid-template-columns:repeat(2,1fr)}
  .hp-grid2,.hp-grid3{grid-template-columns:1fr}
  .hp-footer__cols{grid-template-columns:1fr}
  .hp-task{flex-direction:column}
  .hp-task__right{text-align:left}
  .hp-sec{padding:44px 0}
  .hp-hero{padding:44px 0 50px}
  .hp-panel,.hp-band{padding:24px}
  .hp-searchrow{flex-direction:column;border-radius:var(--hp-r-lg);padding:14px;align-items:stretch}
}


/* =========================================================
 * BUILDING SUPPLIES STORE
 * ====================================================== */

.hp-sec--tight{padding:34px 0}
.hp-h3{font-size:1.18rem;margin:0}
.hp-lead{font-size:1.05rem;color:var(--hp-muted);margin-top:10px}
.hp-prose h2{margin-top:30px}
.hp-prose p{margin:0 0 14px}
.hp-chips{display:flex;flex-wrap:wrap;gap:9px}

.hp-ticks{list-style:none;padding:0;margin:12px 0 0}
.hp-ticks li{position:relative;padding-left:26px;margin-bottom:9px;font-size:.93rem}
.hp-ticks li:before{content:"\2713";position:absolute;left:0;top:0;color:var(--hp-green);font-weight:800}

/* ---- header cart ---- */
.hp-cartlink{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--hp-r);border:1px solid var(--hp-line);font-size:1.05rem;color:var(--hp-navy);flex-shrink:0}
.hp-cartlink:hover{border-color:var(--hp-blue);background:var(--hp-blue-50)}
.hp-cartlink__n{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--hp-blue);color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center}

/* ---- store hero ---- */
.hp-store-hero{background:var(--hp-navy-900);background-size:cover;background-position:center;color:#fff;padding:64px 0 70px}
.hp-store-hero__in{max-width:720px}
.hp-store-hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3rem);line-height:1.1;margin:0}
.hp-store-hero h1 em{font-style:normal;color:#8FB3FF}
.hp-store-hero p{color:rgba(255,255,255,.86);font-size:1.05rem;margin:14px 0 0;max-width:600px}
.hp-store-search{display:flex;gap:8px;background:#fff;border-radius:var(--hp-r-lg);padding:8px;margin-top:26px;max-width:600px}
.hp-store-search input{flex:1;border:0;background:transparent;padding:10px 12px;font-size:.98rem}
.hp-store-search input:focus{outline:none;box-shadow:none}
.hp-store-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hp-btn--outline-light{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff}
.hp-btn--outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* ---- promise strip ---- */
.hp-promises{background:var(--hp-blue-50);border-bottom:1px solid var(--hp-line)}
.hp-promises ul{list-style:none;margin:0;padding:14px 0;display:flex;flex-wrap:wrap;gap:12px 34px;justify-content:center}
.hp-promises li{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--hp-navy)}
.hp-promises li span{color:var(--hp-green);font-weight:800}

/* ---- room tiles ---- */
.hp-room{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:26px 16px;transition:.16s}
.hp-room:hover{border-color:var(--hp-blue);box-shadow:var(--hp-shadow);transform:translateY(-2px)}
.hp-room__ico{width:56px;height:56px;border-radius:50%;background:var(--hp-blue-50);display:grid;place-items:center;font-size:1.5rem}
.hp-room b{color:var(--hp-navy);font-size:.95rem}

/* ---- brand strip ---- */
.hp-brandstrip{display:flex;flex-wrap:wrap;gap:10px}
.hp-brandstrip a{padding:12px 20px;border:1px solid var(--hp-line);border-radius:var(--hp-r);background:#fff;font-weight:700;font-size:.9rem;color:var(--hp-navy)}
.hp-brandstrip a:hover{border-color:var(--hp-blue);color:var(--hp-blue)}

/* ---- cta band ---- */
.hp-cta-band{background:var(--hp-navy-900);color:#fff;padding:44px 0}
.hp-cta-band .hp-container{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hp-cta-band h2{color:#fff;margin:0;font-size:1.5rem}
.hp-cta-band p{color:rgba(255,255,255,.8);margin:8px 0 0}

/* ---- shop layout ---- */
.hp-shop{display:grid;grid-template-columns:270px 1fr;gap:32px;align-items:start}

/* ---- product card ---- */
.hp-prod{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);overflow:hidden;transition:.16s}
.hp-prod:hover{border-color:var(--hp-blue);box-shadow:var(--hp-shadow)}
.hp-prod__media{position:relative;display:block;aspect-ratio:4/3;background:var(--hp-bg-soft);overflow:hidden}
.hp-prod__media img{width:100%;height:100%;object-fit:cover;display:block}
.hp-prod__flag{position:absolute;top:10px;left:10px}
.hp-prod__body{padding:14px 16px;flex:1;display:flex;flex-direction:column;gap:7px}
.hp-prod__brand{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--hp-muted);font-weight:700}
.hp-prod__title{font-size:.96rem;line-height:1.35;margin:0}
.hp-prod__title a{color:var(--hp-navy)}
.hp-prod__title a:hover{color:var(--hp-blue)}
.hp-prod__price{margin-top:auto;font-size:1.15rem;font-weight:800;color:var(--hp-navy)}
.hp-prod__price del{font-size:.85rem;font-weight:600;color:var(--hp-muted);margin-left:7px}
.hp-prod__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hp-prod__foot{padding:0 16px 16px}

/* ---- single product ---- */
.hp-product{display:grid;grid-template-columns:1fr 440px;gap:44px;align-items:start}
.hp-product h1{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:6px 0 0}
.hp-product__main{background:var(--hp-bg-soft);border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);overflow:hidden;aspect-ratio:4/3}
.hp-product__main img{width:100%;height:100%;object-fit:cover;display:block}
.hp-product__thumbs{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.hp-product__thumb{width:72px;height:72px;padding:0;border:1px solid var(--hp-line);border-radius:var(--hp-r);overflow:hidden;background:#fff;cursor:pointer}
.hp-product__thumb:hover{border-color:var(--hp-blue)}
.hp-product__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hp-product__ids{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}

.hp-buybox{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:22px;margin-top:20px;box-shadow:var(--hp-shadow)}
.hp-buybox__price{font-size:1.9rem;font-weight:900;color:var(--hp-navy);line-height:1}
.hp-buybox__price del{font-size:1rem;font-weight:600;color:var(--hp-muted);margin-left:10px}
.hp-buybox__stock{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 18px}
.hp-buybox__form{display:flex;gap:10px}
.hp-buybox__form input{width:88px}
.hp-buybox__form button{flex:1}

.hp-table--spec th{background:transparent;text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--hp-navy);font-weight:700;width:40%;border-top:1px solid var(--hp-line)}
.hp-table--spec tr:first-child th,.hp-table--spec tr:first-child td{border-top:0}

/* ---- cart and checkout ---- */
.hp-cart-layout{display:grid;grid-template-columns:1fr 350px;gap:32px;align-items:start;margin-top:22px}
.hp-cart-thumb{display:block;width:60px;height:60px;border-radius:var(--hp-r);overflow:hidden;background:var(--hp-bg-soft)}
.hp-cart-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hp-totals{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:24px;position:sticky;top:96px;box-shadow:var(--hp-shadow)}
.hp-totals dl{display:grid;grid-template-columns:1fr auto;gap:11px 14px;margin:0}
.hp-totals dt{color:var(--hp-muted);font-size:.9rem}
.hp-totals dd{margin:0;text-align:right;font-size:.92rem;font-weight:600;color:var(--hp-navy)}
.hp-totals .grand{padding-top:12px;border-top:1px solid var(--hp-line);font-size:1.08rem;font-weight:800;color:var(--hp-navy)}

@media(max-width:1024px){
  .hp-product{grid-template-columns:1fr 380px;gap:30px}
}
@media(max-width:900px){
  .hp-shop,.hp-product,.hp-cart-layout{grid-template-columns:1fr}
  .hp-totals{position:static}
  .hp-store-hero{padding:44px 0 50px}
  .hp-cta-band .hp-container{flex-direction:column;align-items:flex-start}
}
@media(max-width:620px){
  .hp-store-search{flex-direction:column;padding:12px}
  .hp-promises ul{gap:10px 20px;justify-content:flex-start}
  .hp-buybox__form{flex-direction:column}
  .hp-buybox__form input{width:100%}
}


/* =========================================================
 * EQUIPMENT RENTAL
 * ====================================================== */

.hp-stat{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:20px;box-shadow:var(--hp-shadow)}
.hp-stat b{display:block;font-size:1.6rem;color:var(--hp-navy);line-height:1.1}
.hp-stat span{display:block;margin-top:6px;font-size:.85rem;color:var(--hp-muted)}

/* ---- date bar ---- */
.hp-datebar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:16px;box-shadow:var(--hp-shadow)}
.hp-datebar label{display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--hp-muted);margin-bottom:6px}
.hp-datebar input[type=date]{min-width:170px}
.hp-datebar button{flex-shrink:0}
.hp-datebar--hero{margin-top:26px;max-width:640px}
.hp-datebar--hero .hp-datebar{border-color:transparent}

/* ---- supplier comparison ---- */
.hp-compare{display:flex;flex-direction:column;gap:12px}
.hp-compare__row{display:grid;grid-template-columns:1fr 160px 160px;gap:18px;align-items:center;background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:16px 18px;transition:.15s}
.hp-compare__row:hover{border-color:var(--hp-blue);box-shadow:var(--hp-shadow)}
.hp-compare__row.is-out{opacity:.62}
.hp-compare__who{display:flex;gap:14px;align-items:flex-start;min-width:0}
.hp-compare__who img{width:78px;height:60px;object-fit:cover;border-radius:var(--hp-r);flex-shrink:0;background:var(--hp-bg-soft)}
.hp-compare__who h3{font-size:1rem;margin:0 0 4px;line-height:1.3}
.hp-compare__who h3 a{color:var(--hp-navy)}
.hp-compare__who h3 a:hover{color:var(--hp-blue)}
.hp-compare__tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.hp-compare__price{text-align:right}
.hp-compare__price b{display:block;font-size:1.25rem;font-weight:800;color:var(--hp-navy);line-height:1.1}
.hp-compare__price span{display:block;margin-top:4px}
.hp-compare__cta{display:flex;flex-direction:column;align-items:flex-end;gap:8px}

/* ---- rate card ---- */
.hp-ratecard{display:grid;grid-template-columns:repeat(3,minmax(0,200px));gap:12px;margin-top:14px}
.hp-ratecard div{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:16px 18px;text-align:center}
.hp-ratecard b{display:block;font-size:1.3rem;font-weight:800;color:var(--hp-navy)}
.hp-ratecard span{display:block;margin-top:4px;font-size:.82rem;color:var(--hp-muted)}

/* ---- availability calendar ---- */
.hp-cal th{white-space:nowrap;font-size:.7rem}
.hp-cal__cell{text-align:center;font-weight:700;color:var(--hp-green);font-size:.9rem}
.hp-cal__cell.is-part{color:var(--hp-amber);background:var(--hp-amber-50)}
.hp-cal__cell.is-full{color:var(--hp-red);background:var(--hp-red-50)}

/* ---- equipment card tweak ---- */
.hp-eq .hp-prod__price{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}

@media(max-width:900px){
  .hp-compare__row{grid-template-columns:1fr;gap:12px}
  .hp-compare__price,.hp-compare__cta{text-align:left;align-items:flex-start;flex-direction:row;justify-content:space-between}
  .hp-ratecard{grid-template-columns:1fr}
}
@media(max-width:620px){
  .hp-datebar{flex-direction:column;align-items:stretch}
  .hp-datebar input[type=date]{min-width:0;width:100%}
}


/* =========================================================
 * THE PLATFORM: THREE DIVISIONS, ONE ACCOUNT
 * ====================================================== */

.hp-divisions{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.hp-divisions--2{grid-template-columns:repeat(2,1fr)}
.hp-divisions--1{grid-template-columns:minmax(0,520px)}
.hp-division{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:26px;transition:.16s}
.hp-division:hover{border-color:var(--hp-blue);box-shadow:var(--hp-shadow);transform:translateY(-2px)}
.hp-division.is-current{border-color:var(--hp-blue);background:var(--hp-blue-50)}
.hp-division__ico{width:52px;height:52px;border-radius:14px;background:var(--hp-blue-50);display:grid;place-items:center;font-size:1.5rem;margin-bottom:16px}
.hp-division h3{font-size:1.2rem;margin:0 0 8px}
.hp-division h3 a{color:var(--hp-navy)}
.hp-division h3 a:hover{color:var(--hp-blue)}
.hp-division__lead{color:var(--hp-muted);font-size:.93rem;margin:0 0 14px}
.hp-division .hp-ticks{margin-bottom:20px}
.hp-division .hp-ticks li{font-size:.87rem}

.hp-crossref{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:20px 22px;transition:.15s}
.hp-crossref:hover{border-color:var(--hp-blue);box-shadow:var(--hp-shadow)}
.hp-crossref__ico{width:48px;height:48px;flex-shrink:0;border-radius:13px;background:var(--hp-blue-50);display:grid;place-items:center;font-size:1.4rem}
.hp-crossref b{display:block;color:var(--hp-navy);font-size:1.02rem}
.hp-crossref span span{display:block;color:var(--hp-muted);font-size:.88rem;margin-top:3px}

/* =========================================================
 * LOG IN AND SIGN UP
 * ====================================================== */

.hp-auth{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:44px;align-items:start}
.hp-auth__form{min-width:0}
.hp-auth__aside{background:var(--hp-navy-900);color:#fff;border-radius:var(--hp-r-lg);padding:34px 30px;position:sticky;top:96px}
.hp-auth__aside h2{color:#fff;font-size:1.35rem;margin:0 0 12px}
.hp-auth__aside > p{color:rgba(255,255,255,.8);font-size:.95rem;margin:0 0 26px}
.hp-auth__aside ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.hp-auth__aside li{display:flex;gap:14px;align-items:flex-start}
.hp-auth__aside li > span{width:42px;height:42px;flex-shrink:0;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:1.2rem}
.hp-auth__aside li b{display:block;color:#fff;font-size:.98rem}
.hp-auth__aside li div > span{display:block;color:rgba(255,255,255,.72);font-size:.86rem;margin-top:3px}

@media(max-width:980px){
  .hp-divisions,.hp-divisions--2{grid-template-columns:1fr}
  .hp-auth{grid-template-columns:1fr;gap:26px}
  .hp-auth__aside{position:static;order:2}
}


/* =========================================================
 * MARKETPLACE: SEVERAL SELLERS ON ONE PRODUCT
 * ====================================================== */

.hp-sellers{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.hp-sellers__row{display:grid;grid-template-columns:1fr auto 150px;gap:16px;align-items:center;background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r);padding:14px 16px}
.hp-sellers__row.is-out{opacity:.6}
.hp-sellers__row b{display:block;color:var(--hp-navy);font-size:.95rem}
.hp-sellers__row b a{color:var(--hp-navy)}
.hp-sellers__row b a:hover{color:var(--hp-blue)}
.hp-sellers__row > div > span{display:block;margin-top:3px}
.hp-sellers__price{text-align:right;font-weight:700;color:var(--hp-navy)}

.hp-cart-seller td{background:var(--hp-bg-soft);font-size:.85rem;color:var(--hp-muted);padding:10px 16px}

/* ---- supplier inventory ---- */
.hp-inv-search{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.hp-inv-search input[type=search]{flex:1;min-width:220px}
.hp-inv-result{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r);padding:12px 14px;margin-bottom:10px}
.hp-inv-result img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:var(--hp-bg-soft);flex-shrink:0}
.hp-inv-result b{display:block;color:var(--hp-navy);font-size:.95rem}
.hp-inv-result span{display:block;font-size:.82rem;color:var(--hp-muted);margin-top:2px}
.hp-inv-result form{margin-left:auto}

@media(max-width:760px){
  .hp-sellers__row{grid-template-columns:1fr;gap:10px}
  .hp-sellers__price{text-align:left}
}

/* =========================================================
 * 20. PROJECTS, THE WIZARD, QUOTES AND INVOICES
 * ====================================================== */

/* ---- the one-shot wizard ---- */
.hp-wiz__step{display:flex;gap:20px;padding:28px 0;border-top:1px solid var(--hp-line)}
.hp-wiz__step:first-child{border-top:0;padding-top:0}
.hp-wiz__step[hidden]{display:none}
.hp-wiz__step > div{flex:1;min-width:0}
.hp-wiz__n{flex:0 0 34px;height:34px;border-radius:var(--hp-r-pill);background:var(--hp-blue-50);color:var(--hp-blue);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem}
.hp-wiz__step h2{font-size:1.25rem;margin:2px 0 10px}
.hp-wiz__submit{border-top:1px solid var(--hp-line);padding-top:24px;text-align:center}

.hp-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:16px}
.hp-pick{display:block;position:relative;border:2px solid var(--hp-line);border-radius:var(--hp-r-lg);
  padding:18px 16px;cursor:pointer;transition:border-color .15s,background .15s}
.hp-pick:hover{border-color:var(--hp-blue-100)}
.hp-pick:has(input:checked){border-color:var(--hp-blue);background:var(--hp-blue-50)}
.hp-pick input{position:absolute;top:14px;right:14px;width:18px;height:18px}
.hp-pick__icon{display:block;font-size:1.7rem;line-height:1;margin-bottom:8px}
.hp-pick strong{display:block;color:var(--hp-navy);margin-bottom:3px}

/* ---- the item rows shared by the wizard and Ask for a Price ---- */
.hp-item-row{display:grid;grid-template-columns:1fr 90px 110px 1fr 32px;gap:10px;align-items:start;margin-bottom:10px}
.hp-item-row input{width:100%}
.hp-item-row__name{position:relative;min-width:0}
.hp-item-row__x{border:0;background:none;color:var(--hp-muted);font-size:1.5rem;line-height:1;cursor:pointer;padding:6px}
.hp-item-row__x:hover{color:var(--hp-red)}
.hp-item-row__hits{position:absolute;z-index:20;top:100%;left:0;right:0;background:#fff;border:1px solid var(--hp-line);
  border-radius:var(--hp-r);box-shadow:var(--hp-shadow-lg);max-height:260px;overflow:auto}
.hp-item-row__hit{display:block;width:100%;text-align:left;border:0;background:none;padding:10px 13px;cursor:pointer;font-size:.9rem}
.hp-item-row__hit:hover{background:var(--hp-blue-50)}
.hp-item-row__hit span{display:block;font-size:.75rem;color:var(--hp-muted)}

/* ---- the project workspace ---- */
.hp-project{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:34px;align-items:start}
.hp-project__side{display:flex;flex-direction:column;gap:18px;position:sticky;top:90px}

.hp-pcost{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:24px}
.hp-pcost__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px}
.hp-pcost__cell span{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--hp-muted)}
.hp-pcost__cell strong{display:block;font-size:1.6rem;color:var(--hp-navy-900);margin:4px 0 2px;font-weight:800}
.hp-pcost__cell em{font-style:normal;display:block}
.hp-pcost__cell--total{border-left:1px solid var(--hp-line);padding-left:20px}
.hp-pcost__budget{margin-top:20px;padding-top:18px;border-top:1px solid var(--hp-line)}
.hp-bar{height:8px;border-radius:var(--hp-r-pill);background:var(--hp-bg-soft);overflow:hidden;margin-bottom:8px}
.hp-bar span{display:block;height:100%;background:var(--hp-green);border-radius:var(--hp-r-pill)}
.hp-bar.is-over span{background:var(--hp-red)}
.hp-warn{color:var(--hp-red)}

.hp-pstream{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:22px;margin-bottom:18px}
.hp-pstream__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.hp-pstream__head h3{margin:0;font-size:1.05rem}
.hp-pstream__sub{font-weight:800;color:var(--hp-navy-900)}
.hp-pstream__empty{text-align:center;padding:16px 0}
.hp-table--stream{border:0}
.hp-table--stream td{padding:12px 0}
.hp-table--stream tr:hover td{background:none}

.hp-pnotes{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:22px;margin-top:18px}
.hp-pnotes textarea{width:100%}

.hp-pcards{display:flex;flex-direction:column;gap:12px}
.hp-pcard{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;
  border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:18px 20px}
.hp-pcard h3{margin:0 0 3px;font-size:1rem}
.hp-pcard__meta{display:flex;align-items:center;gap:12px;flex-shrink:0}

.hp-timeline{list-style:none;margin:0;padding:0}
.hp-timeline li{display:flex;gap:11px;padding:10px 0;border-top:1px solid var(--hp-line);font-size:.88rem}
.hp-timeline li:first-child{border-top:0;padding-top:0}
.hp-timeline__icon{flex:0 0 22px;text-align:center}
.hp-timeline time{display:block;margin-top:2px}

.hp-docs{list-style:none;margin:10px 0 0;padding:0}
.hp-docs li{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--hp-line);font-size:.88rem}
.hp-docs li:first-child{border-top:0}

/* ---- requirements and quotes ---- */
.hp-rfq__step{padding:24px 0;border-top:1px solid var(--hp-line)}
.hp-rfq__step:first-of-type{border-top:0;padding-top:0}
.hp-rfq__step h2{font-size:1.2rem;margin:0 0 8px}
.hp-rfq__submit{border-top:1px solid var(--hp-line);padding-top:22px;text-align:center}

.hp-req{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;align-items:start}
.hp-req__side{display:flex;flex-direction:column;gap:18px}
.hp-req__head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.hp-facts{list-style:none;margin:0;padding:0}
.hp-facts li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--hp-line);font-size:.88rem}
.hp-facts li:first-child{border-top:0}
.hp-facts li span:first-child{color:var(--hp-muted)}

.hp-quotes{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.hp-quote{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:20px}
.hp-quote.is-best{border-color:var(--hp-green);box-shadow:0 0 0 3px var(--hp-green-50)}
.hp-quote.is-won{border-color:var(--hp-blue);box-shadow:0 0 0 3px var(--hp-blue-50)}
.hp-quote__head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.hp-quote__total{font-size:1.4rem;font-weight:800;color:var(--hp-navy-900)}
.hp-quote__meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.hp-quote__note{margin-top:10px;padding:11px 14px;background:var(--hp-bg-soft);border-radius:var(--hp-r);font-size:.88rem}
.hp-quote__act{margin-top:14px}
.hp-quote__won{margin-top:12px;color:var(--hp-blue);font-weight:700;font-size:.9rem}
.hp-table--sm td{padding:8px 0;font-size:.86rem;border-top:1px solid var(--hp-line)}
.hp-table--sm{border:0}
.hp-table--sm tr:hover td{background:none}

.hp-bidbar{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:var(--hp-r-lg);
  background:var(--hp-amber-50);border:1px solid #F0DFB5;margin-bottom:18px}
.hp-bidbar.is-winning{background:var(--hp-green-50);border-color:#BCE3CC}
.hp-bidbar strong{color:var(--hp-navy-900)}
.hp-bidbar span{font-size:.87rem;color:var(--hp-muted)}

.hp-quoteform__foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--hp-line)}
.hp-quoteform__total span{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--hp-muted)}
.hp-quoteform__total strong{display:block;font-size:1.5rem;color:var(--hp-navy-900);font-weight:800}
.hp-quoteform__total .hp-xs{text-transform:none;letter-spacing:0}

.hp-reqlist{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.hp-reqrow{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:18px 20px}
.hp-reqrow.is-new{border-color:var(--hp-blue-100);background:var(--hp-blue-50)}
.hp-reqrow h4{margin:0 0 4px;font-size:1rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hp-reqrow__main{min-width:0;flex:1}
.hp-reqrow__bid{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.hp-reqrow__bid strong{font-size:1.15rem;color:var(--hp-navy-900)}

.hp-checkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px;margin-top:12px}
.hp-checkgrid label{display:flex;align-items:center;gap:9px;font-size:.9rem}
.hp-chips{display:flex;flex-wrap:wrap;gap:9px}
.hp-chip{display:inline-flex;padding:7px 15px;border-radius:var(--hp-r-pill);background:var(--hp-bg-soft);
  border:1px solid var(--hp-line);font-size:.87rem;font-weight:600;color:var(--hp-navy)}
.hp-chip:hover{background:var(--hp-blue-50);border-color:var(--hp-blue-100);color:var(--hp-blue)}

.hp-buybox--rfq .hp-buybox__ask{font-size:1.2rem;font-weight:800;color:var(--hp-navy-900);margin:0}
.hp-prod__price--ask{color:var(--hp-muted);font-weight:600;font-size:.9rem}
.hp-filters__ask{margin-top:22px;padding:16px;background:var(--hp-bg-soft);border-radius:var(--hp-r)}
.hp-asklink{font-weight:700;color:var(--hp-blue);font-size:.9rem;white-space:nowrap}

/* ---- invoices ---- */
.hp-invoice{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:34px}
.hp-invoice__head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:2px solid var(--hp-line)}
.hp-invoice__head h1{font-size:1.7rem;margin:0}
.hp-invoice__ref{font-weight:700;color:var(--hp-blue);margin:4px 0 0}
.hp-invoice__brand{text-align:right}
.hp-invoice__parties{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;margin:26px 0}
.hp-invoice__parties h4{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--hp-muted);margin:0 0 6px}
.hp-invoice__parties p{margin:0}
.hp-invoice__lines tfoot th{background:none;text-transform:none;letter-spacing:0;font-size:.92rem;
  color:var(--hp-navy);text-align:right;border-top:1px solid var(--hp-line)}
.hp-invoice__lines tfoot td{border-top:1px solid var(--hp-line)}
.hp-invoice__note{margin-top:24px;padding-top:18px;border-top:1px solid var(--hp-line)}
tr.is-void{opacity:.55}

@media print{
  .hp-noprint,.hp-header,.hp-footer,.hp-notices{display:none !important}
  .hp-invoice{border:0;padding:0}
}

@media (max-width:960px){
  .hp-project,.hp-req{grid-template-columns:1fr}
  .hp-project__side{position:static}
  .hp-pcost__cell--total{border-left:0;padding-left:0}
}

@media (max-width:700px){
  .hp-item-row{grid-template-columns:1fr 1fr;gap:8px}
  .hp-item-row__name,.hp-item-row__note{grid-column:1 / -1}
  .hp-wiz__step{gap:12px}
  .hp-reqrow__bid{align-items:flex-start;width:100%}
}

/* =========================================================
 * 21. THE PHOTO-LED HOMEPAGE
 * ====================================================== */

/* Every picture in the theme crops rather than stretches, so a portrait photo
   uploaded into a landscape slot is cropped, never squashed. */
.hp-img{display:block;width:100%;height:100%;object-fit:cover}
.hp-img--ph{background:var(--hp-bg-soft)}

/* ---- hero ---- */
.hp-hero2{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(135deg,var(--hp-brand-navy) 0%,#1B2A7A 45%,#0E7FA8 100%)}
.hp-hero2__bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2}
.hp-hero2__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(16,20,38,.55) 0%,rgba(16,20,38,.72) 100%)}
.hp-hero2:not(.has-photo) .hp-hero2__scrim{background:linear-gradient(180deg,rgba(16,20,38,.12),rgba(16,20,38,.34))}
.hp-hero2__in{position:relative;padding:96px 0 84px;max-width:820px;color:#fff}
.hp-hero2__eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;font-weight:700;
  opacity:.85;margin:0 0 14px}
.hp-hero2__h{font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.08;letter-spacing:-.02em;color:#fff;margin:0 0 16px}
.hp-hero2__h em{font-style:normal;color:var(--hp-brand-cyan)}
.hp-hero2__lead{font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.6;opacity:.92;margin:0 0 28px;max-width:640px}

.hp-hero2__search{display:flex;gap:10px;background:#fff;padding:8px;border-radius:var(--hp-r-lg);
  box-shadow:var(--hp-shadow-lg);max-width:620px}
.hp-hero2__search input{flex:1;border:0;padding:14px 16px;font-size:1rem;border-radius:var(--hp-r);min-width:0}
.hp-hero2__search input:focus{outline:2px solid var(--hp-blue-100);outline-offset:-2px}

.hp-hero2__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hp-btn--glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(6px)}
.hp-btn--glass:hover{background:rgba(255,255,255,.24);color:#fff}

.hp-hero2__points{list-style:none;display:flex;gap:22px;flex-wrap:wrap;margin:28px 0 0;padding:0;
  font-size:.9rem;opacity:.92}
.hp-hero2__points li{display:flex;align-items:center;gap:8px}
.hp-hero2__points li::before{content:"✓";color:var(--hp-brand-cyan);font-weight:800}

/* ---- photo tiles ---- */
.hp-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.hp-tiles--wide{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}

.hp-tile{position:relative;display:block;border-radius:var(--hp-r-lg);overflow:hidden;
  aspect-ratio:4/3;isolation:isolate;background:var(--hp-bg-soft);box-shadow:var(--hp-shadow)}
.hp-tile__img{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);z-index:-2}
.hp-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--hp-scrim-soft)}
.hp-tile:hover .hp-tile__img,.hp-tile:focus-visible .hp-tile__img{transform:scale(1.06)}
.hp-tile__body{position:absolute;left:0;right:0;bottom:0;padding:18px}
.hp-tile__title{display:block;color:#fff;font-weight:800;font-size:1.02rem;line-height:1.3;
  text-shadow:0 1px 12px rgba(16,20,38,.45)}
.hp-tile__meta{display:block;color:rgba(255,255,255,.86);font-size:.8rem;margin-top:3px}
.hp-tile.is-static{cursor:default}

/* ---- mosaic showcase: first slot is double ---- */
.hp-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hp-mosaic .hp-tile{aspect-ratio:1/1}
.hp-mosaic__big{grid-column:span 2;grid-row:span 2}
.hp-mosaic .hp-mosaic__big{aspect-ratio:auto}

/* ---- the three streams as photo cards ---- */
.hp-streams{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.hp-stream{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hp-line);
  border-radius:var(--hp-r-lg);overflow:hidden;box-shadow:var(--hp-shadow)}
.hp-stream__img{display:block;aspect-ratio:16/10;background-size:cover;background-position:center}
.hp-stream__body{display:flex;flex-direction:column;flex:1;padding:24px;position:relative}
.hp-stream__ico{position:absolute;top:-26px;left:24px;width:52px;height:52px;border-radius:14px;
  background:#fff;box-shadow:var(--hp-shadow);display:grid;place-items:center;font-size:1.5rem}
.hp-stream__body h3{margin:18px 0 8px;font-size:1.2rem}
.hp-stream__lead{color:var(--hp-muted);font-size:.92rem;line-height:1.6;margin:0 0 14px}

/* ---- how it works ---- */
.hp-how2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center}
.hp-how2__art{border-radius:var(--hp-r-lg);background-size:cover;background-position:center;
  aspect-ratio:1/1;box-shadow:var(--hp-shadow-lg)}
.hp-how2__steps{list-style:none;margin:0;padding:0}
.hp-how2__steps li{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--hp-line)}
.hp-how2__steps li:first-child{border-top:0;padding-top:0}
.hp-how2__n{flex:0 0 40px;height:40px;border-radius:var(--hp-r-pill);
  background:var(--hp-brand-navy);color:#fff;display:grid;place-items:center;font-weight:800}
.hp-how2__steps h3{margin:6px 0 6px;font-size:1.08rem}
.hp-how2__steps p{margin:0;color:var(--hp-muted);font-size:.93rem;line-height:1.6}
.hp-how2__cta{border-top:1px solid var(--hp-line);padding-top:22px}

/* ---- category circles with photos ---- */
.hp-rounds{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:20px 14px}
.hp-round2{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.hp-round2__img{display:block;width:88px;height:88px;border-radius:var(--hp-r-pill);
  background-size:cover;background-position:center;box-shadow:var(--hp-shadow);
  transition:transform .25s,box-shadow .25s}
.hp-round2:hover .hp-round2__img{transform:translateY(-3px);box-shadow:var(--hp-shadow-lg)}
.hp-round2 b{font-size:.85rem;line-height:1.35;color:var(--hp-navy);font-weight:600}

/* ---- closing band ---- */
.hp-band{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(120deg,var(--hp-brand-navy),#12507A)}
.hp-band__bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2}
.hp-band__scrim{position:absolute;inset:0;z-index:-1;background:rgba(16,20,38,.66)}
.hp-band:not(.has-photo) .hp-band__scrim{background:rgba(16,20,38,.1)}
.hp-band__in{padding:76px 0;text-align:center;color:#fff;max-width:760px;margin:0 auto}
.hp-band__in h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.4rem);margin:0 0 14px}
.hp-band__in p{opacity:.9;font-size:1.03rem;line-height:1.6;margin:0 0 26px}

/* ---- responsive ---- */
@media (max-width:1000px){
  .hp-how2{grid-template-columns:1fr;gap:28px}
  .hp-how2__art{aspect-ratio:16/9}
  .hp-mosaic{grid-template-columns:repeat(2,1fr)}
  .hp-mosaic__big{grid-column:span 2;grid-row:auto}
  .hp-mosaic .hp-mosaic__big{aspect-ratio:16/10}
}

@media (max-width:700px){
  .hp-hero2__in{padding:64px 0 56px}
  .hp-hero2__search{flex-direction:column;background:transparent;padding:0;box-shadow:none}
  .hp-hero2__search input{background:#fff;padding:15px 16px}
  .hp-hero2__cta .hp-btn{width:100%;justify-content:center}
  .hp-hero2__points{gap:10px;flex-direction:column}
  .hp-tiles{grid-template-columns:repeat(2,1fr);gap:12px}
  .hp-tiles--wide{grid-template-columns:1fr}
  .hp-tile__body{padding:13px}
  .hp-tile__title{font-size:.9rem}
  .hp-rounds{grid-template-columns:repeat(3,1fr)}
  .hp-round2__img{width:72px;height:72px}
  .hp-band__in{padding:56px 0}
}

/* =========================================================
 * 22. HERO SPLIT, COLLAGE AND SLIDERS
 *
 * These override the first pass in section 21 on purpose: the tiles moved
 * from a text-on-photo overlay to a card, and the hero from one centred
 * column to text-left / collage-right.
 * ====================================================== */

/* ---- hero: text left, collage right ---- */
.hp-hero2__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:56px;align-items:center;padding:84px 24px 78px}
.hp-hero2__text{color:#fff;max-width:620px}
.hp-hero2__in{padding:96px 0 84px}   /* kept for any other page still using it */

/* ---- the three-up collage ---- */
.hp-collage{position:relative;display:grid;grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);gap:16px;aspect-ratio:1/1;max-width:520px;
  margin-left:auto;width:100%}
.hp-collage__c{position:relative;margin:0;border-radius:var(--hp-r-lg);overflow:hidden;
  background:var(--hp-bg-soft);box-shadow:0 18px 44px rgba(8,12,32,.32);
  border:3px solid rgba(255,255,255,.9)}
.hp-collage__img{position:absolute;inset:0;background-size:cover;background-position:center}
.hp-collage__c figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  color:#fff;font-size:.83rem;font-weight:700;letter-spacing:.01em;line-height:1.25;
  background:linear-gradient(180deg,rgba(16,20,38,0),rgba(16,20,38,.86));
  text-shadow:0 1px 10px rgba(16,20,38,.5)}

/* The first card is the tall one on the left; the other two stack beside it,
   which reads as a composed group rather than three equal squares. */
.hp-collage__c--1{grid-row:span 2}
.hp-collage__c--2,.hp-collage__c--3{aspect-ratio:auto}

/* ---- tiles: a card, photo above, name below on white ---- */
.hp-tile{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--hp-line);border-radius:14px;overflow:hidden;aspect-ratio:auto;
  box-shadow:var(--hp-shadow);transition:transform .22s,box-shadow .22s,border-color .22s}
.hp-tile:hover{transform:translateY(-3px);box-shadow:var(--hp-shadow-lg);border-color:var(--hp-blue-100)}
.hp-tile::after{content:none}
.hp-tile__img{position:static;display:block;width:100%;aspect-ratio:16/11;
  background-size:cover;background-position:center;transition:none;z-index:auto}
.hp-tile:hover .hp-tile__img{transform:none}
.hp-tile__body{position:static;padding:15px 14px;text-align:center;flex:1;
  display:flex;flex-direction:column;justify-content:center;gap:3px}
.hp-tile__title{color:var(--hp-navy-900);font-weight:600;font-size:.95rem;line-height:1.35;
  text-shadow:none}
.hp-tile__meta{color:var(--hp-muted);font-size:.8rem}
.hp-tile--wide .hp-tile__img{aspect-ratio:16/9}

/* ---- one-row slider ---- */
.hp-slider{position:relative}
.hp-slider__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(216px,1fr);
  gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 14px;margin:-4px -4px 0;scrollbar-width:none}
.hp-slider__track::-webkit-scrollbar{display:none}
.hp-slider__track > *{scroll-snap-align:start}
.hp-slider.is-static .hp-slider__arrow{display:none}

.hp-slider__arrow{position:absolute;top:calc(50% - 34px);z-index:5;width:46px;height:46px;
  border-radius:var(--hp-r-pill);border:1px solid var(--hp-line);background:#fff;
  color:var(--hp-navy-900);font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--hp-shadow-lg);
  transition:transform .18s,background .18s}
.hp-slider__arrow:hover{background:var(--hp-blue-50);transform:scale(1.06)}
.hp-slider__arrow:focus-visible{outline:2px solid var(--hp-blue);outline-offset:2px}
.hp-slider__arrow[hidden]{display:none}
.hp-slider__arrow--prev{left:-22px}
.hp-slider__arrow--next{right:-22px}

/* The mosaic keeps the old overlay treatment - those are the owner's own
   photographs, chosen for that slot, so text on them is a fair bet. */
.hp-mosaic .hp-tile{aspect-ratio:1/1;border:0;background:var(--hp-bg-soft)}
.hp-mosaic .hp-tile__img{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.hp-mosaic .hp-tile::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,20,38,0) 40%,rgba(16,20,38,.72) 100%)}
.hp-mosaic .hp-tile__body{position:absolute;left:0;right:0;bottom:0;z-index:2;
  text-align:left;padding:18px}
.hp-mosaic .hp-tile__title{color:#fff;font-weight:800;font-size:1.02rem;
  text-shadow:0 1px 12px rgba(16,20,38,.45)}
.hp-mosaic .hp-mosaic__big{aspect-ratio:auto}

@media (max-width:1080px){
  .hp-hero2__grid{grid-template-columns:1fr;gap:40px;padding:70px 24px 64px}
  .hp-hero2__text{max-width:none}
  .hp-collage{max-width:460px;margin:0 auto}
  .hp-slider__arrow--prev{left:6px}
  .hp-slider__arrow--next{right:6px}
}

@media (max-width:700px){
  .hp-hero2__grid{padding:56px 20px 52px;gap:32px}
  .hp-collage{aspect-ratio:4/3;gap:11px;max-width:none}
  .hp-collage__c{border-width:2px}
  .hp-collage__c figcaption{font-size:.74rem;padding:20px 10px 9px}
  .hp-slider__track{grid-auto-columns:minmax(168px,1fr);gap:12px}
  .hp-slider__arrow{width:38px;height:38px;font-size:1.2rem}
}

/* =========================================================
 * 23. THE PHONE DRAWER
 *
 * The header keeps only the logo, the nav and the account buttons. On a phone
 * all of that - plus the country switcher and the main call to action - moves
 * into a drawer, so nothing in the header becomes unreachable at small sizes.
 * ====================================================== */

.hp-burger{display:none;position:relative;width:44px;height:40px;padding:0;
  background:none;border:1.5px solid var(--hp-line);border-radius:10px;cursor:pointer}
.hp-burger span,
.hp-burger span::before,
.hp-burger span::after{position:absolute;left:11px;width:20px;height:2px;border-radius:2px;
  background:var(--hp-navy-900);transition:transform .22s,opacity .22s}
.hp-burger span{top:calc(50% - 1px)}
.hp-burger span::before{content:"";top:-6px;left:0}
.hp-burger span::after{content:"";top:6px;left:0}
.hp-burger[aria-expanded="true"] span{background:transparent}
.hp-burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.hp-burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

body.hp-locked{overflow:hidden}

.hp-drawer{position:fixed;inset:0;z-index:300}
.hp-drawer[hidden]{display:none}
.hp-drawer__scrim{position:absolute;inset:0;background:rgba(16,20,38,.5);
  opacity:0;transition:opacity .24s}
.hp-drawer.is-open .hp-drawer__scrim{opacity:1}

.hp-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(340px,88vw);
  background:#fff;box-shadow:-18px 0 48px rgba(16,20,38,.24);
  display:flex;flex-direction:column;gap:18px;padding:18px 20px 26px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.7,.3,1)}
.hp-drawer.is-open .hp-drawer__panel{transform:none}

.hp-drawer__top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.hp-drawer__top img{height:30px;width:auto}
.hp-drawer__x{border:0;background:none;font-size:1.9rem;line-height:1;color:var(--hp-muted);
  cursor:pointer;padding:2px 6px;border-radius:8px}
.hp-drawer__x:hover{color:var(--hp-navy-900);background:var(--hp-bg-soft)}

.hp-drawer__nav ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hp-drawer__nav a{display:block;padding:13px 12px;border-radius:10px;font-weight:600;
  font-size:1rem;color:var(--hp-navy-900)}
.hp-drawer__nav a:hover,.hp-drawer__nav a:focus-visible{background:var(--hp-blue-50);color:var(--hp-blue)}
.hp-drawer__nav .sub-menu{margin:2px 0 6px 12px;padding-left:12px;
  border-left:2px solid var(--hp-line);gap:0}
.hp-drawer__nav .sub-menu a{padding:9px 12px;font-weight:500;font-size:.92rem;color:var(--hp-ink)}

.hp-drawer__foot{margin-top:auto;display:grid;gap:9px;padding-top:18px;
  border-top:1px solid var(--hp-line)}
.hp-drawer__link{display:block;text-align:center;padding:9px;font-size:.9rem;
  font-weight:600;color:var(--hp-muted)}
.hp-drawer__link:hover{color:var(--hp-red)}
.hp-drawer__country{display:flex;justify-content:center;padding-top:6px}

@media(max-width:900px){
  .hp-burger{display:block}
  /* The desktop nav and the account buttons are in the drawer now, so the
     header at this size is the logo and the button that opens it. */
  .hp-header__right > .hp-btn,
  .hp-header__right > .hp-country{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hp-drawer__panel,.hp-drawer__scrim,.hp-burger span,
  .hp-burger span::before,.hp-burger span::after{transition:none}
}


/* =========================================================
 * 24. PAGE BANNERS
 * A page header is a plain tinted band until somebody sets a photo on it,
 * at which point the same element becomes a picture with the title over it.
 * ====================================================== */
.hp-pagehead--photo{position:relative;background-size:cover;background-position:center;
  border-bottom:0;padding:78px 0;color:#fff}
.hp-pagehead--photo.hp-pagehead--tall{padding:120px 0}

/* The scrim, not a filter on the element - a filter would grey the text too. */
.hp-pagehead--photo::before{content:"";position:absolute;inset:0;background:transparent}
.hp-pagehead--tint::before{
  background:linear-gradient(180deg,rgba(9,20,44,.30) 0%,rgba(9,20,44,.68) 100%)}

.hp-pagehead--photo .hp-container{position:relative;z-index:1}
.hp-pagehead--photo h1{color:#fff;text-shadow:0 1px 24px rgba(9,20,44,.35)}
.hp-pagehead--photo p{color:rgba(255,255,255,.92)}
.hp-pagehead--photo .hp-crumbs,
.hp-pagehead--photo .hp-crumbs a{color:rgba(255,255,255,.8)}
.hp-pagehead--photo .hp-crumbs a:hover{color:#fff}
.hp-pagehead--photo .hp-btn--outline{border-color:rgba(255,255,255,.7);color:#fff;background:transparent}
.hp-pagehead--photo .hp-btn--outline:hover{background:rgba(255,255,255,.14)}

@media(max-width:700px){
  .hp-pagehead--photo{padding:52px 0}
  .hp-pagehead--photo.hp-pagehead--tall{padding:70px 0}
}

/* A steps block with a photo becomes a split; without one it is untouched. */
.hp-stepsplit{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:44px;align-items:center}
.hp-stepsplit__art{border-radius:var(--hp-r-lg);background-size:cover;background-position:center;
  min-height:420px;box-shadow:var(--hp-shadow)}
@media(max-width:900px){
  .hp-stepsplit{grid-template-columns:1fr;gap:26px}
  .hp-stepsplit__art{min-height:240px;order:-1}
}

/* =========================================================
 * 25. ANY PHOTO, ANY SIZE
 *
 * Every picture slot on the site is a fixed shape filled with cover, so the
 * browser crops to fit rather than stretching. That means a portrait, a square
 * and a panorama all sit correctly in the same slot without anybody resizing
 * anything before upload - the only thing an odd shape costs is a wider crop.
 *
 * The two habits that break this are an <img> with only one dimension set, and
 * a slot with no shape of its own that collapses to the image's own ratio. Both
 * are handled below rather than per component.
 * ====================================================== */

/* An image inside a slot always fills it and is never distorted. */
.hp-tile__img, .hp-collage__img, .hp-stream__img, .hp-round2__img,
.hp-how2__art, .hp-stepsplit__art, .hp-pagehead--photo{
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:var(--hp-blue-50)}

/* A photo dropped into a free-standing slot keeps its own shape but never
   overflows and never squashes: width leads, height follows. */
.hp-hero__art img, .hp-split > div > .hp-img{
  width:100%; height:auto; display:block; border-radius:16px}

/* When the owner supplies a hero photo the decorative mat gets out of its way,
   and - unlike the mock cards it replaces - it stays on a phone. */
.hp-hero__art:has(img){padding:0; border:0; background:none}

/* Where a card fixes the height, the picture crops instead of stretching. */
.hp-card__media, .hp-prod__media{overflow:hidden}
.hp-card__media img, .hp-prod__media img{width:100%; height:100%; object-fit:cover; display:block}

/* =========================================================
 * 26. TESTIMONIALS AND FAQ
 * ====================================================== */

/*
 * The slider track is a grid sized for photo tiles - 216px columns. A quote
 * needs room to be read, so this one row overrides the column width rather than
 * every card fighting it with a flex-basis the grid would ignore.
 */
#hp-review-slider{grid-auto-columns:minmax(300px,380px)}
@media(max-width:600px){ #hp-review-slider{grid-auto-columns:minmax(260px,86vw)} }

/* A quote card. Initials, not a stock face - a photograph of a stranger is the
   detail that makes a real review look invented. */
.hp-testimonial{scroll-snap-align:start;
  background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);
  padding:24px 24px 20px;margin:0;display:flex;flex-direction:column;gap:14px}
.hp-testimonial__stars{color:#F59E0B;font-size:.95rem;letter-spacing:.08em;line-height:1}
.hp-testimonial__text{margin:0;font-size:1rem;line-height:1.65;color:var(--hp-navy);flex:1}
.hp-testimonial__text::before{content:"\201C"}
.hp-testimonial__text::after{content:"\201D"}

.hp-testimonial__who{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--hp-line);padding-top:14px;margin:0}
.hp-testimonial__ava{flex:0 0 40px;height:40px;border-radius:var(--hp-r-pill);
  display:grid;place-items:center;font-weight:800;font-size:.85rem;
  background:var(--hp-blue-50);color:var(--hp-blue)}
.hp-testimonial__who b{display:block;font-size:.92rem;color:var(--hp-navy)}
.hp-testimonial__who small{display:block;font-size:.78rem;color:var(--hp-muted);margin-top:2px}
.hp-testimonial__link{margin-left:auto;font-size:.8rem;white-space:nowrap}
.hp-testimonial__src{color:var(--hp-muted);font-style:italic}

/* FAQ. Wider than the how-it-works one, because it carries the homepage. */
.hp-faq--wide{max-width:860px;margin-inline:auto}
.hp-faq--wide summary{font-size:1.02rem}
.hp-faq__cta{max-width:860px;margin:26px auto 0;text-align:center}

@media(max-width:600px){
  .hp-testimonial{padding:20px 20px 16px}
  .hp-testimonial__link{margin-left:0;width:100%}
}

/* "Rate on request" stands where a price would - same weight, so the buy box
   does not look like it failed to load. */
.hp-buybox__price--ask{font-size:1.25rem;line-height:1.3}

/* The footer mark. A dedicated light upload renders as it is; without one the
   header logo has its colour knocked out to pure white, which is correct for a
   solid mark and legible for anything else. */
.hp-logo--foot{display:inline-block;line-height:0}
.hp-logo--foot img{height:38px;width:auto;display:block}
.hp-logo--foot.is-knockout img{filter:brightness(0) invert(1);opacity:.94}

/* =========================================================
 * 27. THE SERVICE PAGE
 *
 * Hundreds of these, and most first visits land on one. The banner is followed
 * by a rhythm - numbers, answer, photo, cards, numbers, photo - so the page
 * gives the eye somewhere to go instead of one column of prose.
 * ====================================================== */

/* The numbers bar rides up over the banner, which ties the two together and
   puts the price on the first screen. */
/* The card rides up over the banner. How far depends on which banner: the photo
   one is 78px deep, the plain tinted band only 52px, and the same pull leaves
   the buttons almost touching the card on the shallower one. */
.hp-svcstats{margin-top:-16px;position:relative;z-index:2}
.hp-pagehead--photo + .hp-svcstats{margin-top:-38px}
.hp-svcstats__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--hp-line);border:1px solid var(--hp-line);
  border-radius:var(--hp-r-lg);overflow:hidden;box-shadow:var(--hp-shadow-lg)}
.hp-svcstat{background:#fff;padding:18px 20px;display:flex;align-items:center;gap:13px}
.hp-svcstat__ico{font-size:1.5rem;line-height:1;flex-shrink:0}
.hp-svcstat b{display:block;color:var(--hp-navy-900);font-size:1.02rem;line-height:1.25}
.hp-svcstat small{display:block;color:var(--hp-muted);font-size:.78rem;margin-top:2px}

/* The short answer, given the room it earns. */
.hp-svc-answer{padding-top:44px;padding-bottom:8px}
.hp-svc-answer__eyebrow{margin:0 0 10px;font-size:.76rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.09em;color:var(--hp-blue)}
.hp-svc-answer__text{margin:0;max-width:60ch;
  font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.55;
  font-weight:500;color:var(--hp-navy-900)}

/* Body and the card that follows it down. */
.hp-svcbody{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:44px;align-items:start}

.hp-quotecard{position:sticky;top:96px;background:#fff;border:1px solid var(--hp-line);
  border-radius:var(--hp-r-lg);padding:24px;box-shadow:var(--hp-shadow)}
.hp-quotecard__label{display:block;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--hp-muted);font-weight:700}
.hp-quotecard__price{display:block;font-size:1.55rem;font-weight:800;
  color:var(--hp-navy-900);margin:4px 0 18px;line-height:1.2}
.hp-quotecard__points{list-style:none;padding:0;margin:18px 0 0;font-size:.88rem}
.hp-quotecard__points li{position:relative;padding-left:24px;margin-bottom:9px;color:var(--hp-muted)}
.hp-quotecard__points li::before{content:"✓";position:absolute;left:0;top:-1px;
  color:var(--hp-green);font-weight:800}
.hp-quotecard__alt{display:block;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--hp-line);font-size:.86rem}

/* Steps beside a photograph. */
.hp-svcsplit{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:46px;align-items:center}
.hp-svcsplit__art{border-radius:var(--hp-r-lg);background-size:cover;background-position:center;
  aspect-ratio:4/5;box-shadow:var(--hp-shadow-lg)}

.hp-svcsteps{list-style:none;margin:22px 0 0;padding:0;counter-reset:step}
.hp-svcsteps li{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--hp-line)}
.hp-svcsteps li:first-child{border-top:0;padding-top:0}
.hp-svcsteps__n{flex:0 0 38px;height:38px;border-radius:var(--hp-r-pill);
  display:grid;place-items:center;font-weight:800;font-size:.92rem;
  background:var(--hp-blue);color:#fff}
.hp-svcsteps b{display:block;color:var(--hp-navy-900);font-size:1.04rem;margin-bottom:5px}
.hp-svcsteps p{margin:0;color:var(--hp-muted);font-size:.93rem;line-height:1.6}

/* Facts as cards, not table rows. */
.hp-factgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:22px}
.hp-factcard{background:#fff;border:1px solid var(--hp-line);border-radius:var(--hp-r-lg);padding:20px}
.hp-factcard b{display:block;color:var(--hp-navy-900);font-size:.95rem;margin-bottom:6px}
.hp-factcard p{margin:0;color:var(--hp-muted);font-size:.9rem;line-height:1.6}

/* Costs, with the range drawn rather than only written. */
.hp-costs{margin-top:24px;background:#fff;border:1px solid var(--hp-line);
  border-radius:var(--hp-r-lg);overflow:hidden}
.hp-costrow{display:grid;grid-template-columns:minmax(140px,1.1fr) minmax(90px,2fr) minmax(110px,auto);
  gap:18px;align-items:center;padding:15px 22px;border-top:1px solid var(--hp-line)}
.hp-costrow:first-child{border-top:0}
.hp-costrow__job{font-weight:600;color:var(--hp-navy);font-size:.94rem}
.hp-costrow__bar{position:relative;height:9px;border-radius:99px;background:var(--hp-blue-50);overflow:hidden}
.hp-costrow__bar i{position:absolute;top:0;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--hp-blue),#5B8CFF)}
.hp-costrow__val{text-align:right;font-weight:700;color:var(--hp-navy-900);
  font-size:.92rem;white-space:nowrap}

/* The closing band. */
.hp-svccta{position:relative;overflow:hidden;background:var(--hp-navy);
  color:#fff;padding:76px 0;margin-top:0}
.hp-svccta__bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hp-svccta__scrim{position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(9,20,44,.94) 0%,rgba(9,20,44,.72) 100%)}
.hp-svccta.has-photo .hp-svccta__scrim{
  background:linear-gradient(120deg,rgba(9,20,44,.9) 0%,rgba(9,20,44,.62) 100%)}
.hp-svccta__in{position:relative;z-index:1;max-width:760px}
.hp-svccta h2{color:#fff;margin:0 0 12px}
.hp-svccta p{color:rgba(255,255,255,.9);margin:0;font-size:1.05rem;line-height:1.65}
.hp-svccta__act{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px}
.hp-svccta__from{color:rgba(255,255,255,.82);font-size:.92rem}

@media(max-width:900px){
  .hp-svcbody{grid-template-columns:1fr;gap:32px}
  .hp-quotecard{position:static}
  .hp-svcsplit{grid-template-columns:1fr;gap:28px}
  .hp-svcsplit__art{aspect-ratio:16/10}
}
@media(max-width:700px){
  .hp-svcstats,.hp-pagehead--photo + .hp-svcstats{margin-top:-16px}
  .hp-svcstat{padding:14px 16px;gap:10px}
  .hp-costrow{grid-template-columns:1fr auto;gap:8px 14px;padding:14px 16px}
  .hp-costrow__bar{grid-column:1 / -1;order:3}
  .hp-svccta{padding:56px 0}
}