/* ==========================================================================
   Shared inner-page styles (About, Director's Message, …) — 2026-11.
   One set of fonts and sizes for every inner page: Playfair Display headings,
   DM Sans text, vw-based clamps so proportions match the mockups at all widths.
   Loaded from layout/master.blade.php.
   ========================================================================== */
:root{
  /* brand colours — the same everywhere (header navy, button green, footer deep green, gold) */
  --hz-navy:#10336b;--hz-navy-dark:#0b1d3a;--hz-green:#0f4a35;--hz-green-dark:#0b3a29;--hz-leaf:#57a24d;--hz-leaf-light:#7cc66f;--hz-green-deep:#0f4a35;
  --hz-green-soft:#eaf4e6;--hz-green-tint:#dcedd5;--hz-gold:#57a24d;--hz-ink:#15201a;--hz-muted:#535b56;
  /* one type scale for every page: sized for a laptop (~1000-1440px) and capped on big screens */
  --fs-h1:clamp(30px,1.4vw + 22px,50px);--fs-h2:clamp(24px,.9vw + 18px,36px);--fs-cta:clamp(20px,.6vw + 15px,28px);
  --fs-h3:clamp(16.5px,.4vw + 13.5px,21px);--fs-h4:clamp(15px,.25vw + 12.5px,18px);--fs-stat:clamp(20px,.7vw + 13px,28px);
  --fs-lead:clamp(14.5px,.2vw + 13px,17.5px);--fs-body:clamp(14px,.15vw + 12.5px,16px);--fs-sm:clamp(13px,.1vw + 12px,14.5px);
  --fs-xs:clamp(11.5px,.08vw + 10.8px,13px);--fs-eyebrow:clamp(11.5px,.1vw + 10.5px,13px);--fs-btn:clamp(13.5px,.15vw + 12px,15.5px);
}
.pg{--pg-green:var(--hz-green-deep);--pg-leaf:var(--hz-green);--pg-btn:var(--hz-leaf-light);--pg-gold:var(--hz-leaf);--pg-ink:var(--hz-ink);--pg-muted:var(--hz-muted);--pg-cream:#f8f4ee;font-family:'DM Sans',sans-serif;color:var(--pg-ink)}
.pg *{box-sizing:border-box}
.pg-wrap{width:90%;max-width:1320px;margin:0 auto}

/* type scale */
.pg-eyebrow{display:flex;align-items:center;gap:clamp(8px,.9vw,13px);margin:0 0 clamp(6px,.7vw,10.1px);font-weight:700;font-size:var(--fs-eyebrow);letter-spacing:.09em;text-transform:uppercase;color:var(--pg-leaf)}
.pg-eyebrow--lead:before{content:"";width:clamp(14px,1.6vw,23px);height:2px;background:var(--pg-leaf)}
.pg-eyebrow--trail-sm:after{content:"";width:clamp(14px,1.6vw,23px);height:2px;background:var(--pg-leaf)}
.pg-eyebrow--trail:after{content:"";width:clamp(40px,7.8vw,112.3px);height:1.5px;background:var(--pg-leaf)}
.pg-eyebrow--center{justify-content:center}
.pg-eyebrow--center:before,.pg-eyebrow--center:after{content:"";width:clamp(18px,2.5vw,36px);height:1.5px;background:var(--pg-leaf)}
.pg-eyebrow--gold{color:var(--pg-ink)}
.pg-eyebrow--gold:before,.pg-eyebrow--gold:after{background:var(--pg-gold);width:clamp(24px,3.3vw,47.5px)}
.pg-h2{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:var(--fs-h2);line-height:1.08;color:var(--pg-ink)}
.pg-h2 em{font-style:normal;color:var(--pg-green)}
.pg-h2--rule:after{content:"";display:block;width:clamp(36px,5vw,72px);height:3px;margin:clamp(8px,1vw,14.4px) auto 0;border-radius:3px;background:var(--pg-leaf)}
.pg-h3{margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:var(--fs-h3);line-height:1.15;color:var(--pg-ink)}
.pg-p{margin:0;font-size:var(--fs-body);line-height:1.5;color:var(--pg-muted)}
.pg-p--sm{font-size:var(--fs-sm);}

/* buttons */
.pg-btn-outline{display:inline-flex;align-items:center;gap:clamp(8px,1vw,14.4px);padding:clamp(8px,.85vw,12.2px) clamp(18px,2.2vw,31.7px);border:1.5px solid var(--pg-green);border-radius:clamp(10px,1vw,14.4px);font-weight:700;font-size:var(--fs-btn);color:var(--pg-ink);transition:background .2s,color .2s}
.pg-btn-outline:hover{background:var(--pg-green);color:#fff}
.pg-btn{display:inline-flex;align-items:center;gap:clamp(8px,.9vw,13px);padding:clamp(10px,.75vw,10.8px) clamp(18px,1.6vw,23px);border-radius:8px;background:var(--hz-green);font-weight:700;font-size:var(--fs-btn);color:#fff;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.16);transition:background .2s}
.pg-btn:hover{background:var(--hz-green-dark);color:#fff}
.pg-btn svg,.pg-btn-outline svg{width:clamp(14px,1.2vw,17.3px);height:clamp(14px,1.2vw,17.3px)}

/* title banner */
.pg-hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(230px,21vw,302.4px);background:var(--hz-navy-dark) url('../images/listings-parallax.jpg') center 60%/cover no-repeat}
.pg-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,29,58,.92) 0%,rgba(11,29,58,.78) 30%,rgba(11,29,58,.25) 58%,rgba(11,29,58,0) 80%)}
.pg-hero .pg-wrap{position:relative;z-index:1;padding:clamp(22px,2.6vw,37.4px) 0 clamp(26px,3.6vw,51.8px)}
.pg-crumbs{display:flex;align-items:center;gap:clamp(6px,.7vw,10.1px);margin:0 0 clamp(10px,1.4vw,20.2px);font-size:var(--fs-sm);color:#fff}
.pg-crumbs a{color:#fff;font-size:inherit;;line-height:inherit}.pg-crumbs a:hover{color:#9fd18d}
.pg-crumbs svg{width:clamp(10px,.9vw,13px);height:clamp(10px,.9vw,13px)}
.pg-hero h1{margin:0 0 clamp(10px,1.3vw,18.7px);font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:var(--fs-h1);line-height:1.02;color:#fff}
.pg-hero p{max-width:21.5em;margin:0;font-size:var(--fs-lead);line-height:1.4;color:#eef2f4}
.pg-hero p:after{content:"";display:block;width:clamp(36px,5vw,72px);height:3px;margin-top:clamp(12px,1.5vw,21.6px);border-radius:3px;background:var(--pg-btn)}
/* line between the title and the subtitle instead of under it */
.pg-hero--rule-top p:after{content:none}
.pg-hero--rule-top p:before{content:"";display:block;width:clamp(36px,5vw,72px);height:3px;margin-bottom:clamp(12px,1.5vw,21.6px);border-radius:3px;background:var(--pg-btn)}

/* call-to-action band, full width (About) */
.pg-cta{position:relative;overflow:hidden;margin-top:clamp(-30px,-2.4vw,-14px);padding:clamp(26px,3.2vw,46.1px) 0 clamp(22px,2.6vw,37.4px);background:linear-gradient(180deg,#14583f 0%,#0d3f2d 60%,#0f4a35 100%);color:#fff;clip-path:polygon(0 clamp(14px,2.4vw,34.6px),30% 6%,62% 0,100% 0,100% 100%,0 100%)}
.pg-cta-sky{position:absolute;left:0;right:0;bottom:0;width:100%;height:78%;color:#fff;opacity:.07;pointer-events:none}
.pg-cta .pg-wrap{position:relative;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:clamp(16px,3vw,43.2px);width:89%}
.pg-cta-ico{width:clamp(48px,6.3vw,90.7px);height:clamp(48px,6.3vw,90.7px);color:#fff}
.pg-cta h2{margin:0;padding-right:clamp(16px,3vw,43.2px);border-right:1px solid rgba(255,255,255,.55);font-family:'DM Sans',sans-serif;font-weight:500;font-size:var(--fs-cta);line-height:1.12;color:#fff}
.pg-cta p{margin:0;max-width:32em;font-size:var(--fs-body);line-height:1.55;color:#e8f0ea}

/* call-to-action card with a photo (Director's Message) */
.pg-cta2{padding:clamp(18px,1.6vw,23px) 0 clamp(20px,1.8vw,25.9px)}
.pg-cta2-card{position:relative;overflow:hidden;display:grid;grid-template-columns:39% 1fr;align-items:center;width:93.5%;max-width:1320px;margin:0 auto;border-radius:clamp(16px,2vw,28.8px);background:linear-gradient(100deg,#14583f 0%,#0d3f2d 55%,#0f4a35 100%);color:#fff;box-shadow:0 14px 34px rgba(15,74,53,.22)}
.pg-cta2-img{align-self:stretch;min-height:clamp(150px,15vw,216px);background:#2d5a3a center/cover no-repeat;clip-path:ellipse(100% 120% at 0% 50%)}
.pg-cta2-swoosh{position:absolute;top:0;bottom:0;left:calc(39% - clamp(40px,6vw,86.4px));width:clamp(70px,9vw,129.6px);pointer-events:none}
.pg-cta2-swoosh svg{display:block;width:100%;height:100%}
.pg-cta2-body{position:relative;z-index:1;padding:clamp(16px,2vw,28.8px) clamp(18px,3vw,43.2px) clamp(16px,2vw,28.8px) clamp(14px,2.2vw,31.7px)}
.pg-cta2 h2{margin:0 0 clamp(8px,.9vw,13px);font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:var(--fs-cta);line-height:1.12;color:#fff}
.pg-cta2 p{margin:0 0 clamp(12px,1.4vw,20.2px);max-width:30em;font-size:var(--fs-body);line-height:1.45;color:#e8f0ea}
.pg-cta2-sky{position:absolute;right:0;bottom:0;width:clamp(120px,18vw,259.2px);height:70%;color:#cfe6c4;opacity:.35;pointer-events:none}

/* pill eyebrow with side lines (Services) */
.pg-eyebrow--pill{justify-content:center;gap:clamp(8px,.9vw,13px)}
.pg-eyebrow--pill span{display:inline-flex;align-items:center;height:clamp(24px,2.3vw,33.1px);padding:0 clamp(12px,1.5vw,21.6px);border-radius:999px;background:var(--hz-green-soft);color:var(--hz-green-dark)}
.pg-eyebrow--pill:before,.pg-eyebrow--pill:after{content:"";width:clamp(36px,7vw,100.8px);height:1.5px;background:var(--pg-leaf)}
.pg-sub{max-width:36em;margin:clamp(8px,1vw,14.4px) auto 0;font-size:var(--fs-lead);line-height:1.6;color:var(--pg-muted)}

/* call-to-action strip, rounded (Services) */
.pg-cta3{padding:clamp(20px,2.2vw,31.7px) 0 clamp(24px,2.4vw,34.6px)}
.pg-cta3-card{position:relative;overflow:hidden;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:clamp(14px,2.4vw,34.6px);width:90%;max-width:1320px;margin:0 auto;padding:clamp(14px,1.7vw,24.5px) clamp(18px,3vw,43.2px) clamp(14px,1.7vw,24.5px) clamp(22px,4.4vw,63.4px);border-radius:clamp(14px,1.7vw,24.5px);background:linear-gradient(100deg,#0f4a35 0%,#14583f 60%,#0f4a35 100%);color:#fff;box-shadow:0 14px 34px rgba(15,74,53,.22)}
.pg-cta3-card:after{content:"";position:absolute;right:16%;bottom:0;width:30%;height:70%;background:linear-gradient(0deg,rgba(255,255,255,.05),transparent);clip-path:polygon(0 100%,0 40%,8% 40%,8% 20%,16% 20%,16% 55%,26% 55%,26% 10%,36% 10%,36% 45%,48% 45%,48% 25%,60% 25%,60% 60%,72% 60%,72% 30%,84% 30%,84% 50%,100% 50%,100% 100%);pointer-events:none}
.pg-cta3-ico{width:clamp(40px,5.6vw,80.6px);height:clamp(40px,5.6vw,80.6px);padding-right:clamp(14px,2.4vw,34.6px);border-right:1.5px solid rgba(255,255,255,.6);box-sizing:content-box;color:#fff}
.pg-cta3 h2{margin:0;padding-right:clamp(14px,2.4vw,34.6px);border-right:1px solid rgba(255,255,255,.45);font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:var(--fs-cta);line-height:1.15;color:#fff}
.pg-cta3 p{position:relative;margin:0;max-width:26em;font-size:var(--fs-body);line-height:1.55;color:#e8f0ea}
.pg-cta3 .pg-btn{position:relative;border-radius:999px}

@media (max-width:992px){
  .pg-hero .pg-wrap{width:100%;padding-left:32px;padding-right:32px}
  .pg-wrap,.pg-cta .pg-wrap{width:auto;padding-left:32px;padding-right:32px}
  .pg-h2{}
  .pg-h3{}
  .pg-p{}
  .pg-p--sm{}
  .pg-eyebrow{}
    .pg-cta .pg-wrap{grid-template-columns:auto 1fr;row-gap:16px}
  .pg-cta h2{border-right:0;padding-right:0}
  .pg-cta p{grid-column:1 / -1}
  .pg-cta .pg-btn{grid-column:1 / -1;justify-self:start}
  .pg-cta2-card{width:auto;margin:0 32px;grid-template-columns:34% 1fr}
  .pg-cta2-swoosh{display:none}
  .pg-cta2-img{clip-path:none}
  .pg-cta2-body{padding:22px 24px}
  .pg-cta3-card{width:auto;margin:0 32px;grid-template-columns:auto 1fr;row-gap:14px;padding:24px 26px}
  .pg-cta3 h2{border-right:0;padding-right:0;}
  .pg-cta3 p{grid-column:1 / -1;max-width:none}
  .pg-cta3 .pg-btn{grid-column:1 / -1;justify-self:start}
  .pg-cta3-ico{width:48px;height:48px;padding-right:18px}
  .pg-sub{}
  .pg-cta2 h2{}
  .pg-cta2 p{}
}
@media (max-width:640px){
  .pg-hero .pg-wrap{padding-left:18px;padding-right:18px}
  .pg-wrap,.pg-cta .pg-wrap{padding-left:18px;padding-right:18px}
  .pg-h2{}
  .pg-hero{min-height:240px;background-position:70% 60%}
  .pg-hero:before{background:linear-gradient(90deg,rgba(11,29,58,.9),rgba(11,29,58,.55))}
    .pg-cta2-card{margin:0 18px;grid-template-columns:1fr}
  .pg-cta2-img{min-height:170px;clip-path:ellipse(120% 100% at 50% 0%)}
  .pg-cta2-swoosh{display:none}
  .pg-cta2-body{padding:20px 20px 24px}
  .pg-cta3-card{margin:0 18px;padding:22px 20px}
  .pg-eyebrow--pill:before,.pg-eyebrow--pill:after{width:28px}
}

/* buttons sitting on the dark green bands: white so they stay visible (same shape as every other button) */
.pg-cta .pg-btn,.pg-cta2 .pg-btn,.pg-cta3 .pg-btn{background:#fff;color:var(--hz-green)}
.pg-cta .pg-btn:hover,.pg-cta2 .pg-btn:hover,.pg-cta3 .pg-btn:hover{background:var(--hz-green-soft);color:var(--hz-green)}

/* every icon from App\Support\Icons draws its lines exactly 2px thick on screen, whatever size it is shown at,
   so small and large icons look the same weight on every page */
svg.hz-i{overflow:visible}
svg.hz-i *{vector-effect:non-scaling-stroke;stroke-width:2px}