/* The expertise overview: cream, forest and one gold. The four services sit on one screen as a ring of cards. */
.offer-page{--offer-ease:cubic-bezier(.22,1,.36,1);--offer-hh:var(--offer-header-height,90px);--offer-ink:#1f3d26;--offer-gold:#e0a82e;--offer-cream:#faf7ef;--offer-card:#fffdf7}

/* ---------- header on the photograph ---------- */
.offer-page .site-header{position:fixed;inset:0 0 auto;border-bottom-color:transparent;transition:background .35s,border-color .35s,transform .35s ease}
.offer-page:not(.nav-open) .site-header:not(.is-solid){background:transparent}
.offer-page:not(.nav-open) .site-header:not(.is-solid) .brand,.offer-page:not(.nav-open) .site-header:not(.is-solid) .nav>ul>li>.nav-top{color:#fff}
.offer-page:not(.nav-open) .site-header:not(.is-solid) .nav>ul>li>.nav-top:hover{color:#fff;background:#ffffff1f}
.offer-page:not(.nav-open) .site-header:not(.is-solid) .brand img{background:var(--offer-cream);border-radius:50%;padding:3px}
.offer-page:not(.nav-open) .site-header:not(.is-solid) .header-cta{background:var(--offer-gold);color:var(--offer-ink);box-shadow:none}
.offer-page:not(.nav-open) .site-header:not(.is-solid) .menu-toggle{color:#fff;border-color:#ffffffb0}
.offer-page .site-header.is-solid{border-bottom-color:#1f3d2620}
.offer-page .site-header a:focus-visible,.offer-page .site-header button:focus-visible{outline-color:currentColor}

/* ---------- opening ---------- */
.offer-image-hero{position:relative;isolation:isolate;height:100svh;min-height:600px;overflow:hidden;background:#292820;color:#fff}
.offer-ideas-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;z-index:-2}
.offer-image-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#111a20b0 0%,#111a2030 22%,transparent 40%),linear-gradient(90deg,#111a20b8 0%,#111a2070 43%,#111a2010 78%),linear-gradient(0deg,#111a20b0,transparent 60%)}
.offer-image-content{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding-block:calc(var(--offer-hh) + 22px) clamp(44px,8svh,84px)}
.offer-image-content .crumbs{margin:0;font-size:12px}
.offer-image-content .crumbs,.offer-image-content .crumbs a,.offer-image-content .crumbs li+li::before{color:#fff}
.offer-opening h1{color:#fff;font-size:clamp(64px,min(12vw,19svh),172px);line-height:.92;letter-spacing:-.035em;max-width:8ch;margin:0 0 clamp(18px,3svh,32px);text-wrap:initial}
.offer-word{display:inline-block}
.offer-opening h1 em{font-weight:400;color:var(--offer-gold);padding-right:.06em}
.offer-opening-copy{font:400 clamp(21px,min(2.4vw,4svh),34px)/1.35 var(--serif);max-width:32ch;margin:0;color:#fff}
.offer-key{color:inherit;text-decoration:none;background:linear-gradient(var(--offer-gold),var(--offer-gold)) 0 100%/100% 1px no-repeat;transition:background-size .4s var(--offer-ease),color .3s}
.offer-key:hover,.offer-key:focus-visible{color:var(--offer-gold);background-size:100% 2px}

/* ---------- one screen: lead and the ring of four ---------- */
.offer-expertise{background:var(--offer-cream);color:var(--offer-ink)}
.offer-screen{min-height:calc(100svh - var(--offer-hh));display:flex;flex-direction:column;justify-content:center;gap:clamp(36px,7svh,80px);padding-block:clamp(48px,8svh,90px)}
.offer-lead{display:grid;grid-template-columns:5fr 7fr;gap:6%;align-items:end}
.offer-lead h2{font-size:clamp(52px,min(6.4vw,11svh),100px);line-height:.95;letter-spacing:-.045em;color:var(--offer-ink);margin:0}
.offer-lead h2 em{font-weight:400;color:var(--offer-gold)}
.offer-reveal{font:400 clamp(20px,min(1.9vw,3.4svh),28px)/1.45 var(--serif);max-width:36ch;margin:0;color:#2b2a22}
.offer-reveal b{font-weight:500;color:var(--offer-ink)}
.js .offer-reveal .w{opacity:var(--o,.2);transition:opacity .25s linear}

.offer-ring{--curve:0;--tilt:0deg;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);perspective:1600px;transform-style:preserve-3d;transform:rotateX(var(--tilt))}
.offer-card{--lift:0;transform-style:preserve-3d;opacity:var(--card-opacity,1);
  transform:rotateY(calc(var(--slot) * 30deg * var(--curve) + var(--curve) * -26deg)) translateZ(calc(var(--curve) * 220px + var(--lift) * 40px)) scale(calc(1 - var(--curve) * .1));
  transition:transform .5s var(--offer-ease)}
.offer-card a{position:relative;display:flex;flex-direction:column;height:100%;min-height:clamp(260px,40svh,380px);padding:clamp(22px,2.2vw,32px);background:var(--offer-card);border:1px solid #1f3d2622;border-radius:4px 28px 4px 4px;box-shadow:0 18px 40px -26px #1f3d2680;color:var(--offer-ink);text-decoration:none;backface-visibility:hidden;transition:background .45s var(--offer-ease),color .45s,box-shadow .45s,border-color .45s}
.offer-num{font:400 clamp(44px,min(4.4vw,8svh),68px)/.9 var(--serif);letter-spacing:-.04em;color:var(--offer-gold);margin-bottom:auto}
.offer-card h3{font:400 clamp(23px,min(1.9vw,3.6svh),30px)/1.1 var(--serif);letter-spacing:-.02em;margin:28px 0 12px;color:inherit}
.offer-card p{font-size:15px;line-height:1.55;margin:0 0 22px;opacity:.78}
.offer-card-go{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);font-size:13px;font-weight:600}
.offer-card-go i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--offer-ink);color:var(--offer-cream);font-style:normal;transition:transform .45s var(--offer-ease),background .45s,color .45s}
.offer-card:hover,.offer-card:focus-within{--lift:1}
.offer-card a:hover,.offer-card a:focus-visible{background:var(--offer-ink);color:var(--offer-cream);border-color:var(--offer-ink);box-shadow:0 30px 60px -28px #1f3d26c0}
.offer-card a:hover .offer-card-go i,.offer-card a:focus-visible .offer-card-go i{background:var(--offer-gold);color:var(--offer-ink);transform:rotate(-45deg)}

/* ---------- AYA ---------- */
.offer-aya{position:relative;isolation:isolate;overflow:hidden;background:var(--offer-ink);color:var(--offer-cream);padding-block:clamp(80px,11vw,150px)}
.offer-aya-mark{position:absolute;z-index:-1;right:4%;top:50%;height:140%;aspect-ratio:100/132;color:var(--offer-gold);opacity:.14;transform:translateY(-50%) rotate(calc(var(--p,0) * 90deg - 30deg))}
.offer-aya-mark svg{width:100%;height:100%}
.offer-aya-link{display:grid;grid-template-columns:5fr 7fr;gap:6%;align-items:center;color:inherit;text-decoration:none}
.offer-aya-word{display:flex;font:500 clamp(100px,13vw,200px)/.85 var(--serif);letter-spacing:-.02em;color:var(--offer-gold)}
.js .offer-aya-word span{display:inline-block;opacity:0;transform:translateY(45%) rotate(8deg);transition:opacity .6s,transform 1s var(--offer-ease)}
.js .offer-aya-word span:nth-child(2){transition-delay:.12s}.js .offer-aya-word span:nth-child(3){transition-delay:.24s}
.js .offer-aya.is-in .offer-aya-word span{opacity:1;transform:none}
.offer-aya-text{font:400 clamp(22px,2.1vw,31px)/1.45 var(--serif);max-width:34ch}
.offer-aya-text b{display:flex;gap:10px;margin-top:22px;font:600 14px/1.2 var(--sans);color:var(--offer-gold)}
.offer-aya-text i{font-style:normal;transition:transform .4s var(--offer-ease)}
.offer-aya-link:hover .offer-aya-text i,.offer-aya-link:focus-visible .offer-aya-text i{transform:translateX(6px)}

/* ---------- conversation: a slide-to-start control closing the AYA band ---------- */
.offer-aya{padding-bottom:clamp(56px,6vw,80px)}
.offer-conversation{display:flex;justify-content:center;margin-top:clamp(48px,6vw,80px);padding-top:clamp(32px,4vw,44px);border-top:1px solid #faf7ef26}
.offer-slide{--knob:60px;--pad:6px;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:min(440px,100%);height:calc(var(--knob) + var(--pad) * 2);background:#faf7ef14;border:1px solid #faf7ef33;color:var(--offer-cream);border-radius:6px 32px 6px 6px;overflow:hidden;text-decoration:none;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.offer-slide-fill{position:absolute;z-index:-1;left:0;top:0;bottom:0;width:calc(var(--knob) + var(--pad) * 2);background:#faf7ef1f;transition:width .7s var(--offer-ease)}
.offer-slide-text{padding-left:calc(var(--knob) + 8px);font:600 15px/1 var(--sans);letter-spacing:.01em;transition:opacity .45s,transform .7s var(--offer-ease)}
.offer-slide-knob{position:absolute;left:var(--pad);top:var(--pad);display:grid;place-items:center;width:var(--knob);height:var(--knob);background:var(--offer-gold);color:var(--offer-ink);border-radius:4px 26px 4px 4px;font-size:22px;transition:left .7s var(--offer-ease)}
.offer-slide:hover .offer-slide-knob,.offer-slide:focus-visible .offer-slide-knob,.offer-slide.is-done .offer-slide-knob{left:calc(100% - var(--knob) - var(--pad))}
.offer-slide:hover .offer-slide-fill,.offer-slide:focus-visible .offer-slide-fill,.offer-slide.is-done .offer-slide-fill{width:100%}
.offer-slide:hover .offer-slide-text,.offer-slide:focus-visible .offer-slide-text{transform:translateX(calc(var(--knob) * -1))}
.offer-slide.is-dragging .offer-slide-knob,.offer-slide.is-dragging .offer-slide-fill{transition:none}
.offer-slide.is-dragging .offer-slide-text{opacity:calc(1 - var(--drag,0))}
.offer-page .offer-slide:hover,.offer-page .offer-slide:focus-visible{color:var(--offer-cream)}
.offer-slide:focus-visible{outline:3px solid var(--offer-gold);outline-offset:5px}
/* Arrival: the track draws across, then the handle and label slide in, then the handle nudges once. */
.js .offer-conversation{border-top-color:transparent;transition:border-color .8s}
.js .offer-conversation .offer-slide{clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--offer-ease)}
.js .offer-conversation .offer-slide-knob{opacity:0;transform:translateX(-24px);transition:left .7s var(--offer-ease),opacity .5s .45s,transform .8s .45s var(--offer-ease)}
.js .offer-conversation .offer-slide-text{opacity:0;transform:translateX(24px);transition:opacity .6s .6s,transform .8s .6s var(--offer-ease)}
.js .offer-conversation.is-in{border-top-color:#faf7ef26}
.js .offer-conversation.is-in .offer-slide{clip-path:inset(0 0 0 0)}
.js .offer-conversation.is-in .offer-slide-knob{opacity:1;transform:none;animation:offer-nudge 1.1s 1.5s var(--offer-ease) 1}
.js .offer-conversation.is-in .offer-slide-text{opacity:1;transform:none}
.js .offer-conversation.is-in .offer-slide:hover .offer-slide-text,.js .offer-conversation.is-in .offer-slide:focus-visible .offer-slide-text{transform:translateX(calc(var(--knob) * -1));transition-delay:0s}
.js .offer-conversation.is-in .offer-slide.is-dragging .offer-slide-text{transition:none}
@keyframes offer-nudge{0%,100%{transform:none}35%{transform:translateX(34px)}60%{transform:translateX(-4px)}}

/* ---------- tablet: two by two ---------- */
@media(max-width:1000px){
  .offer-ring{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offer-card{--slot:0!important}
  .offer-card a{min-height:240px}
}
/* ---------- phone: a swipeable row, each card turning as it passes the centre ---------- */
@media(max-width:700px){
  .offer-image-hero{min-height:520px}.offer-ideas-image{object-position:68% center}
  .offer-image-hero::after{background:linear-gradient(180deg,#111a20a0 0%,transparent 26%),linear-gradient(0deg,#111a20d8 0%,#111a2040 60%,#111a2050)}
  .offer-image-content .crumbs{font-size:11px}
  .offer-opening h1{font-size:clamp(60px,min(22vw,14svh),110px)}
  .offer-opening-copy{font-size:clamp(19px,2.8svh,24px)}
  .offer-screen{min-height:0;padding-block:64px 72px;gap:36px}
  .offer-lead,.offer-aya-link{grid-template-columns:1fr;gap:20px}
  .offer-lead h2{font-size:56px}.offer-reveal{font-size:21px}
  .offer-ring{display:flex;gap:14px;margin-inline:calc(var(--gutter) * -1);padding:10px var(--gutter) 24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;transform:none;perspective:900px}
  .offer-ring::-webkit-scrollbar{display:none}
  .offer-card{flex:0 0 78%;scroll-snap-align:center;transform:rotateY(calc(var(--turn,0) * -28deg)) scale(calc(1 - var(--away,0) * .08));transition:none}
  .offer-card a{min-height:300px}
  .offer-aya-word{font-size:110px}.offer-aya-text{font-size:22px}.offer-aya-mark{height:90%;right:-20%}
  .offer-slide{--knob:56px}
}
@media(max-height:500px){.offer-image-hero{min-height:420px}.offer-opening h1{font-size:clamp(40px,15svh,80px)}.offer-opening-copy{font-size:18px}}
@media(prefers-reduced-motion:reduce){
  .offer-page *,.offer-page *::before,.offer-page *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  .offer-ring{transform:none}.offer-card{transform:none!important;opacity:1}
  .js .offer-reveal .w{opacity:1}
  .js .offer-conversation .offer-slide,.js .offer-conversation .offer-slide-knob,.js .offer-conversation .offer-slide-text{clip-path:none;opacity:1;transform:none}
  .js .offer-conversation{border-top-color:#faf7ef26}
}
/* "Four ways in." sits over hands turning a cube. The film stays in the background, softened, faint and washed in cream,
   fading out at the top and bottom, so the cards and the words always lead. */
.offer-expertise{position:relative;isolation:isolate;overflow:hidden}
.offer-film{position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
.offer-film video{width:100%;height:100%;object-fit:cover;opacity:0;filter:brightness(1.45) contrast(.85) saturate(1.15);transition:opacity 1.6s ease}
.offer-film.is-on video{opacity:.2}
@media(prefers-reduced-motion:reduce){.offer-film video{opacity:.2;transition:none}}