/* About page — white, centred, elegant */

body.about{background:#fff;color:#1b1610}
/* transparent bar over the header photo, solid once scrolled past it */
.about .head:not(.scrolled){background:linear-gradient(180deg,rgba(10,8,6,.58) 0%,rgba(10,8,6,.26) 55%,rgba(10,8,6,0) 100%)}
.about .head:not(.scrolled) .menub{text-shadow:0 1px 10px rgba(0,0,0,.35)}
.about .head.scrolled{background:#fff;box-shadow:0 1px 0 rgba(24,18,12,.08)}
.about .head.scrolled .logo-light{display:none}
.about .head.scrolled .logo-dark{display:block}

.aw{max-width:1080px;margin-inline:auto;padding-inline:var(--gutter);width:100%}
.ab-sec{padding-block:clamp(4.5rem,10vh,8rem);text-align:center}
.ab-sec .eyebrow{display:block;margin-bottom:1.2rem}
.line-top{border-top:1px solid rgba(24,18,12,.1)}
.tint{background:var(--tint)}

/* hero image */
.ab-hero{position:relative;aspect-ratio:2.35/1;max-height:660px;overflow:hidden}
.ab-hero .bg{position:absolute;inset:0;background:url('hero-kadizora.jpg') center 50%/cover}
.ab-hero .scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(12,14,11,.52) 0%,rgba(12,14,11,.14) 30%,rgba(12,14,11,0) 62%),
  linear-gradient(0deg,rgba(12,14,11,.5) 0%,rgba(12,14,11,0) 22%)}

/* property credit, bottom left of the photo */
.ph-cap{position:absolute;left:var(--gutter);bottom:clamp(1rem,2.6vh,1.7rem);z-index:3;text-align:left}
.ph-cap .r{display:block;width:26px;height:1px;background:var(--burnt-bright);margin-bottom:.45rem;opacity:.85}
.ph-cap .nm{font-family:'Parisienne',cursive;font-size:clamp(1.05rem,1.5vw,1.45rem);line-height:1.2;
  color:rgba(245,235,221,.92);text-shadow:0 1px 12px rgba(0,0,0,.55)}
.ab-hero .aw{position:relative;z-index:2;padding-top:clamp(5rem,10vh,7rem);padding-bottom:clamp(3.4rem,7vh,4.6rem);text-align:center}
.ab-hero .eyebrow{display:block;margin-bottom:1rem;color:var(--burnt-bright)}
.ab-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.1rem,4.4vw,3.9rem);line-height:1.08;
  letter-spacing:-.02em;margin:0 auto;max-width:20ch;color:var(--cream)}
.ab-hero h1 .it{font-style:italic;color:var(--burnt-bright)}

/* shared centred headings */
.ab-sec h1,.ab-sec h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,3.8vw,3.2rem);
  line-height:1.08;letter-spacing:-.02em;margin:0 auto;max-width:20ch}
.ab-sec h1 .it,.ab-sec h2 .it{font-style:italic;color:var(--burnt)}
.ab-sec h1.h-wide,.ab-sec h2.h-wide{max-width:38ch}
.lede{font-family:var(--serif);font-weight:300;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.5;
  color:#2a2119;margin:1.6rem auto 0;max-width:46ch}
.ab-body{max-width:78ch;margin:2rem auto 0}
.ab-body p{margin:0 auto 1.2rem;color:#4a4038;line-height:1.75}
.ab-body p:last-child{margin-bottom:0}
.ab-body strong{color:#1b1610;font-weight:600}
.rule-c{width:54px;height:1px;background:var(--burnt);margin:2.2rem auto 0;opacity:.6}

/* questions */
.q-list{list-style:none;margin:2.6rem auto 0;padding:0;max-width:60ch;
  border-top:1px solid rgba(24,18,12,.1)}
.q-list li{padding:1.15rem 0;border-bottom:1px solid rgba(24,18,12,.1);
  font-family:var(--serif);font-weight:300;font-size:clamp(1.1rem,1.8vw,1.45rem);color:#241a12;line-height:1.4}
.ab-pull{font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,2.4vw,2rem);
  color:var(--burnt);margin:2.4rem auto 0;max-width:28ch}

/* journey band */
.ab-journey{background:#12100c;color:var(--cream);text-align:center}
.ab-journey .eyebrow{color:var(--burnt-bright)}
.ab-journey h2{color:var(--cream)}
.ab-journey h2 .it{color:var(--burnt-bright)}
.ab-journey .ab-body p{color:#cec0ad}
.ab-steps{display:flex;align-items:flex-start;justify-content:center;gap:0;margin-top:3.2rem;flex-wrap:nowrap}
.ab-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;width:130px;flex:0 0 auto}
.ab-step .ic{width:72px;height:72px;border:1px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gold);transition:transform .4s,background .4s}
.ab-step .ic svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ab-step:hover .ic{transform:translateY(-4px);background:rgba(199,161,106,.1)}
.ab-step .lbl{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream)}
.ab-arrow{width:56px;height:1px;background:rgba(199,161,106,.35);margin-top:36px;position:relative}
.ab-arrow::after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;
  border-top:1px solid var(--gold);border-right:1px solid var(--gold);transform:rotate(45deg);opacity:.6}
.ab-journey .ab-close{margin:2.8rem auto 0;color:#cec0ad;max-width:60ch}

/* why grid */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(24,18,12,.1);
  border:1px solid rgba(24,18,12,.1);margin-top:3rem;text-align:center}
.why-cell{background:#fff;padding:2.4rem 1.7rem;min-height:210px;display:flex;flex-direction:column;align-items:center}
.tint .why-cell{background:var(--tint)}
.why-cell .wn{font-family:var(--serif);font-style:italic;color:var(--burnt);font-size:1rem;margin-bottom:.8rem}
.why-cell h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;margin:0 0 .6rem;color:#1b1610}
.why-cell p{margin:0;color:#4a4038;font-size:.96rem;line-height:1.65;max-width:34ch}

/* story */
.ab-story{padding-block:clamp(3.5rem,7vh,5rem)}
.story-swap{font-family:var(--serif);font-weight:300;font-size:clamp(1.45rem,2.9vw,2.4rem);
  color:#2a2119;line-height:1.3;margin:2rem auto 0;max-width:42ch}
.story-swap .sw-slot{display:inline-block;text-align:left;white-space:nowrap}
.story-swap .sw-art,.story-swap .sw-word{display:inline-block;
  transition:opacity .4s ease,transform .4s ease}
.story-swap .sw-word{font-style:italic;color:var(--burnt)}
.story-swap .sw-art.out,.story-swap .sw-word.out{opacity:0;transform:translateY(-.35em)}
.story-tail{font-family:var(--serif);font-weight:300;font-size:clamp(1.05rem,1.7vw,1.35rem);
  color:#5b4a3b;margin:.9rem auto 0;max-width:40ch;line-height:1.45}
.ab-story .ab-body{margin-top:1.2rem}
.ab-story .ab-body p{margin-bottom:.7rem}
.ab-invite{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.7vw,2.3rem);
  color:var(--burnt);margin-top:1.2rem}
.story-close{max-width:70ch;margin:1.4rem auto 0;color:#4a4038;line-height:1.75}
.story-btn{margin-top:2rem}

/* cta */
.ab-cta{position:relative;overflow:hidden;color:var(--cream);text-align:center;padding-block:clamp(5rem,12vh,8rem)}
.ab-cta .bg{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(9,7,5,.74),rgba(9,7,5,.84)), url('journey.jpg') center 42%/cover}
.ab-cta .aw{position:relative;z-index:2}
.ab-cta .eyebrow{color:var(--burnt-bright)}
.ab-cta h2{color:var(--cream);max-width:18ch;margin:.8rem auto 0}
.ab-cta h2 .it{font-style:italic;color:var(--burnt-bright)}
.ab-cta p{color:#e8dccb;max-width:56ch;margin:1.4rem auto 0}
.ab-cta .strong-line{font-family:var(--serif);font-style:italic;color:#f3e6d5;
  font-size:clamp(1.1rem,1.8vw,1.35rem);margin-top:1.2rem}
.ab-cta .btn{margin-top:2.2rem}

@media(max-width:860px){
  .why-grid{grid-template-columns:1fr}
  .ab-arrow{display:none}
  .ab-steps{flex-wrap:wrap;gap:2rem 1rem}
  .ab-step{width:40%}
}


@media(max-width:760px){
  .ab-hero{aspect-ratio:auto;min-height:300px;max-height:none}
}


/* ---------- journey steps: rings trace, arrows shoot, on a loop ---------- */
.ab-steps .ab-step .ic{position:relative;border-color:transparent}
.ab-steps .ab-step .ic svg.ring{position:absolute;top:-1px;left:-1px;
  width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none}
.ab-steps .ring circle{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.ab-steps .ring .rt{stroke:rgba(199,161,106,.2)}
.ab-steps .ring .rd{stroke:var(--gold);stroke-linecap:round;
  stroke-dasharray:223;stroke-dashoffset:223;
  transform:rotate(-90deg);transform-origin:50% 50%}
.ab-steps .ab-step .ic svg:not(.ring){opacity:0}
.ab-steps .ab-arrow{background:none}
.ab-steps .ab-arrow::before{content:"";position:absolute;inset:0;background:rgba(199,161,106,.35);
  transform:scaleX(0);transform-origin:left center}
.ab-steps .ab-arrow::after{opacity:0}

/* the loop runs once the row has scrolled into view */
.ab-steps.in .ring .rd{animation:aRing 6s cubic-bezier(.4,0,.2,1) infinite}
.ab-steps.in .ab-step .ic svg:not(.ring){animation:jIcon 6s ease infinite}
.ab-steps.in .ab-arrow::before{animation:jLine 6s cubic-bezier(.4,0,.2,1) infinite}
.ab-steps.in .ab-arrow::after{animation:jHead 6s cubic-bezier(.4,0,.2,1) infinite}

@keyframes aRing{
  0%{stroke-dashoffset:223}
  12%{stroke-dashoffset:0}
  88%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-223}
}

.ab-steps .ab-step:nth-child(1) .ring .rd{animation-delay:0.0s}
.ab-steps .ab-step:nth-child(1) .ic svg:not(.ring){animation-delay:0.0s}
.ab-steps .ab-step:nth-child(3) .ring .rd{animation-delay:0.84s}
.ab-steps .ab-step:nth-child(3) .ic svg:not(.ring){animation-delay:0.84s}
.ab-steps .ab-step:nth-child(5) .ring .rd{animation-delay:1.68s}
.ab-steps .ab-step:nth-child(5) .ic svg:not(.ring){animation-delay:1.68s}
.ab-steps .ab-step:nth-child(7) .ring .rd{animation-delay:2.52s}
.ab-steps .ab-step:nth-child(7) .ic svg:not(.ring){animation-delay:2.52s}
.ab-steps .ab-step:nth-child(9) .ring .rd{animation-delay:3.36s}
.ab-steps .ab-step:nth-child(9) .ic svg:not(.ring){animation-delay:3.36s}
.ab-steps .ab-arrow:nth-child(2)::before{animation-delay:0.42s}
.ab-steps .ab-arrow:nth-child(2)::after{animation-delay:0.42s}
.ab-steps .ab-arrow:nth-child(4)::before{animation-delay:1.26s}
.ab-steps .ab-arrow:nth-child(4)::after{animation-delay:1.26s}
.ab-steps .ab-arrow:nth-child(6)::before{animation-delay:2.1s}
.ab-steps .ab-arrow:nth-child(6)::after{animation-delay:2.1s}
.ab-steps .ab-arrow:nth-child(8)::before{animation-delay:2.94s}
.ab-steps .ab-arrow:nth-child(8)::after{animation-delay:2.94s}

@media(prefers-reduced-motion:reduce){
  .ab-steps.in .ring .rd,
  .ab-steps.in .ab-step .ic svg:not(.ring),
  .ab-steps.in .ab-arrow::before,
  .ab-steps.in .ab-arrow::after{animation:none}
  .ab-steps .ring .rd{stroke-dashoffset:0}
  .ab-steps .ab-step .ic svg:not(.ring){opacity:1}
  .ab-steps .ab-arrow::before{transform:scaleX(1)}
  .ab-steps .ab-arrow::after{opacity:1;transform:translateX(0) rotate(45deg)}
}