/* =========================================================
   HOPE HARBOR RESTAURANT MANAGEMENT
   Hospitality Staffing Solutions — master stylesheet
   Pure CSS3 · no frameworks
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --green-900:#07231B;
  --green-800:#0A2E23;
  --green-700:#0E3B2D;
  --green-600:#14513C;
  --green-500:#1B6A4E;
  --green-400:#2F8A69;

  --gold-600:#9C7C2E;
  --gold-500:#C5A24E;
  --gold-400:#D8BC74;
  --gold-200:#EFE2BF;

  --ivory:#F7F4EC;
  --ivory-2:#EFEADD;
  --white:#FFFFFF;

  --ink:#1D2320;
  --ink-soft:#4E5A54;
  --ink-mute:#7A867F;

  --line:rgba(12,45,35,.12);
  --line-gold:rgba(197,162,78,.42);

  --shadow-sm:0 6px 18px rgba(8,38,28,.07);
  --shadow-md:0 18px 46px rgba(8,38,28,.11);
  --shadow-lg:0 34px 80px rgba(6,32,24,.20);

  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:"Manrope","Segoe UI",system-ui,-apple-system,Arial,sans-serif;

  --header-h:96px;
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.72;
  color:var(--ink-soft);
  background:var(--ivory);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--green-900);
  margin:0 0 .5em;
  line-height:1.1;
  font-weight:600;
  letter-spacing:-.015em;
}
h1{font-size:clamp(2.15rem,5.4vw,4.3rem);}
h2{font-size:clamp(1.85rem,3.9vw,3.1rem);}
h3{font-size:clamp(1.15rem,1.7vw,1.5rem);}
h4{font-size:1.06rem;}
p{margin:0 0 1.15rem;}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;border-radius:2px;}
::selection{background:var(--green-600);color:#fff;}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 32px;}
.section{padding:clamp(64px,8vw,120px) 0;position:relative;}
.section--tight{padding:clamp(52px,6vw,88px) 0;}
.bg-ivory{background:var(--ivory);}
.bg-white{background:var(--white);}
.bg-soft{background:linear-gradient(180deg,#fff 0%,var(--ivory) 100%);}
.bg-green{background:var(--green-800);color:rgba(255,255,255,.82);}
.bg-green h1,.bg-green h2,.bg-green h3,.bg-green h4{color:#fff;}
.text-center{text-align:center;}
.mx-auto{margin-left:auto;margin-right:auto;}
.narrow{max-width:780px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- 3. TYPE HELPERS ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:18px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold-500);}
.bg-green .eyebrow,.hero .eyebrow{color:var(--gold-400);}
.eyebrow.center{justify-content:center;}
.eyebrow.center::after{content:"";width:34px;height:1px;background:var(--gold-500);}
.lead{font-size:clamp(1.02rem,1.25vw,1.16rem);color:var(--ink-soft);}
.bg-green .lead{color:rgba(255,255,255,.78);}
.display-quote{
  font-family:var(--font-display);font-size:clamp(1.6rem,3.3vw,2.7rem);
  line-height:1.22;color:var(--green-900);font-weight:600;
}
.gold{color:var(--gold-500);}
.italic-serif{font-family:var(--font-display);font-style:italic;font-weight:400;}
.rule-gold{width:70px;height:2px;background:linear-gradient(90deg,var(--gold-500),transparent);margin:22px 0;}
.rule-gold.center{margin-left:auto;margin-right:auto;background:linear-gradient(90deg,transparent,var(--gold-500),transparent);}

/* ---------- 4. BUTTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;font-size:.76rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  border-radius:2px;overflow:hidden;isolation:isolate;
  transition:color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  will-change:transform;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.btn:hover{transform:translateY(-3px);}
.btn:hover::after{transform:translateY(0);}
.btn svg{width:15px;height:15px;transition:transform .35s var(--ease);}
.btn:hover svg{transform:translateX(4px);}

.btn-gold{background:linear-gradient(120deg,var(--gold-500),var(--gold-400));color:#241C05;box-shadow:0 12px 30px rgba(156,124,46,.28);}
.btn-gold::after{background:var(--green-800);}
.btn-gold:hover{color:#fff;}

.btn-green{background:var(--green-700);color:#fff;}
.btn-green::after{background:linear-gradient(120deg,var(--gold-500),var(--gold-400));}
.btn-green:hover{color:#241C05;}

.btn-ghost{border:1px solid rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(6px);}
.btn-ghost::after{background:#fff;}
.btn-ghost:hover{color:var(--green-800);border-color:#fff;}

.btn-outline{border:1px solid var(--green-700);color:var(--green-800);}
.btn-outline::after{background:var(--green-800);}
.btn-outline:hover{color:#fff;}

.btn-sm{padding:12px 22px;font-size:.7rem;}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;}
.btn-row.center{justify-content:center;}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;font-size:.74rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-700);
  padding-bottom:4px;border-bottom:1px solid var(--line-gold);transition:.3s var(--ease);
}
.link-arrow svg{width:14px;height:14px;transition:transform .3s var(--ease);}
.link-arrow:hover{color:var(--gold-600);border-color:var(--gold-500);}
.link-arrow:hover svg{transform:translateX(5px);}

/* ---------- 5. PRELOADER ---------- */
#preloader{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:var(--green-900);transition:opacity .6s ease,visibility .6s ease;
}
#preloader.done{opacity:0;visibility:hidden;}
.pl-inner{text-align:center;}
.pl-mark{width:78px;height:78px;margin:0 auto 20px;animation:plFloat 2.4s ease-in-out infinite;}
.pl-name{font-family:var(--font-display);color:#fff;letter-spacing:.3em;font-size:.86rem;text-transform:uppercase;}
.pl-bar{width:180px;height:2px;margin:18px auto 0;background:rgba(255,255,255,.16);overflow:hidden;}
.pl-bar span{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--gold-600),var(--gold-400));animation:plBar 1.15s ease-in-out infinite;}
@keyframes plBar{0%{transform:translateX(-100%);}100%{transform:translateX(320%);}}
@keyframes plFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

/* ---------- 6. HEADER / NAV ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:background .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease);
  transform:translateY(-100%);
}
.site-header.ready{animation:navDrop .9s .25s var(--ease) forwards;}
@keyframes navDrop{to{transform:translateY(0);}}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,35,27,.78) 0%,rgba(7,35,27,.22) 60%,transparent 100%);
  transition:opacity .4s var(--ease);
}
.header-inner{display:flex;align-items:center;gap:26px;min-height:var(--header-h);transition:min-height .4s var(--ease);}
.site-header.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:0 10px 34px rgba(8,38,28,.10);}
.site-header.scrolled::before{opacity:0;}
.site-header.scrolled .header-inner{min-height:76px;}

/* brand */
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.brand-mark{width:62px;height:62px;transition:width .4s var(--ease),height .4s var(--ease);filter:drop-shadow(0 6px 14px rgba(0,0,0,.22));}
.site-header.scrolled .brand-mark{width:52px;height:52px;}
.brand-text{display:flex;flex-direction:column;line-height:1.05;}
.brand-text strong{
  font-family:var(--font-display);font-size:1.16rem;font-weight:700;letter-spacing:.09em;
  color:#fff;transition:color .4s var(--ease);white-space:nowrap;
}
.brand-text em{
  font-style:normal;font-size:.585rem;letter-spacing:.335em;text-transform:uppercase;
  color:var(--gold-400);font-weight:700;margin-top:4px;white-space:nowrap;
}
.site-header.scrolled .brand-text strong{color:var(--green-900);}
.site-header.scrolled .brand-text em{color:var(--gold-600);}

/* nav */
.main-nav{margin-left:auto;}
.nav-list{display:flex;align-items:center;gap:4px;}
.nav-list > li{position:relative;}
.nav-list > li > a,.drop-toggle{
  display:flex;align-items:center;gap:6px;padding:10px 13px;
  font-size:.745rem;font-weight:700;letter-spacing:.135em;text-transform:uppercase;
  color:rgba(255,255,255,.92);white-space:nowrap;transition:color .3s var(--ease);
}
.site-header.scrolled .nav-list > li > a,.site-header.scrolled .drop-toggle{color:var(--green-800);}
.nav-list > li > a::after,.drop-toggle::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1px;
  background:var(--gold-500);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.nav-list > li > a:hover::after,.drop-toggle:hover::after,.nav-list > li > a.active::after{transform:scaleX(1);}
.nav-list > li > a:hover,.drop-toggle:hover,.nav-list > li > a.active{color:var(--gold-400);}
.site-header.scrolled .nav-list > li > a:hover,
.site-header.scrolled .drop-toggle:hover,
.site-header.scrolled .nav-list > li > a.active{color:var(--gold-600);}
.drop-toggle svg{width:10px;height:10px;transition:transform .3s var(--ease);}
.has-dropdown.open .drop-toggle svg{transform:rotate(180deg);}

.dropdown{
  position:absolute;top:calc(100% + 14px);left:0;min-width:302px;padding:12px;
  background:#fff;border:1px solid var(--line);border-top:2px solid var(--gold-500);
  box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.has-dropdown:hover .dropdown,.has-dropdown.open .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{
  display:block;padding:11px 14px;font-size:.8rem;font-weight:600;color:var(--green-800);
  border-left:2px solid transparent;transition:.28s var(--ease);
}
.dropdown a:hover,.dropdown a.active{background:var(--ivory);border-left-color:var(--gold-500);color:var(--gold-600);padding-left:20px;}

.nav-cta{margin-left:10px;flex-shrink:0;}
.nav-cta-mobile{display:none;}
.nav-close{display:none;}

/* hamburger */
.hamburger{display:none;width:48px;height:48px;position:relative;margin-left:auto;flex-shrink:0;}
.hamburger span{
  position:absolute;left:12px;width:24px;height:2px;background:#fff;border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s,background .35s;
}
.hamburger span:nth-child(1){top:17px;}
.hamburger span:nth-child(2){top:23px;}
.hamburger span:nth-child(3){top:29px;}
.site-header.scrolled .hamburger span{background:var(--green-800);}
.nav-open .hamburger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-open .hamburger span:nth-child(2){opacity:0;}
.nav-open .hamburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.nav-backdrop{
  position:fixed;inset:0;background:rgba(6,28,21,.55);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:.4s var(--ease);z-index:998;
}
.nav-open .nav-backdrop{opacity:1;visibility:visible;}

/* ---------- 7. HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--green-900);} /* hero updated */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center center;transform:scale(1.03);animation:heroZoom 10s var(--ease) forwards;}
@keyframes heroZoom{to{transform:scale(1);}}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(7,35,27,.93) 0%,rgba(10,46,35,.84) 42%,rgba(7,35,27,.52) 100%),
    radial-gradient(90% 70% at 85% 15%,rgba(197,162,78,.16),transparent 62%);
}
.hero-inner{position:relative;z-index:2;padding:calc(var(--header-h) + 54px) 0 72px;max-width:900px;}
.hero h1{color:#fff;font-size:clamp(2.35rem,5.6vw,4.55rem);margin-bottom:.32em;}
.hero .brand-line{
  display:block;font-family:var(--font-body);font-size:.74rem;font-weight:800;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold-400);margin-bottom:22px;
}
.hero .hero-sub{
  font-family:var(--font-display);font-style:italic;font-size:clamp(1.1rem,2.1vw,1.68rem);
  color:var(--gold-200);margin-bottom:22px;line-height:1.38;
}
.hero p.lead{color:rgba(255,255,255,.8);max-width:660px;}
.hero .btn-row{margin-top:34px;}

.hero-strip{
  position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.14);
  background:rgba(7,35,27,.42);backdrop-filter:blur(10px);
}
.hero-strip .container{display:grid;grid-template-columns:repeat(4,1fr);}
.hero-stat{padding:26px 24px;border-left:1px solid rgba(255,255,255,.12);}
.hero-stat:first-child{border-left:0;}
.hero-stat b{display:block;font-family:var(--font-display);font-size:clamp(1.6rem,2.6vw,2.3rem);color:var(--gold-400);line-height:1;}
.hero-stat span{display:block;margin-top:8px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72);}

.scroll-hint{
  position:absolute;left:50%;bottom:120px;transform:translateX(-50%);z-index:3;
  width:24px;height:40px;border:1px solid rgba(255,255,255,.4);border-radius:14px;
}
.scroll-hint::after{
  content:"";position:absolute;left:50%;top:8px;width:3px;height:7px;margin-left:-1.5px;
  background:var(--gold-400);border-radius:3px;animation:scrollDot 1.8s infinite;
}
@keyframes scrollDot{0%{opacity:0;transform:translateY(0);}35%{opacity:1;}100%{opacity:0;transform:translateY(14px);}}

/* page hero (inner pages) */
.page-hero{position:relative;overflow:hidden;background:var(--green-900);min-height:420px;display:flex;align-items:center;}
.page-hero .hero-media img{height:100%;object-fit:cover;object-position:center center;animation:heroZoom 10s var(--ease) forwards;}
.page-hero .hero-media::after{
  background:linear-gradient(95deg,rgba(7,35,27,.93),rgba(10,46,35,.78) 55%,rgba(7,35,27,.58));
}
.page-hero-inner{position:relative;z-index:2;padding:calc(var(--header-h) + 70px) 0 84px;max-width:860px;}
.page-hero h1{color:#fff;}
.page-hero p{color:rgba(255,255,255,.8);max-width:660px;}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:18px;}
.crumbs a:hover{color:var(--gold-400);}
.crumbs span{color:var(--gold-400);}

/* ---------- 8. REVEAL ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
[data-reveal="left"]{transform:translateX(-40px);}
[data-reveal="right"]{transform:translateX(40px);}
[data-reveal="zoom"]{transform:scale(.94);}
[data-reveal].in{opacity:1;transform:none;}
.hero-inner > *{opacity:0;transform:translateY(26px);animation:heroUp .95s var(--ease) forwards;}
.hero-inner > *:nth-child(1){animation-delay:.35s;}
.hero-inner > *:nth-child(2){animation-delay:.47s;}
.hero-inner > *:nth-child(3){animation-delay:.59s;}
.hero-inner > *:nth-child(4){animation-delay:.71s;}
.hero-inner > *:nth-child(5){animation-delay:.83s;}
.hero-inner > *:nth-child(6){animation-delay:.95s;}
@keyframes heroUp{to{opacity:1;transform:none;}}

/* ---------- 9. GRIDS / CARDS ---------- */
.grid{display:grid;gap:30px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.section-head{max-width:760px;margin-bottom:54px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* service card */
.svc-card{
  position:relative;background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.svc-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-400));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:3;
}
.svc-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:transparent;}
.svc-card:hover::before{transform:scaleX(1);}
.svc-media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--green-800);}
.svc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s;}
.svc-card:hover .svc-media img{transform:scale(1.09);}
.svc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,35,27,.72));}
.svc-num{
  position:absolute;left:20px;top:16px;z-index:2;font-family:var(--font-display);
  font-size:2.1rem;color:rgba(255,255,255,.55);line-height:1;
}
.svc-icon{
  position:absolute;right:20px;bottom:-26px;z-index:2;width:56px;height:56px;display:grid;place-items:center;
  background:var(--green-800);border:1px solid var(--line-gold);
  transition:transform .5s var(--ease),background .5s var(--ease);
}
.svc-icon svg{width:26px;height:26px;stroke:var(--gold-400);fill:none;stroke-width:1.5;}
.svc-card:hover .svc-icon{transform:rotate(-8deg) translateY(-4px);background:var(--gold-500);}
.svc-card:hover .svc-icon svg{stroke:var(--green-900);}
.svc-body{padding:38px 28px 30px;display:flex;flex-direction:column;flex:1;}
.svc-body h3{margin-bottom:12px;}
.svc-body p{font-size:.94rem;margin-bottom:18px;}
.svc-tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px;}
.svc-tags li{
  font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:var(--green-600);background:var(--ivory);border:1px solid var(--line);padding:5px 10px;
}
.svc-body .link-arrow{margin-top:auto;align-self:flex-start;}

/* feature / why card */
.feat{
  position:relative;background:#fff;border:1px solid var(--line);padding:38px 32px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);overflow:hidden;
}
.feat::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold-500);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);
}
.feat:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);}
.feat:hover::after{transform:scaleY(1);}
.feat-ico{
  width:54px;height:54px;display:grid;place-items:center;margin-bottom:22px;
  border:1px solid var(--line-gold);background:var(--ivory);transition:.45s var(--ease);
}
.feat-ico svg{width:25px;height:25px;stroke:var(--green-600);fill:none;stroke-width:1.5;transition:.45s var(--ease);}
.feat:hover .feat-ico{background:var(--green-800);border-color:var(--green-800);transform:rotate(-6deg);}
.feat:hover .feat-ico svg{stroke:var(--gold-400);}
.feat h3{font-size:1.1rem;margin-bottom:10px;}
.feat p{font-size:.93rem;margin:0;}
.feat-index{position:absolute;right:20px;top:14px;font-family:var(--font-display);font-size:2.6rem;color:rgba(14,59,45,.06);line-height:1;}

/* bg-green variants */
.bg-green .feat{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12);}
.bg-green .feat p{color:rgba(255,255,255,.74);}
.bg-green .feat-ico{background:rgba(255,255,255,.06);border-color:rgba(197,162,78,.4);}
.bg-green .feat-ico svg{stroke:var(--gold-400);}
.bg-green .feat-index{color:rgba(255,255,255,.07);}

/* ---------- 10. SPLIT / EDITORIAL ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,5vw,76px);align-items:center;}
.split.reverse .split-media{order:2;}
.split-copy h2{margin-bottom:18px;}
.img-frame{position:relative;}
.img-frame img{width:100%;object-fit:cover;box-shadow:var(--shadow-md);}
.img-frame::before{
  content:"";position:absolute;inset:26px -26px -26px 26px;border:1px solid var(--line-gold);z-index:-1;
}
.img-stack{position:relative;padding-bottom:70px;padding-right:60px;}
.img-stack .img-main{width:100%;aspect-ratio:4/3.1;object-fit:cover;box-shadow:var(--shadow-md);}
.img-stack .img-float{
  position:absolute;right:0;bottom:0;width:56%;aspect-ratio:4/3;object-fit:cover;
  border:7px solid var(--ivory);box-shadow:var(--shadow-lg);
}
.bg-white .img-stack .img-float{border-color:#fff;}
.badge-float{
  position:absolute;left:-18px;bottom:96px;background:var(--green-800);color:#fff;
  padding:20px 24px;box-shadow:var(--shadow-lg);border-left:3px solid var(--gold-500);max-width:214px;
}
.badge-float b{display:block;font-family:var(--font-display);font-size:2rem;color:var(--gold-400);line-height:1;}
.badge-float span{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;margin-top:7px;color:rgba(255,255,255,.78);}

.check-list{display:grid;gap:14px;margin:26px 0 30px;}
.check-list li{position:relative;padding-left:34px;font-size:.96rem;}
.check-list li::before{
  content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border:1px solid var(--gold-500);
}
.check-list li::after{
  content:"";position:absolute;left:6px;top:12px;width:6px;height:10px;
  border-right:2px solid var(--gold-600);border-bottom:2px solid var(--gold-600);transform:rotate(42deg);
}
.bg-green .check-list li{color:rgba(255,255,255,.8);}

/* ---------- 11. STATS / COUNTERS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.stat{background:var(--ivory);padding:44px 26px;text-align:center;transition:background .4s var(--ease);}
.stat:hover{background:#fff;}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(2.2rem,4vw,3.4rem);color:var(--green-700);line-height:1;}
.stat b .plus{color:var(--gold-500);}
.stat span{display:block;margin-top:12px;font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);}
.bg-green .stats{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.14);}
.bg-green .stat{background:var(--green-800);}
.bg-green .stat:hover{background:var(--green-700);}
.bg-green .stat b{color:var(--gold-400);}
.bg-green .stat span{color:rgba(255,255,255,.7);}

/* ---------- 12. MARQUEE ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold);padding:20px 0;background:var(--green-900);}
.marquee-track{display:flex;width:max-content;animation:marq 34s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{
  font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.7rem);color:rgba(255,255,255,.28);
  padding:0 28px;display:inline-flex;align-items:center;gap:28px;white-space:nowrap;
}
.marquee-track span::after{content:"◆";font-size:.55em;color:var(--gold-500);}
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- 13. ROLE CARDS ---------- */
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.role{
  position:relative;background:#fff;padding:30px 24px;overflow:hidden;
  transition:background .45s var(--ease),transform .45s var(--ease);
}
.role::before{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--gold-500);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.role:hover{background:var(--green-800);}
.role:hover::before{transform:scaleX(1);}
.role i{
  font-style:normal;font-family:var(--font-display);font-size:.8rem;color:var(--gold-600);
  letter-spacing:.1em;display:block;margin-bottom:10px;
}
.role h4{margin:0;font-size:1.02rem;color:var(--green-900);transition:color .45s var(--ease);line-height:1.3;}
.role p{margin:8px 0 0;font-size:.84rem;color:var(--ink-mute);transition:color .45s var(--ease);}
.role:hover h4{color:#fff;}
.role:hover p{color:rgba(255,255,255,.72);}
.role:hover i{color:var(--gold-400);}

.pill-list{display:flex;flex-wrap:wrap;gap:10px;}
.pill-list li{
  border:1px solid var(--line);background:#fff;padding:10px 18px;font-size:.8rem;font-weight:600;
  color:var(--green-800);transition:.35s var(--ease);
}
.pill-list li:hover{background:var(--green-800);color:#fff;border-color:var(--green-800);transform:translateY(-3px);}
.bg-green .pill-list li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.88);}
.bg-green .pill-list li:hover{background:var(--gold-500);color:var(--green-900);border-color:var(--gold-500);}

/* ---------- 14. TIMELINE ---------- */
.timeline{position:relative;max-width:1000px;margin:0 auto;}
.timeline::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;
  background:linear-gradient(180deg,transparent,var(--line-gold) 8%,var(--line-gold) 92%,transparent);
}
.tl-item{position:relative;width:50%;padding:0 58px 60px 0;}
.tl-item:nth-child(even){margin-left:50%;padding:0 0 60px 58px;}
.tl-dot{
  position:absolute;right:-9px;top:14px;width:18px;height:18px;border-radius:50%;
  background:var(--ivory);border:2px solid var(--gold-500);
}
.tl-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--gold-500);transform:scale(0);transition:transform .5s var(--ease);}
.tl-item.in .tl-dot::after{transform:scale(1);}
.tl-item:nth-child(even) .tl-dot{right:auto;left:-9px;}
.tl-card{background:#fff;border:1px solid var(--line);padding:34px 32px;position:relative;transition:transform .45s var(--ease),box-shadow .45s var(--ease);}
.tl-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.tl-num{font-family:var(--font-display);font-size:3.1rem;line-height:1;color:var(--gold-500);opacity:.35;margin-bottom:6px;}
.tl-card h3{margin-bottom:10px;}
.tl-card p{margin:0;font-size:.95rem;}
.tl-item:nth-child(odd) .tl-card{text-align:right;}
.tl-item:nth-child(odd) .tl-card h3,.tl-item:nth-child(odd) .tl-num{text-align:right;}

/* ---------- 15. INDUSTRY ROWS ---------- */
.ind-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,5vw,70px);padding:clamp(40px,5vw,66px) 0;border-bottom:1px solid var(--line);}
.ind-row:last-child{border-bottom:0;}
.ind-row.flip .ind-media{order:2;}
.ind-media{position:relative;overflow:hidden;}
.ind-media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease);}
.ind-media:hover img{transform:scale(1.07);}
.ind-media::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.35);pointer-events:none;}
.ind-tag{
  position:absolute;left:0;top:26px;z-index:2;background:var(--green-800);color:var(--gold-400);
  font-size:.66rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;padding:9px 18px;
}
.ind-copy h2{font-size:clamp(1.55rem,2.8vw,2.35rem);}

/* ---------- 16. CTA BAND ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--green-900);color:#fff;text-align:center;padding:clamp(64px,8vw,112px) 0;}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 90% at 50% 0%,rgba(197,162,78,.2),transparent 65%);
}
.cta-band::after{
  content:"";position:absolute;left:50%;top:-40%;width:640px;height:640px;margin-left:-320px;
  border:1px solid rgba(197,162,78,.16);border-radius:50%;animation:spinSlow 40s linear infinite;
}
@keyframes spinSlow{to{transform:rotate(360deg);}}
.cta-band .container{position:relative;z-index:2;}
.cta-band h2{color:#fff;font-size:clamp(1.9rem,4.3vw,3.4rem);}
.cta-band p{color:rgba(255,255,255,.78);max-width:660px;margin-left:auto;margin-right:auto;}

.cta-split{
  display:grid;grid-template-columns:1.1fr .9fr;gap:0;background:var(--green-800);overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.cta-split .cs-copy{padding:clamp(36px,5vw,64px);}
.cta-split .cs-copy h2{color:#fff;}
.cta-split .cs-copy p{color:rgba(255,255,255,.76);}
.cta-split .cs-media{position:relative;min-height:320px;}
.cta-split .cs-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ---------- 17. PROCESS MINI ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.step{background:#fff;padding:34px 22px;position:relative;transition:.45s var(--ease);}
.step:hover{background:var(--green-800);}
.step b{font-family:var(--font-display);font-size:1.5rem;color:var(--gold-500);display:block;margin-bottom:12px;}
.step h4{font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;color:var(--green-900);transition:.45s;margin-bottom:8px;}
.step p{font-size:.85rem;margin:0;color:var(--ink-mute);transition:.45s;}
.step:hover h4{color:#fff;}
.step:hover p{color:rgba(255,255,255,.74);}

/* ---------- 18. DEPARTMENT FLOW ---------- */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.flow-node{
  display:inline-flex;align-items:center;gap:10px;padding:13px 22px;background:#fff;
  border:1px solid var(--line);font-weight:700;font-size:.82rem;color:var(--green-800);
  transition:.4s var(--ease);
}
.flow-node:hover{background:var(--green-800);color:#fff;transform:translateY(-4px);border-color:var(--green-800);}
.flow-arrow{color:var(--gold-500);font-size:1.1rem;line-height:1;}

/* ---------- 19. FORM ---------- */
.form-wrap{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold-500);padding:clamp(28px,4vw,52px);box-shadow:var(--shadow-md);}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1/-1;}
.field label{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--green-800);}
.field label .req{color:var(--gold-600);}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:.95rem;color:var(--ink);
  padding:14px 16px;background:var(--ivory);border:1px solid var(--line);border-radius:2px;
  transition:border-color .3s,background .3s,box-shadow .3s;width:100%;
}
.field textarea{min-height:130px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:#fff;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(197,162,78,.16);
}
.field .err{font-size:.74rem;color:#B4342B;display:none;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#C9584F;background:#FDF6F5;}
.field.invalid .err{display:block;}
.form-note{font-size:.8rem;color:var(--ink-mute);margin-top:18px;}
.form-ok{
  display:none;margin-top:22px;padding:18px 22px;background:#EDF6F0;border-left:3px solid var(--green-500);
  color:var(--green-700);font-size:.92rem;
}
.form-ok.show{display:block;animation:heroUp .5s var(--ease) forwards;}

/* contact tiles */
.ct-tile{background:#fff;border:1px solid var(--line);padding:30px 28px;transition:.4s var(--ease);}
.ct-tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.ct-tile .feat-ico{margin-bottom:18px;}
.ct-tile h4{margin-bottom:6px;font-family:var(--font-body);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);}
.ct-tile p{margin:0;font-family:var(--font-display);font-size:1.08rem;color:var(--green-900);word-break:break-word;}

/* ---------- 20. FAQ ---------- */
.faq{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;
  padding:24px 0;font-family:var(--font-display);font-size:1.08rem;color:var(--green-900);transition:color .3s;
}
.faq-q:hover{color:var(--gold-600);}
.faq-q .ic{position:relative;width:18px;height:18px;flex-shrink:0;}
.faq-q .ic::before,.faq-q .ic::after{content:"";position:absolute;background:var(--gold-500);transition:transform .35s var(--ease);}
.faq-q .ic::before{left:0;top:8px;width:18px;height:2px;}
.faq-q .ic::after{left:8px;top:0;width:2px;height:18px;}
.faq-item.open .faq-q .ic::after{transform:scaleY(0);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease);}
.faq-a p{padding-bottom:24px;margin:0;font-size:.95rem;}

/* ---------- 21. FOOTER ---------- */
.site-footer{background:var(--green-900);color:rgba(255,255,255,.7);position:relative;overflow:hidden;}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-500),transparent);}
.footer-top{display:grid;grid-template-columns:1.55fr 1fr 1.25fr 1.15fr;gap:46px;padding:clamp(52px,6vw,88px) 0 54px;}
.f-brand{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.f-brand img{width:60px;height:60px;}
.f-brand strong{font-family:var(--font-display);font-size:1.1rem;color:#fff;letter-spacing:.08em;display:block;line-height:1.1;}
.f-brand em{font-style:normal;font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-400);font-weight:700;}
.site-footer p{font-size:.9rem;color:rgba(255,255,255,.62);}
.f-title{font-family:var(--font-body);font-size:.7rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-400);margin-bottom:22px;}
.f-links li{margin-bottom:11px;}
.f-links a{font-size:.9rem;color:rgba(255,255,255,.68);transition:.3s var(--ease);display:inline-block;}
.f-links a:hover{color:var(--gold-400);transform:translateX(5px);}
.f-contact li{margin-bottom:16px;font-size:.88rem;display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.68);}
.f-contact svg{width:16px;height:16px;stroke:var(--gold-400);fill:none;stroke-width:1.6;flex-shrink:0;margin-top:4px;}
.f-contact a:hover{color:var(--gold-400);}
.f-social{display:flex;gap:10px;margin-top:22px;}
.f-social a{
  width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);
  transition:.35s var(--ease);
}
.f-social a svg{width:17px;height:17px;fill:rgba(255,255,255,.75);transition:fill .35s;}
.f-social a:hover{background:var(--gold-500);border-color:var(--gold-500);transform:translateY(-4px);}
.f-social a:hover svg{fill:var(--green-900);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;font-size:.79rem;color:rgba(255,255,255,.5);
}
.footer-bottom a:hover{color:var(--gold-400);}

/* ---------- 22. FLOATING BUTTONS ---------- */
.floating-social{position:fixed;right:18px;bottom:22px;z-index:900;display:flex;flex-direction:column;gap:11px;}
.fab{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-800);box-shadow:0 8px 22px rgba(6,32,24,.3);
  transition:transform .35s var(--ease),background .35s var(--ease);position:relative;
  opacity:0;transform:translateY(16px);animation:fabIn .5s var(--ease) forwards;
}
.fab:nth-child(1){animation-delay:1.1s;}
.fab:nth-child(2){animation-delay:1.2s;}
.fab:nth-child(3){animation-delay:1.3s;}
.fab:nth-child(4){animation-delay:1.4s;}
@keyframes fabIn{to{opacity:1;transform:none;}}
.fab svg{width:20px;height:20px;fill:#fff;}
.fab:hover{transform:translateY(-4px) scale(1.07);background:var(--gold-500);}
.fab:hover svg{fill:var(--green-900);}
.fab-wa{width:56px;height:56px;background:#25D366;order:-1;}
.fab-wa svg{width:27px;height:27px;fill:#fff;}
.fab-wa:hover{background:#1EBE59;}
.fab-wa:hover svg{fill:#fff;}
.fab-wa::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(37,211,102,.55);
  animation:pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing{0%{transform:scale(1);opacity:.85;}100%{transform:scale(1.65);opacity:0;}}
.fab-tip{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(8px);
  background:var(--green-900);color:#fff;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 12px;white-space:nowrap;opacity:0;pointer-events:none;transition:.3s var(--ease);
}
.fab:hover .fab-tip{opacity:1;transform:translateY(-50%) translateX(0);}

.back-to-top{
  position:fixed;left:18px;bottom:22px;z-index:900;width:46px;height:46px;border-radius:50%;
  background:var(--green-800);color:var(--gold-400);display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(6,32,24,.3);opacity:0;visibility:hidden;transform:translateY(14px);
  transition:.4s var(--ease);
}
.back-to-top svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;}
.back-to-top.show{opacity:1;visibility:visible;transform:none;}
.back-to-top:hover{background:var(--gold-500);color:var(--green-900);transform:translateY(-4px);}

/* ---------- 23. RESPONSIVE ---------- */
@media (max-width:1240px){
  .nav-list > li > a,.drop-toggle{padding:10px 10px;font-size:.71rem;letter-spacing:.1em;}
  .brand-text strong{font-size:1.04rem;}
}
@media (max-width:1180px){
  .hamburger{display:block;}
  .nav-cta{display:none;}
  .nav-cta-mobile{display:block;margin-top:22px;}
  .nav-cta-mobile .btn{width:100%;}
  .main-nav{
    position:fixed;top:0;right:0;bottom:0;width:min(88vw,380px);z-index:999;
    background:var(--green-900);padding:100px 30px 40px;overflow-y:auto;
    transform:translateX(105%);transition:transform .45s var(--ease);
    box-shadow:-20px 0 50px rgba(0,0,0,.3);
  }
  .nav-open .main-nav{transform:translateX(0);}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;}
  .nav-list > li{border-bottom:1px solid rgba(255,255,255,.09);}
  .nav-list > li > a,.drop-toggle{
    padding:16px 2px;font-size:.82rem;letter-spacing:.14em;color:#fff !important;width:100%;
    justify-content:space-between;
  }
  .nav-list > li > a::after,.drop-toggle::after{display:none;}
  .nav-list > li > a.active{color:var(--gold-400) !important;}
  .dropdown{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;
    border:0;border-top:0;padding:0;min-width:0;max-height:0;overflow:hidden;
    transition:max-height .4s var(--ease);
  }
  .has-dropdown.open .dropdown{max-height:420px;padding-bottom:12px;}
  .dropdown a{color:rgba(255,255,255,.72);border-left:1px solid rgba(197,162,78,.35);padding:11px 16px;font-size:.78rem;}
  .dropdown a:hover,.dropdown a.active{background:rgba(255,255,255,.05);color:var(--gold-400);padding-left:22px;}
  .nav-close{
    display:grid;place-items:center;position:absolute;top:24px;right:22px;width:44px;height:44px;
    font-size:2rem;line-height:1;color:#fff;border:1px solid rgba(255,255,255,.2);
  }
  .nav-close:hover{background:var(--gold-500);color:var(--green-900);border-color:var(--gold-500);}
  .g4{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .roles{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:980px){
  :root{--header-h:80px;}
  .g3{grid-template-columns:repeat(2,1fr);}
  .split,.ind-row,.cta-split{grid-template-columns:1fr;}
  .split.reverse .split-media,.ind-row.flip .ind-media{order:0;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .hero-strip .container{grid-template-columns:repeat(2,1fr);}
  .hero-stat{border-left:0;border-top:1px solid rgba(255,255,255,.12);}
  .hero-stat:nth-child(-n+2){border-top:0;}
  .hero-stat:nth-child(even){border-left:1px solid rgba(255,255,255,.12);}
  .footer-top{grid-template-columns:repeat(2,1fr);gap:38px;}
  .timeline::before{left:9px;}
  .tl-item,.tl-item:nth-child(even){width:100%;margin-left:0;padding:0 0 46px 44px;}
  .tl-item .tl-dot,.tl-item:nth-child(even) .tl-dot{left:0;right:auto;}
  .tl-item:nth-child(odd) .tl-card,.tl-item:nth-child(odd) .tl-card h3,.tl-item:nth-child(odd) .tl-num{text-align:left;}
  .img-stack{padding-bottom:54px;padding-right:0;}
  .img-stack .img-float{width:48%;right:0;}
  .badge-float{left:0;bottom:0;}
  .scroll-hint{display:none;}
}
@media (max-width:680px){
  body{font-size:15.8px;}
  .container{padding:0 20px;}
  .g2,.g3,.g4,.form-grid{grid-template-columns:1fr;}
  .roles{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:1fr;}
  .hero{min-height:auto;}
  .hero-inner{padding:calc(var(--header-h) + 46px) 0 54px;}
  .page-hero-inner{padding:calc(var(--header-h) + 50px) 0 58px;}
  .brand-mark{width:50px;height:50px;}
  .site-header.scrolled .brand-mark{width:44px;height:44px;}
  .brand-text strong{font-size:.95rem;letter-spacing:.06em;}
  .brand-text em{font-size:.48rem;letter-spacing:.24em;}
  .btn{padding:14px 22px;font-size:.71rem;}
  .btn-row .btn{width:100%;}
  .img-frame::before{inset:16px -16px -16px 16px;}
  .floating-social{right:12px;bottom:16px;gap:9px;}
  .fab{width:42px;height:42px;}
  .fab svg{width:18px;height:18px;}
  .fab-wa{width:52px;height:52px;}
  .fab-wa svg{width:25px;height:25px;}
  .back-to-top{left:12px;bottom:16px;width:42px;height:42px;}
  .fab-tip{display:none;}
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{justify-content:center;text-align:center;}
  .badge-float{position:static;max-width:none;margin-top:18px;}
  .img-stack{padding-bottom:0;}
  .img-stack .img-float{position:static;width:100%;margin-top:14px;border-width:0;}
}
@media (max-width:380px){
  .brand-text em{display:none;}
  .brand-mark{width:46px;height:46px;}
  .roles{grid-template-columns:1fr;}
  .container{padding:0 16px;}
}

/* ---------- 24. MOTION PREFERENCES ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  [data-reveal]{opacity:1 !important;transform:none !important;}
  .hero-inner > *{opacity:1;transform:none;}
}
body.nav-open{overflow:hidden;}

/* ---------- 25. ICON SPRITE HELPERS ---------- */
#hh-sprite{position:absolute;width:0;height:0;overflow:hidden;}
.btn svg,.link-arrow svg,.crumbs svg{fill:none;stroke:currentColor;stroke-width:2;}
.flow-node svg{width:16px;height:16px;fill:none;stroke:var(--gold-600);stroke-width:1.6;}
.ct-tile .feat-ico svg{stroke:var(--green-600);}
.drop-toggle svg{fill:none;stroke:currentColor;stroke-width:2.4;}

/* filled brand glyphs used inside stroke-styled icon wrappers */
use[href="#i-wa"],use[href="#i-fb"],use[href="#i-ig"],use[href="#i-in"]{stroke:none;}
.f-contact use[href="#i-wa"]{fill:var(--gold-400);}
.feat-ico use[href="#i-wa"]{fill:var(--green-600);}
.ct-tile:hover .feat-ico use[href="#i-wa"]{fill:var(--green-600);}
.feat:hover .feat-ico use[href="#i-wa"]{fill:var(--gold-400);}
.f-contact li a{word-break:break-word;}
.role h4{overflow-wrap:anywhere;}
.marquee-track span:last-child::after{content:"";}


/* ---------- 26. MOBILE NAV + PREMIUM IMAGE REFINEMENTS ---------- */
/* Keep photography crisp and polished without distorting subjects. */
.svc-media img,.ind-media img,.img-frame img,.img-stack img,.cs-media img{
  image-rendering:auto;
  backface-visibility:hidden;
}
.svc-media,.ind-media,.img-frame,.img-stack .img-main{
  border-radius:2px;
}
.svc-card,.ind-row,.img-frame,.img-stack .img-main{
  transform:translateZ(0);
}

@media (max-width:1180px){
  .site-header{z-index:1200;}
  .header-inner{gap:14px;}
  .main-nav{
    width:min(92vw,390px);
    z-index:1202;
    padding:90px 26px 34px;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .nav-backdrop{z-index:1190;}
  .nav-close{z-index:2;}
  .hamburger{
    display:block !important;
    z-index:1201;
    min-width:46px;
    width:46px;
    height:46px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:50%;
    background:rgba(7,35,27,.18);
    backdrop-filter:blur(8px);
  }
  .site-header.scrolled .hamburger{
    background:#fff;
    border-color:rgba(10,46,35,.14);
    box-shadow:0 6px 20px rgba(8,38,28,.10);
  }
  .nav-list > li > a,.drop-toggle{min-height:52px;}
  .dropdown a{min-height:44px;display:flex;align-items:center;}
}

@media (max-width:680px){
  :root{--header-h:74px;}
  .container{padding-left:18px;padding-right:18px;}
  .header-inner{min-height:74px;gap:10px;}
  .site-header.scrolled .header-inner{min-height:68px;}
  .brand{min-width:0;gap:9px;max-width:calc(100% - 56px);}
  .brand-mark{width:48px;height:48px;flex:0 0 48px;}
  .site-header.scrolled .brand-mark{width:44px;height:44px;flex-basis:44px;}
  .brand-text{min-width:0;max-width:156px;}
  .brand-text strong{
    font-size:.78rem;
    line-height:1.08;
    letter-spacing:.045em;
    white-space:normal;
  }
  .brand-text em{
    font-size:.42rem;
    letter-spacing:.17em;
    white-space:normal;
    line-height:1.25;
  }
  .hamburger{margin-left:auto;width:44px;height:44px;min-width:44px;}
  .hamburger span{left:10px;width:22px;}
  .hamburger span:nth-child(1){top:14px;}
  .hamburger span:nth-child(2){top:20px;}
  .hamburger span:nth-child(3){top:26px;}
  .main-nav{width:min(94vw,360px);padding:82px 22px 28px;}
  .nav-close{top:18px;right:18px;width:42px;height:42px;}
  .nav-list > li > a,.drop-toggle{padding:14px 2px;font-size:.76rem;letter-spacing:.11em;}
  .hero-media img,.page-hero .hero-media img{object-position:center center;}
  .hero h1{font-size:clamp(2.15rem,11vw,3.25rem);}
  .hero .brand-line{font-size:.62rem;letter-spacing:.22em;line-height:1.55;}
  .hero .hero-sub{font-size:1.08rem;}
  .hero p.lead{font-size:.94rem;line-height:1.65;}
  .hero-strip .container{grid-template-columns:1fr 1fr;}
  .hero-stat{padding:20px 12px;}
  .hero-stat span{font-size:.58rem;letter-spacing:.12em;line-height:1.45;}
  .svc-media{aspect-ratio:16/10;}
  .ind-media img{aspect-ratio:16/10;}
}

@media (max-width:420px){
  .brand-text{max-width:132px;}
  .brand-text strong{font-size:.72rem;}
  .brand-text em{display:none;}
  .container{padding-left:15px;padding-right:15px;}
  .main-nav{width:100%;max-width:none;}
  .hero-strip .container{padding-left:8px;padding-right:8px;}
}

@media (max-width:340px){
  .brand-text{max-width:112px;}
  .brand-text strong{font-size:.67rem;letter-spacing:.025em;}
  .brand-mark{width:42px;height:42px;flex-basis:42px;}
  .hamburger{width:42px;height:42px;min-width:42px;}
}

/* ---------- 27. FINAL HEADER / MOBILE NAV / OFFICIAL LOGO FIX ---------- */
/* Important: do not keep a transform on the header. A transformed ancestor changes
   the containing block of position:fixed descendants and can clip the mobile drawer. */
.site-header{
  transform:none !important;
  opacity:0;
  background:rgba(255,255,255,.97);
  box-shadow:0 8px 34px rgba(8,38,28,.11);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.site-header.ready{animation:hhHeaderReveal .5s ease forwards !important;}
@keyframes hhHeaderReveal{to{opacity:1;}}
.site-header::before{display:none !important;}
.header-inner{min-height:96px;gap:22px;}
.site-header.scrolled .header-inner{min-height:82px;}
.brand{min-width:0;display:flex;align-items:center;flex-shrink:0;}
.brand-logo{
  display:block;
  width:220px;
  height:auto;
  max-height:82px;
  object-fit:contain;
  filter:none;
  transition:width .35s var(--ease),max-height .35s var(--ease);
}
.site-header.scrolled .brand-logo{width:195px;max-height:70px;}
/* Official transparent logo replaces the duplicated text lockup in the header. */
.brand-text,.brand-mark{display:none !important;}
.nav-list > li > a,.drop-toggle{color:var(--green-800);}
.nav-list > li > a:hover,.drop-toggle:hover,.nav-list > li > a.active{color:var(--gold-600);}
.hamburger{border-color:rgba(10,46,35,.16) !important;background:#fff !important;box-shadow:0 6px 18px rgba(8,38,28,.08);}
.hamburger span,.site-header.scrolled .hamburger span{background:var(--green-800) !important;}

/* Local AI-enhanced premium photography: keep it cinematic and consistent. */
.hero-media img,.page-hero .hero-media img{filter:saturate(.98) contrast(1.03);}
.svc-media img,.ind-media img,.img-frame img,.img-stack img,.cs-media img{
  filter:saturate(.96) contrast(1.025);
}
.svc-media::after,.ind-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 54%,rgba(7,35,27,.14));
}

@media (max-width:1180px){
  .header-inner{min-height:84px;gap:14px;}
  .site-header.scrolled .header-inner{min-height:78px;}
  .brand-logo{width:190px;max-height:72px;}
  .site-header.scrolled .brand-logo{width:176px;max-height:66px;}
  .main-nav{
    position:fixed !important;
    top:0 !important;right:0 !important;bottom:auto !important;left:auto !important;
    width:min(92vw,410px) !important;
    height:100vh !important;height:100dvh !important;max-height:100dvh !important;
    margin:0 !important;
    padding:94px 28px max(34px,env(safe-area-inset-bottom)) !important;
    overflow-y:auto !important;overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:linear-gradient(180deg,#082a20 0%,#0a3428 100%) !important;
    box-shadow:-22px 0 55px rgba(0,0,0,.36);
    transform:translate3d(105%,0,0) !important;
    visibility:hidden;
    transition:transform .38s var(--ease),visibility .38s !important;
    z-index:1302 !important;
  }
  .nav-open .main-nav{
    transform:translate3d(0,0,0) !important;
    visibility:visible;
  }
  .nav-backdrop{z-index:1290 !important;}
  .nav-open .nav-backdrop{opacity:1;visibility:visible;}
  .nav-close{position:fixed !important;top:max(18px,env(safe-area-inset-top)) !important;right:20px !important;z-index:1304 !important;}
  .nav-list{width:100%;padding:0 0 24px;margin:0;}
  .nav-list > li > a,.drop-toggle{
    color:#fff !important;
    min-height:54px;
    font-size:.82rem;
    line-height:1.35;
  }
  .nav-list > li > a.active{color:var(--gold-400) !important;}
  .dropdown a{color:rgba(255,255,255,.78) !important;line-height:1.4;}
  .nav-cta-mobile{padding-bottom:18px;}
}

@media (max-width:680px){
  :root{--header-h:78px;}
  .header-inner{min-height:78px !important;gap:8px;padding-top:6px;padding-bottom:6px;}
  .site-header.scrolled .header-inner{min-height:72px !important;}
  .brand{max-width:calc(100% - 56px) !important;}
  .brand-logo{width:158px !important;max-width:100%;max-height:64px !important;}
  .site-header.scrolled .brand-logo{width:148px !important;max-height:58px !important;}
  .hamburger{width:44px !important;height:44px !important;min-width:44px !important;margin-left:auto !important;}
  .main-nav{
    left:0 !important;right:0 !important;
    width:100vw !important;max-width:none !important;
    padding:86px 20px max(30px,env(safe-area-inset-bottom)) !important;
  }
  .nav-list > li > a,.drop-toggle{font-size:.8rem !important;padding:15px 2px !important;letter-spacing:.09em !important;}
  .dropdown a{font-size:.76rem !important;padding:12px 15px !important;}
  .has-dropdown.open .dropdown{max-height:520px !important;}
}

@media (max-width:390px){
  .container{padding-left:14px;padding-right:14px;}
  .brand-logo{width:145px !important;}
  .site-header.scrolled .brand-logo{width:138px !important;}
  .main-nav{padding-left:18px !important;padding-right:18px !important;}
}

@media (max-width:330px){
  .brand-logo{width:130px !important;}
  .hamburger{width:40px !important;height:40px !important;min-width:40px !important;}
}


/* ---------- 28. USER LOGO LOADER + MOBILE NAV HARD FIX ---------- */
/* Full official user logo on loader (transparent, HD). */
.pl-inner{width:min(86vw,420px);padding:26px 20px;}
.pl-logo{
  display:block;width:min(300px,76vw);height:auto;max-height:175px;object-fit:contain;
  margin:0 auto 22px;filter:drop-shadow(0 12px 30px rgba(0,0,0,.22));
  animation:hhLoaderLogo 2.1s ease-in-out infinite;
}
@keyframes hhLoaderLogo{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-6px) scale(1.015);}}
.pl-bar{width:min(220px,58vw);}

/* Keep every generated/local photo crisp and visible. */
img{max-width:100%;}
.hero-media img,.page-hero .hero-media img,.svc-media img,.ind-media img,.img-frame img,.img-stack img,.cs-media img{
  display:block;background:#edf1ee;
}

/* Mobile menu must sit ABOVE the page, never behind a blurred backdrop. */
.site-header{z-index:3000 !important;isolation:isolate;}
@media (max-width:1180px){
  .site-header,.site-header.scrolled{
    background:#fff !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .nav-backdrop{
    display:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    pointer-events:none !important;
  }
  .main-nav{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    max-width:none !important;
    height:100vh !important;
    height:100dvh !important;
    max-height:none !important;
    margin:0 !important;
    padding:100px 22px max(30px,env(safe-area-inset-bottom)) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    background:#ffffff !important;
    box-shadow:none !important;
    transform:translate3d(100%,0,0) !important;
    opacity:1 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:transform .34s cubic-bezier(.22,.8,.25,1),visibility .34s !important;
    z-index:3100 !important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }
  .main-nav::before{
    content:"";position:absolute;left:20px;top:18px;width:180px;height:66px;
    background:url('assets/logo/hope-harbor-logo-hd.png') left center/contain no-repeat;
    pointer-events:none;
  }
  body.nav-open .main-nav{
    transform:translate3d(0,0,0) !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  body.nav-open{overflow:hidden !important;}
  .nav-close{
    display:grid !important;place-items:center !important;
    position:absolute !important;top:max(22px,env(safe-area-inset-top)) !important;right:20px !important;
    width:46px !important;height:46px !important;border-radius:50% !important;
    color:#0a3428 !important;background:#f5f2e9 !important;border:1px solid rgba(10,52,40,.14) !important;
    font-size:2rem !important;line-height:1 !important;z-index:3105 !important;
    pointer-events:auto !important;cursor:pointer;
  }
  .nav-list{position:relative;z-index:3101;width:100% !important;margin:0 !important;padding:0 0 28px !important;}
  .nav-list > li{border-bottom:1px solid rgba(10,52,40,.11) !important;}
  .nav-list > li > a,.drop-toggle{
    color:#0a3428 !important;background:transparent !important;
    min-height:55px !important;width:100% !important;padding:16px 4px !important;
    font-size:.84rem !important;font-weight:800 !important;letter-spacing:.09em !important;
    pointer-events:auto !important;touch-action:manipulation !important;
  }
  .nav-list > li > a:hover,.nav-list > li > a.active,.drop-toggle:hover{
    color:#a47f2f !important;background:#faf8f2 !important;
  }
  .drop-toggle svg{stroke:currentColor !important;}
  .dropdown{
    position:static !important;background:#f8f7f2 !important;border:0 !important;
    border-radius:10px !important;box-shadow:none !important;margin:0 0 8px !important;
  }
  .dropdown a{
    color:#315247 !important;background:transparent !important;border-left:2px solid rgba(181,143,54,.42) !important;
    font-size:.78rem !important;padding:12px 16px !important;pointer-events:auto !important;touch-action:manipulation !important;
  }
  .dropdown a:hover,.dropdown a.active{color:#8c6b25 !important;background:#fff !important;}
  .nav-cta-mobile{border-bottom:0 !important;margin-top:18px !important;}
  .nav-cta-mobile .btn{color:#082a20 !important;background:linear-gradient(135deg,#d8b35a,#b98c2d) !important;justify-content:center !important;}
}
@media (max-width:680px){
  .pl-logo{width:min(260px,78vw);}
  .main-nav{padding:96px 18px max(26px,env(safe-area-inset-bottom)) !important;}
  .main-nav::before{left:18px;top:18px;width:158px;height:62px;}
  .nav-close{right:16px !important;}
}
.fab-call{background:#0d6efd;}
.fab-call:hover{background:#0b5ed7;}
.fab-call:hover svg{fill:#fff;}

/* hero framing fix */
.page-hero .hero-media img,.hero .hero-media img{object-position:center center;}
@media (max-width: 767px){
  .hero{min-height:88svh;}
  .page-hero{min-height:360px;}
  .hero-media img,.page-hero .hero-media img{height:100%;object-position:center center;transform:scale(1.01);}
}


/* ===== FINAL SERVICE-MATCHED IMAGE / FACE-SAFE FIX ===== */
.hero-media{background:var(--green-900);}
.hero-media img,
.page-hero .hero-media img{
  object-position:center 28% !important;
  transform:none !important;
}

/* Desktop heroes: show complete service photo on the right instead of cutting faces. */
@media (min-width: 769px){
  .hero-media img,
  .page-hero .hero-media img{
    object-fit:contain !important;
    object-position:right center !important;
    width:72% !important;
    margin-left:auto;
  }
  .hero-media::after,
  .page-hero .hero-media::after{
    background:linear-gradient(90deg,
      rgba(7,35,27,.98) 0%,
      rgba(7,35,27,.92) 32%,
      rgba(7,35,27,.56) 58%,
      rgba(7,35,27,.18) 100%) !important;
  }
}

/* Service cards use the native 4:3 photography ratio to avoid face cropping. */
.svc-media{aspect-ratio:4/3 !important;}
.svc-media img,
.ind-media img,
.img-stack .img-main,
.img-stack .img-float,
.img-frame img,
.cs-media img{
  object-position:center 24% !important;
}
.svc-card:hover .svc-media img,
.ind-media:hover img{
  transform:scale(1.025) !important;
}

@media (max-width: 768px){
  .hero-media img,
  .page-hero .hero-media img{
    width:100% !important;
    margin:0 !important;
    object-fit:cover !important;
    object-position:center 24% !important;
  }
  .svc-media{aspect-ratio:4/3 !important;}
  .ind-media img{aspect-ratio:4/3 !important;}
}

/* Remove service numbering on cards */
.svc-num{display:none !important;}

/* Footer secondary contact number */
.f-contact .footer-secondary-phone{white-space:nowrap;}
.footer-phone-sep{opacity:.55;margin:0 5px;}
@media (max-width:680px){
  .f-contact li:has(.footer-secondary-phone){align-items:flex-start;flex-wrap:wrap;}
}

/* Footer single-icon two-phone layout */
.f-contact li.footer-phone-group{align-items:flex-start;}
.f-contact li.footer-phone-group > svg{flex:0 0 auto;margin-top:2px;}
.f-contact .footer-phone-lines{display:flex;flex-direction:column;gap:6px;align-items:flex-start;line-height:1.35;}
.f-contact .footer-phone-lines a{display:block;white-space:nowrap;}
.footer-phone-sep{display:none !important;}

/* Contact page dual phone numbers */
.contact-phone-list{display:flex;flex-direction:column;gap:8px;align-items:center;margin:0;}
.contact-phone-list a{display:block;}