/* Selected concept 1: the existing city scene becomes the whole hero surface.
   Only the photographic interior of the approved source is shown. All copy,
   the service link and location remain unchanged, selectable HTML. */
#home.hero.hero-light{
 display:block;position:relative;isolation:isolate;min-height:clamp(510px,44vw,660px);
 height:auto;padding:56px 4.8%;background:var(--identity-paper);overflow:hidden;
}
#home.hero-light .hero-copy{
 position:relative;z-index:2;width:39%;max-width:600px;min-width:0;padding:0;
}
#home.hero-light h1{
 max-width:none;margin:0 0 22px;font-size:clamp(38px,4.5vw,68px);
 line-height:1.04;letter-spacing:-.045em;overflow-wrap:normal;
}
#home.hero-light .hero-lead{max-width:470px;font-size:clamp(18px,1.6vw,24px);line-height:1.4;margin:0 0 28px}
#home.hero-light .location{margin-top:19px;color:#626c7c;font-size:14px}
#home.hero-light .hero-concept{
 position:absolute;z-index:0;inset:0;width:100%;max-width:none;margin:0;
 aspect-ratio:auto;border:0;border-radius:0;background:none;box-shadow:none;
 overflow:hidden;pointer-events:none;
}
/* Inner photograph bounds: x=680, y=52, width=957, height=767 in
   the unchanged 1672 x 941 asset. This excludes mockup text and its frame.
   The crop's native aspect ratio is retained at every breakpoint. */
#home.hero-light .hero-concept-crop{
 position:absolute;inset:auto -12% auto auto;top:50%;width:max(73%,680px);height:auto;
 aspect-ratio:957/767;border-radius:0;overflow:hidden;transform:translateY(-50%);
}
#home.hero-light .hero-concept-crop img{
 display:block;position:absolute;width:174.712644%;height:122.685789%;max-width:none;
 left:-71.055381%;top:-6.779661%;object-fit:fill;
}
#home.hero-light .hero-concept::after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,#F7F6F2 0%,#F7F6F2 39%,#F7F6F2C7 43%,#F7F6F24D 49%,#F7F6F200 56%);
}
/* A restrained tactile face, with fixed dimensions in every state. */
#home.hero-light .hero-services-cta.pill{
 min-height:56px;min-width:44px;max-width:100%;padding:15px 26px;
 border:1px solid #0862bd;border-radius:12px;
 background:linear-gradient(180deg,#0876c2 0%,#086ada 100%);color:#fff;
 font-size:17px;line-height:1.35;font-weight:600;text-shadow:0 1px 1px #034a9133;
 box-shadow:inset 0 1px 0 #ffffff65,inset 0 -1px 0 #0351ac55,0 3px 0 #054b9933,0 6px 12px #164e7529;
 transform:none;transition:background .15s ease,box-shadow .15s ease;
}
#home.hero-light .hero-services-cta.pill::before{content:none;display:none}
#home.hero-light .hero-services-cta.pill:hover{
 border-color:#0862bd;background:linear-gradient(180deg,#0876c2 0%,#086ada 100%);color:#fff;
 box-shadow:inset 0 1px 0 #ffffff65,inset 0 -1px 0 #0351ac55,0 3px 0 #054b9933,0 6px 12px #164e7529;transform:none;
}
@media(hover:hover) and (pointer:fine){
 #home.hero-light .hero-services-cta.pill:not(:disabled):hover{
  background:linear-gradient(180deg,#086cb8 0%,#085ec8 100%);color:#fff;
  box-shadow:inset 0 1px 0 #ffffff75,inset 0 -1px 0 #0351ac66,0 3px 0 #054b993d,0 7px 14px #164e752e;transform:none;
 }
}
#home.hero-light .hero-services-cta.pill:not(:disabled):active,
#home.hero-light .hero-services-cta.pill:not(:disabled).is-touch-pressed{
 border-color:#0758ae;background:linear-gradient(180deg,#075bb5 0%,#0868c1 100%);color:#fff;
 box-shadow:inset 0 2px 4px #034c9e66,inset 0 -1px 0 #ffffff40,0 1px 0 #054b9933,0 2px 4px #164e7520;transform:none;
}
#home.hero-light .hero-services-cta.pill:focus-visible{outline:3px solid #18243b;outline-offset:5px}
@media(max-width:1000px) and (min-width:701px){
 #home.hero.hero-light{min-height:530px;padding:44px 4.8%}
 #home.hero-light .hero-copy{width:43%}
 #home.hero-light h1{font-size:clamp(36px,4.6vw,46px)}
 #home.hero-light .hero-lead{font-size:18px}
 #home.hero-light .hero-concept-crop{width:max(77%,700px);top:52%}
 #home.hero-light .hero-concept::after{background:linear-gradient(90deg,#F7F6F2 0%,#F7F6F2 39%,#F7F6F2D9 43%,#F7F6F24D 50%,#F7F6F200 59%)}
}
/* On phones the same scene flows out of the light text surface beneath it.
   Space is reserved in the text flow, so loading cannot move the next section. */
@media(max-width:700px){
 #home.hero.hero-light{min-height:0;height:auto;padding:30px 5% 0}
 #home.hero-light .hero-copy{width:100%;max-width:580px;padding:0 0 clamp(225px,64vw,440px)}
 #home.hero-light h1{font-size:clamp(32px,7.5vw,48px);line-height:1.08;margin-bottom:18px;max-width:560px}
 #home.hero-light .hero-lead{font-size:18px;line-height:1.4;margin-bottom:23px;max-width:520px}
 #home.hero-light .location{margin-top:17px;font-size:14px}
 #home.hero-light .hero-concept-crop{inset:auto 0 0;width:100%;height:auto;aspect-ratio:957/767;transform:none}
 #home.hero-light .hero-concept::after{background:none}
 #home.hero-light .hero-concept-crop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#F7F6F2 0%,#F7F6F2EB 12%,#F7F6F240 25%,#F7F6F200 36%)}
 #home.hero-light .hero-services-cta.pill{width:auto;max-width:100%;min-height:56px;padding:15px 23px;font-size:16px;border-radius:12px}
}
@media(prefers-reduced-motion:reduce){
 #home.hero-light .hero-services-cta.pill,
 #home.hero-light .hero-services-cta.pill:not(:disabled):hover,
 #home.hero-light .hero-services-cta.pill:not(:disabled):active,
 #home.hero-light .hero-services-cta.pill:not(:disabled).is-touch-pressed{transition:none;transform:none}
}
@media(forced-colors:active){
 #home.hero-light .hero-services-cta.pill,
 #home.hero-light .hero-services-cta.pill:not(:disabled),
 #home.hero-light .hero-services-cta.pill:not(:disabled):hover,
 #home.hero-light .hero-services-cta.pill:not(:disabled):active,
 #home.hero-light .hero-services-cta.pill:not(:disabled).is-touch-pressed{forced-color-adjust:auto;background:ButtonFace;color:ButtonText;border-color:ButtonText;box-shadow:none;text-shadow:none}
 #home.hero-light .hero-services-cta.pill:focus-visible{outline-color:Highlight}
 #home.hero-light .hero-concept{display:none}
}

/* Keep the Earth/location row on the same centreline as the project CTA. */
#home.hero-light .hero-contact-group{display:grid;justify-items:center;width:fit-content;max-width:100%}
#home.hero-light .hero-contact-group .hero-actions{justify-content:center;max-width:100%}
#home.hero-light .hero-contact-group .location{justify-content:center;max-width:100%;text-align:center}
#home.hero-light .hero-contact-group .location-icon{flex:0 0 16px;height:16px}