/* Homepage hero (28 Oct 2026): the concept wall from /concepts/ fills the first screen, with the headline
   on a cream wash. Uses /concepts/wall.css for the tiles and /concepts/wall.js in data-hero mode. */
.hw{position:relative;z-index:2;height:100svh;min-height:620px;margin-top:-88px;margin-bottom:clamp(90px,12vw,150px);overflow:hidden;background:var(--cream)}

.hw .cw-wall{position:absolute;inset:0;touch-action:pan-y}
/* Fades the wall into the page below, and washes the left side so the headline reads */
.hw .cw-wall::after{background:linear-gradient(180deg,var(--cream),transparent 14%,transparent 72%,var(--cream))}
.hw-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--cream) 0%,rgba(255,255,255,.96) 36%,rgba(255,255,255,.7) 54%,rgba(255,255,255,0) 74%)}
.hw-copy{position:absolute;z-index:2;left:var(--gutter);bottom:clamp(70px,12vh,140px);max-width:min(760px,60vw);pointer-events:none}
.hw-copy>*{pointer-events:auto}
.hw-copy h1{margin:0;font-weight:400;font-size:clamp(64px,9.4vw,160px);line-height:.9;letter-spacing:-.075em;color:var(--green)}
.hw-copy p{margin:28px 0 0;max-width:420px;font-size:clamp(18px,1.5vw,22px);line-height:1.4;letter-spacing:-.02em;color:#3d3d3d}
.hw-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:34px}
.hw-cta{display:inline-flex;align-items:center;gap:28px;min-height:56px;padding:0 26px;border:0;border-radius:100px;background:var(--green);color:var(--cream);font:inherit;font-size:15px;cursor:pointer;box-shadow:0 12px 30px rgba(17,17,17,.22);transition:background .2s}
.hw-cta:hover{background:var(--teal)}
.hw-link{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid currentColor;font-size:15px;color:var(--green)}
.hw-note{position:absolute;z-index:2;right:var(--gutter);bottom:26px;margin:0;max-width:300px;font-size:12px;line-height:1.5;text-align:right;color:#4d5a50;pointer-events:none}
@media(max-width:720px){
  .hw{margin-top:-76px;min-height:560px;margin-bottom:80px}
  /* Phones: the wall fills the top, the copy sits on a cream wash at the bottom */
  .hw-scrim{background:linear-gradient(0deg,var(--cream) 0%,var(--cream) 34%,rgba(255,255,255,.8) 52%,rgba(255,255,255,0) 70%)}
  .hw-copy{left:16px;right:16px;bottom:64px;max-width:none}
  .hw-copy h1{font-size:clamp(52px,15vw,72px)}
  .hw-copy p{margin-top:16px;font-size:17px}
  .hw-actions{margin-top:22px;gap:12px 22px}
  .hw-cta{min-height:52px}
  .hw-note{left:16px;right:16px;bottom:16px;max-width:none;text-align:left;font-size:11.5px}
}

/* Expand: opens the full-screen wall at /concepts/ (the shared view transition grows the wall to fill the screen) */
.hw-expand{position:absolute;z-index:3;top:22px;right:var(--gutter);display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 18px 0 22px;border-radius:100px;background:#fff;color:var(--green);font-size:15px;box-shadow:0 0 0 1px #1111111f,0 10px 28px #1111111f;transition:background .2s,color .2s,transform .25s}
.hw-expand:hover{background:var(--green);color:var(--cream)}
.hw-expand:hover svg{transform:scale(1.12)}
.hw-expand svg{transition:transform .25s}
@media(max-width:720px){.hw-expand{top:16px;right:16px;min-height:44px;padding:0 14px 0 16px;font-size:14px}}

/* Expanded in place: the wall is fixed over the whole screen and the page underneath is locked.
   wall.js opens a clip from where the wall sat to the full screen, so it grows with no page load. */
html.wall-open,html.wall-open body{overflow:hidden}
.hw .cw-wall{transition:clip-path .55s cubic-bezier(.2,.7,.2,1)}
.hw.is-expanded .cw-wall{position:fixed;inset:0;z-index:200;cursor:grab;touch-action:none}
.hw.is-expanded .cw-wall.is-drag{cursor:grabbing}
.hw.is-expanded .cw-wall::after{background:linear-gradient(90deg,var(--wall),transparent 6%,transparent 94%,var(--wall)),linear-gradient(180deg,var(--wall),transparent 10%,transparent 90%,var(--wall))}
.hw.is-expanded .cw-follow{display:none}
.hw-close,.hw-zoom{opacity:0;visibility:hidden;transition:opacity .3s ease .2s,visibility 0s linear .5s}
.hw.is-expanded .hw-close,.hw.is-expanded .hw-zoom{opacity:1;visibility:visible;transition:opacity .3s ease .25s}
.hw-close{position:fixed;z-index:201;top:22px;right:var(--gutter);display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 18px 0 22px;border:0;border-radius:100px;background:var(--green);color:var(--cream);font:inherit;font-size:15px;cursor:pointer;box-shadow:0 10px 28px #11111133}
.hw-close:hover{background:var(--teal)}
.hw-zoom{position:fixed;z-index:201;left:var(--gutter);bottom:26px}
.hw.is-expanded .hw-expand,.hw.is-expanded .hw-copy,.hw.is-expanded .hw-scrim,.hw.is-expanded .hw-note{opacity:0;pointer-events:none}
.hw-copy,.hw-scrim,.hw-note,.hw-expand{transition:opacity .3s ease}
html.wall-open .sn{opacity:0;pointer-events:none}
@media(max-width:720px){.hw-close{top:16px;right:16px;min-height:44px}.hw-zoom{left:16px;bottom:16px}}
.hw.is-expanded{z-index:300}
/* Expanded: the concepts note stays on screen as a white pill, bottom right */
.hw.is-expanded .hw-note{position:fixed;z-index:201;right:var(--gutter);bottom:26px;max-width:min(420px,calc(100vw - 2*var(--gutter) - 200px));padding:10px 16px;border-radius:16px;background:#fff;color:var(--green);font-size:12.5px;line-height:1.45;text-align:left;box-shadow:0 0 0 1px #1111111f,0 8px 24px #1111111a;opacity:1}
@media(max-width:720px){.hw.is-expanded .hw-note{left:auto;right:16px;bottom:16px;max-width:calc(100vw - 32px - 170px);font-size:11.5px;padding:8px 12px}}
/* Disclaimer: small on the hero, a larger pill once the wall is expanded */
.hw-note{max-width:340px;font-size:11.5px;line-height:1.45}
.hw-note b{font-weight:400;color:var(--green)}
.hw.is-expanded .hw-note{max-width:min(520px,calc(100vw - 2*var(--gutter) - 200px));padding:14px 20px;font-size:15px;line-height:1.45}
.hw.is-expanded .hw-note b{font-weight:700}
@media(max-width:720px){.hw-note{display:none}.hw-copy{bottom:48px}.hw.is-expanded .hw-note{display:block;left:16px;right:16px;bottom:76px;max-width:none;font-size:12.5px;padding:10px 14px}}
/* Phones: what we do, straight after the hero, so the services are one tap away (the top menu is folded away on phones) */
.hw-do{display:none}
@media(max-width:840px){
  .hw-do{display:block;position:relative;z-index:2;padding:0 16px 40px;margin-top:-40px}
  .hw-do h2{margin:0 0 20px;font-weight:400;font-size:clamp(40px,11vw,56px);line-height:1;letter-spacing:-.06em;color:var(--green)}
  .hw-do ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .hw-do a{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;min-height:118px;padding:16px 16px 16px 20px;border-radius:22px;overflow:hidden;color:#fff;isolation:isolate}
  .hw-do img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
  .hw-do a::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0f0f0fe0,#0f0f0f33 75%)}
  .hw-do b{display:block;font-weight:400;font-size:24px;line-height:1.05;letter-spacing:-.04em}
  .hw-do small{display:block;margin-top:5px;font-size:14px;line-height:1.35;color:#ffffffd6}
  .hw-do i{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:#111}
}
@media(max-width:840px){
  .hw-do{padding-bottom:80px}
  .hw-do img{filter:grayscale(1) brightness(.75)}
  .hw-do a::before{background:linear-gradient(90deg,#0f0f0fd9,#0f0f0f80 70%,#0f0f0f40)}
}