/* The AYA Approach is set in the logo's landscape. The page and its navbar share one green (the logo's door). As the
   walk reaches each stop, the whole page takes on that part of the logo: canopy for Terrain, the clay walls for Self
   Mastery, the thatch for Relational Effectiveness, then the sky, the grass and the path for the points of focus.
   Everything is centred: the photo-filled AYA, the diagram above its words, the close and its call to action. */

body.interior-page.svc-page.aya-page{
  --aya-bg:#efe3c8;--aya-fg:#26301a;--aya-accent:#4f5e2a;--aya-field:#c7cfa3;--aya-field-o:.75;--aya-btn:#3f4a28;--aya-btn-fg:#f6f2e6;
  --aya-soft:color-mix(in srgb,var(--aya-fg) 86%,var(--aya-bg));
  --ink:var(--aya-fg);--cream:var(--aya-bg);--gold:var(--aya-accent);--gold-text:var(--aya-accent);--muted:var(--aya-soft);--rule:color-mix(in srgb,var(--aya-fg) 24%,transparent);
  background:var(--aya-bg);color:var(--aya-fg);transition:background-color .9s ease,color .9s ease}
/* path, grass, clay walls, thatch, door, sky, canopy, trunk: the logo, stop by stop */
body.interior-page.svc-page.aya-page[data-tone="terrain"],.aya-page .aya-step[data-tone="terrain"]{--aya-bg:#c7cfa3;--aya-accent:#7a3f22;--aya-field:#eef1df;--aya-field-o:.8}
body.interior-page.svc-page.aya-page[data-tone="self"],.aya-page .aya-step[data-tone="self"]{--aya-bg:#bf7f57;--aya-fg:#1f170f;--aya-accent:#f6e7cc;--aya-field:#efe3c8;--aya-field-o:.5}
body.interior-page.svc-page.aya-page[data-tone="relational"],.aya-page .aya-step[data-tone="relational"]{--aya-bg:#c2a55a;--aya-fg:#211c0c;--aya-accent:#3f4a28;--aya-field:#efe3c8;--aya-field-o:.55}
body.interior-page.svc-page.aya-page[data-tone="you"],body.interior-page.svc-page.aya-page[data-tone="door"],.aya-page .aya-step[data-tone="you"],.aya-page .aya-step[data-tone="door"],.aya-page .aya-close,body.aya-page .tpp-footer{--aya-bg:#3f4a28;--aya-fg:#f6f2e6;--aya-accent:#e0c27a;--aya-field:#c7cfa3;--aya-field-o:.18;--aya-btn:#c2a55a;--aya-btn-fg:#211c0c}
body.interior-page.svc-page.aya-page[data-tone="clarity"],.aya-page .aya-step[data-tone="clarity"]{--aya-bg:#e7e8d9;--aya-accent:#9a5634;--aya-field:#c7cfa3;--aya-field-o:.6}
body.interior-page.svc-page.aya-page[data-tone="resourcefulness"],.aya-page .aya-step[data-tone="resourcefulness"]{--aya-bg:#6e7e3d;--aya-fg:#fbf8ef;--aya-accent:#f2df9e;--aya-field:#c7cfa3;--aya-field-o:.28;--aya-btn:#c2a55a;--aya-btn-fg:#211c0c}
body.interior-page.svc-page.aya-page[data-tone="balance"],.aya-page .aya-step[data-tone="balance"]{--aya-bg:#605448;--aya-fg:#f6f2e6;--aya-accent:#e0c27a;--aya-field:#efe3c8;--aya-field-o:.2;--aya-btn:#c2a55a;--aya-btn-fg:#211c0c}

/* The navbar sits inside the page's colour, never a separate strip. */
body.aya-page .tpp-header.site-header{background:var(--aya-bg)!important;border-bottom-color:transparent!important;color:var(--aya-fg);transition:background-color .9s ease,color .9s ease}
body.aya-page .tpp-header .tpp-brand,body.aya-page .tpp-header .tpp-menu{color:var(--aya-fg)}
body.aya-page .tpp-header .tpp-button{background:var(--aya-btn);border-color:var(--aya-btn);color:var(--aya-btn-fg);transition:background-color .9s,color .9s}
@media(min-width:1100px){body.aya-page .tpp-nav-label>a,body.aya-page .tpp-nav-trigger{color:var(--aya-fg)}body.aya-page .tpp-nav-label>a:hover,body.aya-page .tpp-nav-trigger:hover{color:var(--aya-accent)}}
body.aya-page .tpp-footer{background:var(--aya-bg);color:var(--aya-fg);border-top:1px solid var(--rule);transition:background-color .9s ease,color .9s ease}

/* ---------- opening: AYA cut out of the logo's tree green, the photograph behind it; scrolling walks you through
   the Y and into the picture. The navbar floats on the green with no strip of its own. ---------- */
.aya-hero{position:relative;height:230svh;margin-top:calc(var(--hh) * -1)}
.aya-hero-pin{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;background:#3f4a28}
.aya-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;scale:calc(1.14 - var(--zoom,0) * .14)}
.aya-hero-cut{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:var(--ox,50%) var(--oy,60%);scale:var(--s,1)}
.aya-cut-cover{fill:url(#aya-green)}
.aya-cut-word,.aya-hero-gap{font-family:'Fraunces',Georgia,serif;font-weight:900;font-variation-settings:"SOFT" 100,"opsz" 144;letter-spacing:-.05em}
.aya-hero-pin::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#14190c99 0%,#14190c40 30%,#14190c73 100%);opacity:var(--zoom,0)}
.aya-hero-inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.6svh,26px);padding-block:calc(var(--hh) + clamp(36px,7svh,72px)) clamp(28px,5svh,56px);text-align:center;color:#f7f3e8;opacity:calc(1 - var(--zoom,0) * 4)}
.aya-hero-rail{position:absolute;top:calc(var(--hh) + clamp(4px,1svh,12px));left:0;right:0;display:flex;justify-content:center}
.aya-hero .svc-index a{color:#f7f3e8;opacity:.78}.aya-hero .svc-index a[aria-current]{opacity:1}.aya-hero .svc-index a::after{background:#e0c27a}
.aya-hero h1{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.6svh,16px);margin:0;font:italic 400 clamp(26px,2.6vw,46px)/1 var(--serif);color:#f7f3e8}
.aya-hero-gap{display:block;width:max-content;height:calc(var(--aya-size) * var(--cap,.72));overflow:hidden;font-size:var(--aya-size);font-style:normal;line-height:var(--cap,.72);color:transparent;--aya-size:min(34vw,50svh)}
.aya-hero-ask{position:absolute;z-index:1;left:50%;top:54%;width:min(88%,24ch);margin:0;translate:-50% calc(-50% + (1 - var(--said,0)) * 28px);font:italic 400 clamp(30px,3.6vw,60px)/1.18 var(--serif);letter-spacing:-.01em;text-align:center;text-wrap:balance;color:#fbf8ef;text-shadow:0 2px 30px #14190c80;opacity:var(--said,0)}
.aya-hero-inner>*{animation:aya-fade 1s ease backwards}.aya-hero h1{animation-delay:.15s}
.aya-hero-cut{animation:aya-cut-in 1.4s var(--ease,cubic-bezier(.22,1,.36,1)) backwards}
@keyframes aya-fade{from{opacity:0;translate:0 14px}}
@keyframes aya-cut-in{from{opacity:0;scale:1.06}}
/* The navbar sits on the green, then takes each stop's colour once the walk begins. */
body.aya-page.aya-over-hero .tpp-header.site-header{background:transparent!important}
body.aya-page.aya-over-hero .tpp-header .tpp-brand,body.aya-page.aya-over-hero .tpp-header .tpp-menu{color:#f7f3e8}
body.aya-page.aya-over-hero .tpp-header .tpp-button{background:#c2a55a;border-color:#c2a55a;color:#211c0c}
@media(min-width:1100px){body.aya-page.aya-over-hero .tpp-nav-label>a,body.aya-page.aya-over-hero .tpp-nav-trigger{color:#f7f3e8}}

/* ---------- the walk: the diagram above, its words centred beneath ---------- */
.aya-stage{position:relative;color:var(--aya-fg)}
.aya-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.1fr) minmax(0,1fr);justify-items:center;text-align:center;padding-block:clamp(12px,2.4svh,28px) clamp(20px,3.4svh,40px)}
.aya-map{grid-row:1;grid-column:1;width:100%;min-height:0;display:flex;align-items:center;justify-content:center}
.aya-svg{display:block;width:auto;height:100%;max-width:100%;overflow:visible}
.aya-intro,.aya-panel{grid-row:2;grid-column:1;align-self:start;width:min(100%,48em);display:flex;flex-direction:column;align-items:center;transition:opacity .6s,transform .9s var(--ease)}
.aya-def{margin:clamp(8px,2svh,24px) 0 0;max-width:36ch;font:400 clamp(22px,min(2vw,3.8svh),32px)/1.3 var(--serif);letter-spacing:-.012em;color:var(--aya-fg)}
.aya-group-lines{display:grid;margin-bottom:clamp(8px,1.6svh,16px)}
.aya-group-line{grid-area:1/1;margin:0;font:italic 400 clamp(17px,1.35vw,21px)/1.3 var(--serif);color:var(--aya-soft);opacity:0;transition:opacity .6s}
.aya-stage[data-state="1"] .aya-group-dims,.aya-stage[data-state="2"] .aya-group-dims,.aya-stage[data-state="3"] .aya-group-dims,
.aya-stage[data-state="5"] .aya-group-focus,.aya-stage[data-state="6"] .aya-group-focus,.aya-stage[data-state="7"] .aya-group-focus{opacity:1}
.aya-step-group{display:none}
.aya-steps{display:grid;width:100%}
.aya-step{grid-area:1/1;align-self:start;display:flex;flex-direction:column;align-items:center}
.aya-step h2{margin:0 0 clamp(8px,1.6svh,16px);font:400 clamp(44px,min(5vw,8.4svh),96px)/.95 var(--serif);letter-spacing:-.044em;color:var(--aya-fg)}
.aya-step.is-focus h2{font-style:italic}
.aya-step.is-you h2,.aya-step.is-close h2{max-width:16ch;font-size:clamp(38px,min(4.2vw,7.2svh),76px)}
.aya-sub{margin:0 0 clamp(10px,2svh,18px);font:italic 400 clamp(19px,min(1.6vw,2.9svh),25px)/1.3 var(--serif);color:var(--aya-accent)}
.aya-text{margin:0;max-width:52ch;font:400 clamp(17px,1.25vw,20px)/1.55 var(--serif);color:var(--aya-soft)}
.aya-qs{margin:clamp(12px,2.4svh,22px) 0 0;max-width:54ch}
.aya-qs p,.aya-walk{margin:0;font:italic 400 clamp(17px,1.3vw,21px)/1.45 var(--serif);color:var(--aya-fg)}
.aya-walk{margin-top:clamp(12px,2.4svh,22px);max-width:50ch}

/* the diagram, drawn in whatever the current stop's colours are */
.aya-field{fill:var(--aya-field);opacity:var(--aya-field-o);transition:opacity .8s,fill .9s}
.aya-edge{fill:none;stroke:var(--aya-fg);stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke .9s}
.aya-spoke{stroke:var(--aya-fg);stroke-width:1.3;stroke-dasharray:3 7;opacity:.3;transition:opacity .6s,stroke .6s,stroke-width .6s}
.aya-spoke.is-seen{opacity:.55}
.aya-spoke.is-lit{stroke:var(--aya-accent);stroke-width:4;stroke-dasharray:none;opacity:1}
.aya-node{fill:var(--aya-fg);transition:fill .5s}
.aya-node.is-lit{fill:var(--aya-accent)}
.aya-halo{fill:var(--aya-accent);opacity:0;transition:opacity .5s}
.aya-halo.is-lit{animation:aya-pulse 2.2s ease-in-out infinite}
@keyframes aya-pulse{0%,100%{opacity:.14}50%{opacity:.4}}
.aya-label text{font-family:var(--serif);fill:var(--aya-fg);paint-order:stroke;stroke:var(--aya-bg);stroke-width:9px;stroke-linejoin:round;transition:fill .5s,stroke .9s}
.aya-label.is-corner text{font-size:28px;letter-spacing:-.02em}
.aya-label.is-focus text{font-size:24px;font-style:italic;fill:var(--aya-soft)}
.aya-label.is-lit text{fill:var(--aya-accent)}
.aya-label.is-centre text{font-size:32px;font-style:italic;fill:var(--aya-bg);stroke:none}
.aya-you{fill:var(--aya-fg);transition:fill .9s}
.aya-you-halo{fill:none;stroke:var(--aya-accent);stroke-width:3;opacity:0}
.aya-you-halo.is-lit{animation:aya-pulse-ring 2.2s ease-in-out infinite}
@keyframes aya-pulse-ring{0%,100%{opacity:.25}50%{opacity:.9}}
.aya-ring-g{opacity:0;transform:scale(.45);transform-box:view-box;transform-origin:440px 400px;transition:opacity .8s,transform 1.1s var(--ease)}
.aya-stage.has-ring .aya-ring-g{opacity:1;transform:none}
.aya-ring{fill:none;stroke:var(--aya-fg);stroke-width:1.6;stroke-dasharray:8 10;opacity:.55}
.aya-stage.has-ring .aya-ring{animation:aya-flow 5s linear infinite}
@keyframes aya-flow{to{stroke-dashoffset:-72}}
.aya-arrow{fill:var(--aya-fg);opacity:.6}
.aya-dot{fill:var(--aya-bg);stroke:var(--aya-fg);stroke-width:2;transition:fill .5s,stroke .5s}
.aya-dot.is-lit{fill:var(--aya-accent);stroke:var(--aya-accent)}

/* the diagram draws itself on arrival */
.aya-node,.aya-label,.aya-you,.aya-field{opacity:0}
.aya-node,.aya-label,.aya-you{transition:opacity .7s,fill .5s}
.aya-stage.is-in .aya-edge{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease) .2s,stroke .9s}
.aya-stage.is-in .aya-field{opacity:var(--aya-field-o);transition:opacity .8s 1.2s,fill .9s}
.aya-stage.is-in .aya-you{opacity:1;transition-delay:.9s}
.aya-stage.is-in .aya-node,.aya-stage.is-in .aya-label{opacity:1;transition-delay:1.4s}

/* states on roomy screens */
.aya-stage:not([data-state="0"]) .aya-intro{opacity:0;transform:translateY(-16px);pointer-events:none}
.aya-stage[data-state="0"] .aya-panel{opacity:0;pointer-events:none}
.aya-step:not(.is-active){pointer-events:none}
.js .aya-step h2{clip-path:inset(0 50% 0 50%);transition:clip-path .9s var(--ease) .08s}
.js .aya-step.is-active h2{clip-path:inset(-20% -6% -30% -6%)}
.js .aya-step.is-past h2{transition-duration:.45s;transition-delay:0s}
.js .aya-step .aya-anim{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .8s var(--ease)}
.js .aya-step.is-active .aya-anim{opacity:1;transform:none;transition-delay:calc(.25s + var(--d, 0) * .1s)}
.js .aya-intro>*{opacity:0;transform:translateY(18px);transition:opacity .8s,transform 1s var(--ease)}
.js .aya-stage.is-in .aya-intro>*{opacity:1;transform:none}
@media(min-width:901px) and (min-height:641px) and (prefers-reduced-motion:no-preference){
  .aya-pin{position:sticky;top:var(--hh);height:calc(100svh - var(--hh))}
  .aya-grid{height:100%}
}

/* ---------- see it at work: centred, running straight on into the footer ---------- */
.aya-close{--aya-soft:color-mix(in srgb,var(--aya-fg) 86%,var(--aya-bg));--rule:color-mix(in srgb,var(--aya-fg) 24%,transparent);background:var(--aya-bg);color:var(--aya-fg);text-align:center;padding-block:clamp(96px,14svh,160px) clamp(64px,9svh,110px)}
.aya-close h2{margin:0 0 clamp(32px,5svh,56px);font:italic 400 clamp(44px,5.4vw,92px)/1 var(--serif);letter-spacing:-.04em;color:var(--aya-accent)}
.aya-links{list-style:none;margin:0 auto;padding:0;max-width:860px;border-top:1px solid var(--rule)}
.aya-links a{display:block;padding:clamp(22px,4svh,34px) 0;border-bottom:1px solid var(--rule);color:var(--aya-fg);text-decoration:none}
.aya-link-title{display:block;font:400 clamp(26px,2.8vw,44px)/1.08 var(--serif);letter-spacing:-.025em;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:8px;transition:text-decoration-color .4s}
.aya-links a:hover .aya-link-title,.aya-links a:focus-visible .aya-link-title{text-decoration-color:currentColor}
.aya-link-title small{display:block;margin-top:10px;font:italic 400 clamp(16px,1.2vw,19px)/1.4 var(--serif);color:var(--aya-soft)}
body.aya-page .aya-close .svc-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;margin-top:clamp(64px,9svh,110px);padding:0;background:none;text-align:center}
body.aya-page .aya-close .svc-cta .cta-q{max-width:none;font-size:clamp(34px,3.6vw,56px);color:var(--aya-fg)}
body.aya-page .aya-close .tpp-button{background:var(--aya-btn);border-color:var(--aya-btn);color:var(--aya-btn-fg)}

/* ---------- phones, tablets and short windows: everything in one centred column ---------- */
@media(max-width:900px),(max-height:640px),(prefers-reduced-motion:reduce){
  .aya-grid{display:block;padding-block:20px clamp(40px,7svh,72px)}
  .aya-map{height:min(42svh,380px)}
  .aya-intro{padding-block:20px 12px;margin-inline:auto}
  .aya-panel{margin-inline:auto}
  .aya-group-lines{display:none}
  .aya-stage:not([data-state="0"]) .aya-intro{opacity:1;transform:none;pointer-events:auto}
  .aya-stage[data-state="0"] .aya-panel{opacity:1;pointer-events:auto}
  .aya-steps{display:flex;flex-direction:column}
  .aya-step{padding:44px var(--gutter);margin-inline:calc(var(--gutter) * -1);pointer-events:auto;--aya-soft:color-mix(in srgb,var(--aya-fg) 86%,var(--aya-bg));background:var(--aya-bg);color:var(--aya-fg)}
  .aya-steps{margin-top:24px}
  .aya-step-group{display:block;margin:0 0 14px;font:italic 400 19px/1.3 var(--serif);color:var(--aya-soft)}
  .js .aya-step h2{clip-path:none}
  .js .aya-step .aya-anim,.js .aya-intro>*{opacity:1;transform:none}
}
@media(max-width:900px){
  .aya-hero{height:200svh}
  .aya-hero-rail{display:none}
  .aya-hero-gap{--aya-size:min(44vw,34svh)}
  .aya-step h2{font-size:clamp(42px,12vw,60px)}
  .aya-step.is-you h2,.aya-step.is-close h2{font-size:clamp(34px,9.5vw,46px)}
}
@media(prefers-reduced-motion:reduce){
  .aya-hero{height:auto}.aya-hero-pin{position:relative;height:calc(100svh + var(--hh))}.aya-hero-inner>*,.aya-hero-cut{animation:none}
  .aya-hero-inner{justify-content:flex-start;padding-top:calc(var(--hh) + 15svh)}.aya-hero-ask{--said:1;top:auto;bottom:6svh;translate:-50% 0;font-size:clamp(22px,2.2vw,32px);text-shadow:none}
  .aya-edge{stroke-dashoffset:0}
  .aya-node,.aya-label,.aya-you{opacity:1}
  .aya-field{opacity:var(--aya-field-o)}
  .aya-ring-g{opacity:1;transform:none}
  body.interior-page.svc-page.aya-page,body.aya-page .tpp-header.site-header,body.aya-page .tpp-footer{transition:none}
}