/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 01 2026 | 23:07:20 */
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700&family=Sulphur+Point:wght@400;500;600;700&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0&display=swap');

/* ================================================================
   HSE ELEMENTS | OUR APPROACH
   Complete integrated stylesheet, independent of the About page.
   Dark inverse of the About hero; no appended patch overrides.
   ================================================================ */

/* 01 | FOUNDATION AND WORDPRESS RESET */
body:has(.hse-approach) { margin-top:0; }
body:has(.hse-approach) .wp-site-blocks,
body:has(.hse-approach) .wp-site-blocks > main,
body:has(.hse-approach) .wp-block-post-content,
body:has(.hse-approach) .entry-content { margin-block-start:0; padding-block-start:0; }
body:has(.hse-approach) .wp-site-blocks > header:has(.hse-site-header) + * { margin-block-start:0; }
body:has(.hse-approach) .wp-block-post-content > .wp-block-html:has(.hse-approach) { margin-block-start:0; padding-block-start:0; }
.hse-approach {
  --hap-amber:#FFC84A;
  --hap-deep-amber:#D89B2B;
  --hap-bright-amber:#FFD578;
  --hap-light-amber:#FAD995;
  --hap-black:#000;
  --hap-graphite:#111;
  --hap-charcoal:#242424;
  --hap-offwhite:#F7F7F5;
  --hap-porcelain:#FBF6EF;
  --hap-white:#FFF;
  --hap-ink:#151515;
  --hap-muted:#565653;
  --hap-radius:14px;
  --hap-radius-lg:18px;
  --hap-ease:cubic-bezier(.22,1,.36,1);
  --hap-gutter:clamp(20px,4.6vw,86px);
  --hap-max:1520px;
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:none;
  margin:0;
  overflow-x:clip;
  background:var(--hap-black);
  color:var(--hap-ink);
  font-family:'Sulphur Point',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hse-approach,.hse-approach *,.hse-approach *::before,.hse-approach *::after { box-sizing:border-box; }
.hse-approach > section { margin:0; }
.hse-approach img { display:block; max-width:100%; }
.hse-approach p { margin:0; }
.hse-approach a { text-decoration:none; -webkit-tap-highlight-color:transparent; }
.hse-approach a:focus-visible,.hse-approach label:focus-visible { outline:3px solid var(--hap-amber); outline-offset:4px; }
.hse-approach .material-symbols-rounded {
  display:inline-block;
  font-family:'Material Symbols Rounded';
  font-weight:normal;
  font-style:normal;
  font-size:24px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  white-space:nowrap;
  direction:ltr;
  -webkit-font-feature-settings:'liga';
  font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
}
.hse-approach-container { width:min(calc(100% - var(--hap-gutter)*2),var(--hap-max)); margin-inline:auto; }
.hse-approach-section { padding-block:clamp(78px,8.5vw,138px); }
.hse-approach .hse-approach-kicker { margin:0 0 22px; font:700 clamp(11px,.8vw,13px)/1.4 'Oxanium',sans-serif; text-transform:uppercase; letter-spacing:.16em; }
.hse-approach h1,.hse-approach h2,.hse-approach h3 { margin:0; font-family:'Oxanium',Arial,sans-serif; letter-spacing:-.045em; text-wrap:balance; }
.hse-approach h2 { font-size:clamp(36px,4vw,66px); line-height:1.04; font-weight:500; }
.hse-approach h3 { font-weight:600; }
.hse-approach h2 span { color:#686862; }
.hse-approach :is(h1,h2) em { font-style:normal; }
.hse-approach :is(#understanding-your-workplace,#our-principles,#work-with-us) { scroll-margin-top:clamp(90px,10vw,125px); }

/* 02 | BUTTONS: SOFT LIFT, RESET ON PRESS, LEFT-TO-RIGHT PRESSED REVEAL */
.hse-approach .hse-approach-btn {
  --hap-pressed-fill:var(--hap-white);
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  min-height:49px;
  width:fit-content;
  max-width:100%;
  padding:12px 20px;
  border:1px solid transparent;
  border-radius:10px;
  overflow:hidden;
  vertical-align:middle;
  color:var(--hap-black);
  font:700 12px/1.25 'Oxanium',Arial,sans-serif;
  letter-spacing:.015em;
  text-transform:uppercase;
  text-align:center;
  cursor:pointer;
  transform:translate3d(0,0,0);
  transition:transform .27s var(--hap-ease),background-color .27s ease,box-shadow .27s ease,border-color .27s ease,color .27s ease;
}
.hse-approach-btn::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:var(--hap-pressed-fill);
  transform:translateX(-102%);
  transition:transform .43s var(--hap-ease);
}
.hse-approach-btn:active::before { transform:translateX(0); }
.hse-approach-btn > .material-symbols-rounded { display:inline-grid!important; place-items:center; flex:none; font-size:19px!important; line-height:1!important; transition:transform .27s var(--hap-ease); }
.hse-approach-btn:hover { transform:translate3d(0,-2px,0); }
.hse-approach-btn:active { transform:translate3d(0,0,0); }
.hse-approach-btn:hover .material-symbols-rounded { transform:scale(1.06); }
.hse-approach .hse-approach-btn--amber {
  color:var(--hap-black);
  background:var(--hap-amber);
  box-shadow:0 10px 30px rgba(216,155,43,.14),inset 0 1px rgba(255,255,255,.25);
}
.hse-approach .hse-approach-btn--amber:hover { color:var(--hap-black); background:var(--hap-bright-amber); box-shadow:0 14px 36px rgba(216,155,43,.20); }
.hse-approach .hse-approach-btn--amber:active { color:var(--hap-black); background:var(--hap-bright-amber); border-color:rgba(216,155,43,.77); box-shadow:inset 0 0 0 2px rgba(255,200,74,.3),0 0 0 4px rgba(255,200,74,.12),0 4px 16px rgba(0,0,0,.1); }
.hse-approach .hse-approach-btn--dark-glass {
  --hap-pressed-fill:var(--hap-white);
  color:var(--hap-white);
  background:rgba(255,255,255,.085);
  border-color:rgba(255,255,255,.40);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  box-shadow:inset 0 1px rgba(255,255,255,.19),0 8px 24px rgba(0,0,0,.15);
}
.hse-approach .hse-approach-btn--dark-glass:hover { color:var(--hap-black); background:rgba(255,200,74,.63); border-color:var(--hap-amber); box-shadow:inset 0 1px rgba(255,255,255,.38),0 11px 27px rgba(0,0,0,.15); }
.hse-approach .hse-approach-btn--dark-glass:active { color:var(--hap-black); background:rgba(255,200,74,.45); border-color:var(--hap-bright-amber); box-shadow:inset 0 0 0 2px rgba(255,213,120,.35),0 0 0 4px rgba(255,200,74,.12); }

/* 03 | HERO: EXACT ABOUT LAYOUT, INVERTED FROM LIGHT TO DARK */
.hse-approach-hero {
  position:relative;
  isolation:isolate;
  min-height:clamp(725px,87svh,930px);
  margin:0;
  overflow:hidden;
  color:var(--hap-white);
  background:
    radial-gradient(ellipse at -8% 4%,rgba(255,200,74,.25) 0%,transparent 52%),
    radial-gradient(ellipse at 90% 8%,rgba(162,168,168,.15) 0%,transparent 46%),
    linear-gradient(135deg,#252625 5%,#151615 52%,#090A09 100%);
}
.hse-approach-hero::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,0) 0%,rgba(6,6,6,.09) 32%,rgba(8,9,8,.51) 64%,#000000 100%);
}
.hse-approach-hero__art { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hse-approach-hero__diamond {
  position:absolute;
  display:block;
  aspect-ratio:1/1;
  transform:rotate(45deg);
  transform-origin:center;
  border:1px solid rgba(255,200,74,.28);
  border-radius:clamp(17px,2vw,29px);
  box-shadow:inset 0 1px rgba(255,255,255,.15);
  opacity:1;
  translate:0 0;
  animation:
    hap-diamond-float var(--hap-float-duration,13s) ease-in-out var(--hap-float-delay,0s) infinite,
    hap-hero-diamond-enter 2.15s var(--hap-ease) var(--hap-entrance-delay,.12s) both;
}
@keyframes hap-diamond-float { 0%,100% { transform:translate3d(0,0,0) rotate(45deg); } 50% { transform:translate3d(12px,-32px,0) rotate(45deg); } }
@keyframes hap-hero-diamond-enter { from { opacity:0; translate:var(--hap-entrance-x,0px) var(--hap-entrance-y,-65px); } to { opacity:1; translate:0 0; } }
.hse-approach-hero__diamond--one {
  width:clamp(310px,43vw,660px); top:-410px; left:-155px;
  background:linear-gradient(140deg,rgba(255,200,74,.37),rgba(255,255,255,.055) 70%);
  --hap-float-duration:16s; --hap-entrance-delay:.08s; --hap-entrance-x:-50px; --hap-entrance-y:-60px;
}
.hse-approach-hero__diamond--two {
  width:clamp(360px,49vw,720px); top:-400px; left:22%;
  background:linear-gradient(130deg,rgba(255,255,255,.19),rgba(100,105,103,.07) 67%,rgba(255,200,74,.15));
  --hap-float-delay:-6s; --hap-entrance-delay:.22s; --hap-entrance-y:-72px;
}
.hse-approach-hero__diamond--three {
  width:clamp(330px,44vw,650px); top:-325px; right:-95px;
  background:linear-gradient(120deg,rgba(130,135,136,.14),rgba(255,255,255,.20) 68%);
  --hap-float-duration:17s; --hap-float-delay:-3s; --hap-entrance-delay:.36s; --hap-entrance-x:52px; --hap-entrance-y:-55px;
}
.hse-approach-hero__diamond--four {
  width:clamp(230px,26vw,410px); top:45px; left:5%;
  background:linear-gradient(135deg,rgba(255,200,74,.24),rgba(255,255,255,.025));
  --hap-float-duration:14s; --hap-float-delay:-8s; --hap-entrance-delay:.5s; --hap-entrance-x:-40px; --hap-entrance-y:60px;
}
.hse-approach-hero__diamond--five {
  width:clamp(250px,30vw,460px); top:16px; left:42%;
  background:linear-gradient(135deg,rgba(255,255,255,.19),rgba(255,202,101,.13) 78%);
  --hap-float-duration:15s; --hap-float-delay:-5s; --hap-entrance-delay:.64s; --hap-entrance-x:26px; --hap-entrance-y:-50px;
}
.hse-approach-hero__diamond--six {
  width:clamp(255px,29vw,440px); top:190px; right:-125px;
  background:linear-gradient(140deg,rgba(255,200,74,.24),rgba(255,255,255,.08) 73%);
  --hap-float-duration:18s; --hap-float-delay:-10s; --hap-entrance-delay:.78s; --hap-entrance-x:56px; --hap-entrance-y:44px;
}
.hse-approach-hero__diamond--seven {
  width:clamp(220px,21vw,310px); top:-100px; right:21%;
  background:linear-gradient(150deg,rgba(45,48,48,.3),rgba(255,255,255,.14));
  --hap-float-duration:16s; --hap-float-delay:-2s; --hap-entrance-delay:.92s; --hap-entrance-x:36px; --hap-entrance-y:-54px;
}
.hse-approach-hero__inner { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; min-height:inherit; padding-top:clamp(200px,24vw,340px); }
.hse-approach-hero__main { max-width:1120px; padding-bottom:clamp(45px,6.7vw,102px); }
.hse-approach-hero .hse-approach-kicker {
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:8px 15px;
  border:1px solid rgba(255,200,74,.8);
  border-radius:999px;
  color:var(--hap-bright-amber);
  background:rgba(255,200,74,.13);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
  box-shadow:inset 0 1px rgba(255,255,255,.18),0 5px 20px rgba(0,0,0,.1);
}
.hse-approach-hero h1 { max-width:1140px; color:var(--hap-white); font-weight:500; font-size:clamp(44px,5.1vw,85px); line-height:1.025; }
.hse-approach-hero h1 em {
  display:inline;
  padding:.02em .05em;
  margin-inline:-.05em;
  color:var(--hap-black);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  background-image:linear-gradient(90deg,var(--hap-deep-amber) 0%,var(--hap-amber) 48%,var(--hap-bright-amber) 100%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:-120vw center;
  animation:hap-heading-amber-enter 4.1s cubic-bezier(.18,.75,.29,1) .4s both;
}
@keyframes hap-heading-amber-enter { from { background-position:-120vw center; color:var(--hap-white); } 55% { color:var(--hap-black); } to { background-position:0 center; color:var(--hap-black); } }
.hse-approach-hero__summary { max-width:665px; margin-top:24px!important; color:rgba(255,255,255,.79); font:400 clamp(16px,1.35vw,20px)/1.53 'Sulphur Point',sans-serif; }
.hse-approach-hero__actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:29px; }
.hse-approach-hero__footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px 35px;
  min-height:105px;
  padding:24px 0;
  border-top:1px solid rgba(255,200,74,.72);
}
.hse-approach-hero__footer-label {
  display:inline-flex; align-items:center; gap:11px; flex:none;
  padding:11px 15px; border:1px solid rgba(255,200,74,.52); border-radius:999px;
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px rgba(255,255,255,.13);
  color:var(--hap-light-amber);
  font:700 11px/1.4 'Oxanium',sans-serif;
  letter-spacing:.12em;
  translate:0 0;
  transition:translate .36s var(--hap-ease),border-color .3s ease;
}
.hse-approach-hero__footer-label:hover { translate:0 -3px; border-color:var(--hap-amber); }
.hse-approach-hero__footer-label:active { translate:0 0; border-color:rgba(255,255,255,.8); }
.hse-approach-hero__footer-label .material-symbols-rounded { font-size:23px; }
.hse-approach-hero__footer-thought {
  display:flex; align-items:center; justify-content:flex-end; flex-wrap:nowrap;
  gap:clamp(4px,.55vw,10px); min-width:0; padding:7px;
  border:1px solid rgba(255,200,74,.62); border-radius:999px;
  background:rgba(255,200,74,.105);
  -webkit-backdrop-filter:blur(19px) saturate(140%); backdrop-filter:blur(19px) saturate(140%);
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 24px rgba(0,0,0,.1);
  color:rgba(255,255,255,.85);
  font:500 clamp(13px,1vw,15px)/1.4 'Sulphur Point',sans-serif;
}
.hse-approach-hero__thought-pill {
  display:inline-flex; align-items:center; justify-content:center; min-width:0; min-height:38px;
  white-space:nowrap;
  flex-shrink:0;
  padding:9px 13px; border:1px solid rgba(255,255,255,.28); border-radius:999px;
  background:rgba(255,255,255,.085);
  -webkit-backdrop-filter:blur(18px) saturate(135%); backdrop-filter:blur(18px) saturate(135%);
  box-shadow:inset 0 1px rgba(255,255,255,.15);
  opacity:0; translate:0 0;
  transition:translate .36s var(--hap-ease),border-color .3s ease;
  animation:hap-thought-appear 1.55s ease-out forwards;
}
.hse-approach-hero__thought-pill:hover { translate:0 -3px; border-color:var(--hap-amber); }
.hse-approach-hero__thought-pill:active { translate:0 0; border-color:rgba(255,255,255,.76); }
.hse-approach-hero__thought-pill:nth-child(1) { animation-delay:.75s; }
.hse-approach-hero__thought-pill:nth-child(3) { animation-delay:1.25s; }
.hse-approach-hero__thought-pill:nth-child(5) { animation-delay:1.75s; }
@keyframes hap-thought-appear { from { opacity:0; transform:translateY(7px); filter:blur(1.5px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
.hse-approach-hero__footer-thought .material-symbols-rounded { font-size:16px; color:var(--hap-amber); flex:none; }

/* 04 | UNDERSTANDING YOUR WORKPLACE — BLACK BACKGROUND / SINGLE SITE PHOTO */
.hse-approach-understanding { position:relative; isolation:isolate; overflow:hidden; background:var(--hap-black); color:var(--hap-white); }
.hse-approach-understanding__diamonds { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hse-approach-understanding__diamond {
  position:absolute;
  aspect-ratio:1/1;
  display:block;
  border:1px solid rgba(255,200,74,.18);
  border-radius:clamp(17px,2vw,29px);
  background:linear-gradient(135deg,rgba(255,200,74,.13),rgba(255,255,255,0));
  transform:rotate(45deg);
  animation:hap-diamond-float 13s ease-in-out infinite;
}
.hse-approach-understanding__diamond--one { width:310px; left:-105px; bottom:-130px; animation-delay:-5s; }
.hse-approach-understanding__diamond--two { width:290px; right:-95px; bottom:-145px; animation-duration:15s; animation-delay:-8s; }
.hse-approach-understanding > .hse-approach-container { position:relative; z-index:1; }
.hse-approach-understanding__grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.94fr);
  gap:clamp(42px,7.3vw,115px);
  align-items:center;
}
.hse-approach-understanding__copy {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-self:center;
  min-width:0;
}
.hse-approach-understanding .hse-approach-kicker { color:var(--hap-light-amber); }
.hse-approach-understanding h2 { max-width:750px; color:var(--hap-white); }
.hse-approach-understanding h2 span { color:var(--hap-amber); }
.hse-approach-understanding__copy > p:not(.hse-approach-kicker) {
  max-width:700px;
  margin-top:20px;
  color:rgba(255,255,255,.76);
  font:400 clamp(16px,1.25vw,18px)/1.62 'Sulphur Point',sans-serif;
}
.hse-approach-understanding__copy > .hse-approach-understanding__lead { margin-top:29px; }
.hse-approach-understanding__cta { align-self:flex-start; margin-top:29px; }
.hse-approach-understanding__visual { position:relative; min-width:0; padding:7px 0 7px 7px; }
.hse-approach-understanding__image-frame {
  position:relative;
  overflow:hidden;
  height:clamp(505px,46vw,675px);
  background:#252525;
  border:1px solid rgba(220,224,225,.65);
  border-radius:var(--hap-radius-lg);
  box-shadow:0 0 0 5px rgba(205,210,214,.16),inset 0 1px rgba(255,255,255,.38),0 19px 46px rgba(0,0,0,.3);
  transition:border-color .35s ease,box-shadow .35s ease;
}
.hse-approach-understanding__image-frame:hover {
  border-color:rgba(255,200,74,.88);
  box-shadow:0 0 0 5px rgba(255,200,74,.23),0 19px 46px rgba(0,0,0,.3);
}
.hse-approach-understanding__image-frame:active {
  border-color:rgba(255,200,74,.78);
  box-shadow:inset 0 1px rgba(255,246,219,.62),0 0 0 5px rgba(255,200,74,.29),0 0 30px rgba(255,200,74,.42),0 0 58px rgba(216,155,43,.22),0 19px 46px rgba(0,0,0,.3);
}
.hse-approach-understanding__image-frame img {
  display:block;
  position:absolute;
  top:-32px;
  left:0;
  width:100%;
  height:calc(100% + 64px);
  object-fit:cover;
  object-position:center;
  translate:0 var(--hap-understanding-parallax,0px);
  will-change:translate;
  transform:none;
}
.hse-approach-understanding__image-note {
  position:absolute;
  left:-20px;
  top:80px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:13px;
  max-width:84%;
  padding:18px 21px;
  background:rgba(20,21,21,.58);
  color:var(--hap-white);
  border:1px solid rgba(255,255,255,.33);
  border-radius:var(--hap-radius);
  -webkit-backdrop-filter:blur(21px) saturate(150%);
  backdrop-filter:blur(21px) saturate(150%);
  box-shadow:inset 0 1px rgba(255,255,255,.17),0 20px 44px rgba(0,0,0,.25);
  font:400 15px/1.28 'Sulphur Point',sans-serif;
}
.hse-approach-understanding__image-note .material-symbols-rounded { flex:none; font-size:29px; color:var(--hap-amber); }
.hse-approach-understanding__image-note strong { font-weight:600; }
/* About-page label reveal: right-to-left beside copy, left-to-right when stacked. */
.hse-approach.hse-approach--reveal-ready .hse-approach-understanding__image-note:not(.is-hse-revealed) { opacity:0; translate:40px 0; }
.hse-approach.hse-approach--reveal-ready .hse-approach-understanding__image-note.is-hse-revealed { animation:hap-note-from-right .95s var(--hap-ease) both; }
@keyframes hap-note-from-right { from { opacity:0; translate:40px 0; } to { opacity:1; translate:0 0; } }
@keyframes hap-note-from-left { from { opacity:0; translate:-34px 0; } to { opacity:1; translate:0 0; } }

/* 05 | THREE ORIGINAL PRINCIPLES — RESTRAINED LIGHT EDITORIAL SECTION */
.hse-approach-principles { position:relative; background:linear-gradient(126deg,var(--hap-porcelain),var(--hap-offwhite) 65%); }
.hse-approach-principles__heading { display:grid; grid-template-columns:minmax(0,1.07fr) minmax(0,.68fr); gap:clamp(40px,7vw,110px); align-items:start; }
.hse-approach-principles .hse-approach-kicker { color:var(--hap-deep-amber); }
.hse-approach-principles h2 { max-width:940px; }
.hse-approach-principles__aside { display:flex; flex-direction:column; align-items:flex-start; gap:25px; padding-bottom:5px; }
.hse-approach-principles__intro { max-width:420px; color:var(--hap-muted); font:400 clamp(16px,1.25vw,18px)/1.62 'Sulphur Point',sans-serif; }
.hse-approach-principles__cta { flex:none; }
.hse-approach-principles__cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-top:clamp(55px,7vw,95px); }
.hse-approach-principle {
  position:relative; isolation:isolate; min-width:0; min-height:315px;
  display:flex; flex-direction:column; overflow:hidden;
  padding:clamp(20px,1.85vw,28px);
  border:1px solid transparent; border-radius:var(--hap-radius-lg);
  transform:translate3d(0,0,0);
  transition:transform .35s var(--hap-ease),background-color .35s ease,border-color .25s ease,box-shadow .3s ease;
}
.hse-approach-principle--grey { background:#E9E9E6; color:var(--hap-ink); }
.hse-approach-principle--amber { background:linear-gradient(145deg,var(--hap-amber),var(--hap-bright-amber) 70%,var(--hap-light-amber)); color:#111; }
.hse-approach-principle--dark { background:var(--hap-graphite); color:var(--hap-white); }
.hse-approach-principle::after {
  content:''; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:var(--hap-white); clip-path:inset(0 0 100% 0);
  pointer-events:none; transition:clip-path .9s var(--hap-ease);
}
.hse-approach-principle > *:not(.hse-approach-principle__media) { position:relative; z-index:2; }
.hse-approach-principle__media { position:absolute; inset:0; z-index:0; opacity:0; overflow:hidden; pointer-events:none; transition:opacity .38s ease; }
.hse-approach-principle__media img { width:100%; height:100%; object-fit:cover; filter:grayscale(1); transform:scale(1.02); transition:transform .45s var(--hap-ease); }
.hse-approach-principle__media::after { content:''; position:absolute; inset:0; background:rgba(233,233,230,.86); }
.hse-approach-principle--amber .hse-approach-principle__media::after { background:rgba(255,200,74,.82); }
.hse-approach-principle--dark .hse-approach-principle__media::after { background:rgba(17,17,17,.85); }
.hse-approach-principle:hover .hse-approach-principle__media { opacity:1; }
.hse-approach-principle:hover .hse-approach-principle__media img { transform:scale(1.055); }
.hse-approach-principle:active .hse-approach-principle__media { opacity:0; }
.hse-approach-principle:hover { transform:translate3d(0,-5px,0); box-shadow:0 18px 38px rgba(0,0,0,.14); }
.hse-approach-principle:active { transform:translate3d(0,0,0); border-color:rgba(216,155,43,.74); box-shadow:0 0 0 4px rgba(255,200,74,.19),inset 0 1px rgba(255,255,255,.76),0 7px 18px rgba(0,0,0,.13); }
.hse-approach-principle:active::after { clip-path:inset(0 0 0 0); }
.hse-approach-principle__top { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:auto; padding-bottom:20px; color:#725117; font:700 12px/1.2 'Oxanium',sans-serif; letter-spacing:.075em; }
.hse-approach-principle--dark .hse-approach-principle__top { color:var(--hap-amber); }
.hse-approach-principle__top .material-symbols-rounded { display:grid!important; place-items:center; width:43px; height:43px; border:1px solid rgba(0,0,0,.18); border-radius:12px; background:rgba(255,255,255,.13); color:inherit; font-size:24px!important; transition:background-color .3s ease,color .3s ease,border-color .3s ease; }
.hse-approach-principle--dark .hse-approach-principle__top .material-symbols-rounded { border-color:rgba(255,255,255,.26); background:rgba(255,200,74,.12); }
.hse-approach-principle:hover .hse-approach-principle__top .material-symbols-rounded { background:var(--hap-white); color:var(--hap-black); border-color:var(--hap-white); }
.hse-approach-principle--dark:hover .hse-approach-principle__top .material-symbols-rounded { background:var(--hap-white); border-color:var(--hap-white); color:var(--hap-black); }
.hse-approach-principle:active .hse-approach-principle__top .material-symbols-rounded,
.hse-approach-principle--dark:active .hse-approach-principle__top .material-symbols-rounded { background:var(--hap-amber); color:var(--hap-black); border-color:var(--hap-amber); }
.hse-approach-principle h3 { color:var(--hap-ink); font-size:clamp(21px,1.7vw,28px); line-height:1.15; }
.hse-approach-principle--dark h3 { color:var(--hap-amber); }
.hse-approach-principle p { max-width:440px; margin-top:12px; color:#4E4E4A; font:400 clamp(15px,1.08vw,16px)/1.46 'Sulphur Point',sans-serif; }
.hse-approach-principle--dark p { color:rgba(255,255,255,.77); }
.hse-approach-principle:active h3,.hse-approach-principle:active .hse-approach-principle__top { color:var(--hap-deep-amber); }
.hse-approach-principle:active p { color:var(--hap-ink); }
/* Cards stagger in as a group; their hover lift is independent of the entrance. */
.hse-approach.hse-approach--reveal-ready .hse-approach-principles__cards:not(.is-hse-revealed) > .hse-approach-principle { opacity:0; translate:0 22px; }
.hse-approach.hse-approach--reveal-ready .hse-approach-principles__cards.is-hse-revealed > .hse-approach-principle { animation:hap-card-reveal .92s var(--hap-ease) both; }
.hse-approach.hse-approach--reveal-ready .hse-approach-principles__cards.is-hse-revealed > .hse-approach-principle:nth-child(2) { animation-delay:.17s; }
.hse-approach.hse-approach--reveal-ready .hse-approach-principles__cards.is-hse-revealed > .hse-approach-principle:nth-child(3) { animation-delay:.34s; }
@keyframes hap-card-reveal { from { opacity:0; translate:0 22px; } to { opacity:1; translate:0 0; } }

/* 06 | CLOSING CTA — ABOUT-STYLE PHOTOGRAPHIC GLASS PANEL */
.hse-approach-contact { position:relative; isolation:isolate; overflow:hidden; padding:clamp(70px,8vw,120px) 0; background:#080909; color:var(--hap-white); }
.hse-approach-contact > .hse-approach-container { position:relative; z-index:1; }
.hse-approach-contact__diamonds { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hse-approach-contact__diamond { position:absolute; aspect-ratio:1/1; display:block; border:1px solid rgba(255,200,74,.18); border-radius:clamp(17px,2vw,29px); background:linear-gradient(135deg,rgba(255,200,74,.13),rgba(255,255,255,0)); transform:rotate(45deg); animation:hap-diamond-float 13s ease-in-out infinite; }
.hse-approach-contact__diamond--one { width:310px; left:-90px; top:-135px; animation-delay:-5s; }
.hse-approach-contact__diamond--two { width:290px; right:-85px; bottom:-145px; animation-duration:15s; animation-delay:-8s; }
.hse-approach-contact__panel {
  position:relative; isolation:isolate; overflow:hidden; min-height:320px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.78fr); gap:clamp(35px,7vw,120px); align-items:start;
  padding:clamp(36px,5vw,78px);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.54); border-radius:var(--hap-radius-lg);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 0 0 5px rgba(255,255,255,.08),inset 0 1px rgba(255,255,255,.28),0 25px 62px rgba(0,0,0,.20);
  transform:translate3d(0,0,0);
  transition:transform .42s var(--hap-ease),border-color .42s ease,box-shadow .42s var(--hap-ease);
}
.hse-approach-contact__panel:hover { transform:translate3d(0,-4px,0); box-shadow:0 0 0 5px rgba(255,255,255,.08),inset 0 1px rgba(255,255,255,.28),0 31px 72px rgba(0,0,0,.25); }
.hse-approach-contact__panel:active { transform:translate3d(0,0,0); border-color:rgba(255,200,74,.80); box-shadow:0 0 0 5px rgba(255,200,74,.12),inset 0 0 0 1px rgba(255,213,120,.38),0 19px 46px rgba(0,0,0,.18); }
.hse-approach-contact__photo { position:absolute; inset:0; z-index:-2; }
.hse-approach-contact__photo img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hse-approach-contact__panel::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(11,12,12,.95),rgba(11,12,12,.79) 56%,rgba(11,12,12,.88)); }
.hse-approach-contact__panel::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(105deg,rgba(255,200,74,.22),rgba(216,155,43,.27) 52%,rgba(255,200,74,.13)); opacity:0; transition:opacity .42s ease; }
.hse-approach-contact__panel:hover::after { opacity:1; }
.hse-approach-contact__panel:active::after { opacity:0; }
.hse-approach-contact__title,.hse-approach-contact__details { position:relative; z-index:1; }
.hse-approach-contact .hse-approach-kicker { color:var(--hap-light-amber); }
.hse-approach-contact h2 { max-width:760px; color:var(--hap-white); }
.hse-approach-contact h2 em { color:var(--hap-amber); }
.hse-approach-contact__details p { max-width:510px; color:rgba(255,255,255,.82); font:400 clamp(16px,1.3vw,19px)/1.55 'Sulphur Point',sans-serif; }
.hse-approach-contact__details .hse-approach-btn { margin-top:25px; }

/* 07 | RESPONSIVE — MATCH THE ABOUT PAGE'S BREAKPOINTS */
@media (min-width:901px) {
  .hse-approach-understanding { padding-top:clamp(66px,7.2vw,114px); }
  .hse-approach-understanding__copy { padding-top:0; }
}
@media (min-width:1200px) {
  .hse-approach h2,.hse-approach .hse-approach-contact h2 { font-size:clamp(36px,3.6vw,59px); }
  .hse-approach-hero h1 { font-size:clamp(43px,4.65vw,77px); }
}
@media (min-width:1600px) {
  .hse-approach-hero__diamond--one { left:-100px; }
  .hse-approach-hero__diamond--three { right:0; }
  .hse-approach-understanding__image-frame { height:675px; }
}
@media (max-width:1199px) {
  .hse-approach-understanding__grid { gap:clamp(34px,5vw,60px); }
  .hse-approach-understanding__image-frame { height:580px; }
  .hse-approach-hero__diamond--one { top:-340px; }
  .hse-approach-hero__diamond--two { top:-320px; }
  .hse-approach-principle { min-height:345px; }
}
@media (max-width:900px) {
  .hse-approach-section { padding-block:80px; }
  .hse-approach-hero { min-height:760px; }
  .hse-approach-hero__inner { padding-top:245px; }
  .hse-approach-hero h1 { font-size:clamp(40px,6vw,64px); }
  .hse-approach-hero__footer { align-items:flex-start; flex-direction:column; justify-content:center; gap:12px; }
  .hse-approach-hero__footer-thought { justify-content:flex-start; }
  .hse-approach-understanding__grid { grid-template-columns:minmax(0,1fr); gap:42px; }
  .hse-approach-understanding__copy { max-width:800px; align-self:auto; }
  .hse-approach-understanding__visual { width:min(100%,750px); padding-left:7px; }
  .hse-approach-understanding__image-frame { height:clamp(430px,68vw,560px); }
  .hse-approach.hse-approach--reveal-ready .hse-approach-understanding__image-note:not(.is-hse-revealed) { translate:-34px 0; }
  .hse-approach.hse-approach--reveal-ready .hse-approach-understanding__image-note.is-hse-revealed { animation-name:hap-note-from-left; }
  .hse-approach-principles__heading { grid-template-columns:1fr; gap:25px; }
  .hse-approach-principles__intro { max-width:720px; }
  .hse-approach-principles__cards { gap:12px; margin-top:55px; }
  .hse-approach-principle { padding:18px; min-height:350px; }
  .hse-approach-principle h3 { font-size:21px; }
  .hse-approach-contact__panel { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:700px) {
  .hse-approach { --hap-gutter:20px; }
  .hse-approach-section { padding-block:68px; }
  .hse-approach h2,.hse-approach .hse-approach-contact h2 { font-size:clamp(34px,8vw,48px); }
  .hse-approach-hero { min-height:700px; }
  .hse-approach-hero__inner { padding-top:200px; }
  .hse-approach-hero h1 { font-size:clamp(36px,9vw,55px); }
  .hse-approach-hero__main { padding-bottom:60px; }
  .hse-approach-hero__summary { font-size:16px; margin-top:19px!important; }
  .hse-approach-hero__actions {
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:10px;
  width:100%;
}

.hse-approach .hse-approach-hero__actions .hse-approach-btn {
  flex:1 1 0;
  width:auto;
  min-width:0;
  min-height:48px;
  padding:11px 8px;
  gap:6px;
  font-size:clamp(10px,2.6vw,11px);
  line-height:1.2;
  white-space:normal;
}

.hse-approach .hse-approach-hero__actions .hse-approach-btn > .material-symbols-rounded {
  font-size:16px!important;
}
  .hse-approach-hero__diamond--one { width:340px; left:-190px; top:-205px; }
  .hse-approach-hero__diamond--two { width:395px; left:8%; top:-320px; }
  .hse-approach-hero__diamond--three { width:350px; right:-225px; top:-115px; }
  .hse-approach-hero__diamond--four { width:200px; left:7%; top:95px; }
  .hse-approach-hero__diamond--five { width:260px; left:52%; top:2px; }
  .hse-approach-hero__diamond--six { width:220px; right:-135px; top:240px; }
  .hse-approach-hero__diamond--seven { display:none; }
  .hse-approach-hero__footer { min-height:100px; }
  .hse-approach-hero__footer-label { font-size:10px; }
  .hse-approach-hero__footer-thought {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:nowrap;
    width:max-content;
    max-width:100%;
    gap:6px;
    padding:6px;
    font-size:clamp(9px,1.8vw,12px);
    border-radius:22px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .hse-approach-hero__footer-thought .material-symbols-rounded { font-size:13px; }
  .hse-approach-hero__thought-pill { padding:9px 5px; min-height:43px; text-align:center; line-height:1.3; overflow-wrap:normal; }
  .hse-approach-understanding__image-frame { height:340px; }
  .hse-approach-understanding__image-note { left:17px; top:35px; padding:14px 16px; font-size:13px; }
  .hse-approach-principles__cards { grid-template-columns:1fr; gap:12px; margin-top:40px; }
  .hse-approach-principle { min-height:245px; padding:20px; }
  .hse-approach-principle__top { padding-bottom:16px; }
  .hse-approach-contact { padding-block:65px; }
  .hse-approach-contact__panel { padding:32px 23px; }
}
@media (max-width:400px) {
  .hse-approach { --hap-gutter:16px; }
  .hse-approach-hero__inner { padding-top:185px; }
  .hse-approach-hero h1 { font-size:34px; }
  .hse-approach .hse-approach-btn { min-height:46px; padding:12px 14px; font-size:11px; }
  .hse-approach-hero__actions {
    flex-direction:row;
    align-items:stretch;
  }
  .hse-approach-hero__footer-thought {
    gap:3px;
    font-size:9px;
    padding:5px;
  }

  .hse-approach-hero__thought-pill {
    padding:8px 4px;
    white-space:nowrap;
  }
  .hse-approach-understanding__image-frame { height:315px; }
}

/* 08 | REDUCED MOTION AND ACCESSIBILITY */
@media (prefers-reduced-motion:reduce) {
  .hse-approach *, .hse-approach *::before,.hse-approach *::after { animation:none!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
  .hse-approach-hero h1 em { background-position:0 center; }
  .hse-approach-hero__thought-pill { opacity:1; }
  .hse-approach.hse-approach--reveal-ready .hse-approach-understanding__image-note,
  .hse-approach.hse-approach--reveal-ready .hse-approach-principles__cards > .hse-approach-principle { opacity:1; translate:0 0; }
}