/* =========================================================
   ABOUT — elegant serif editorial (ref: Beachwood)
   ========================================================= */
.ab{--serif:"Cormorant Garamond",Georgia,"Times New Roman",serif}

/* hero */
.ab-hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:#111}
.ab-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.8s ease}
.ab-slide.is-active{opacity:1}
.ab-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 8s linear}
.ab-slide.is-active img{transform:scale(1)}
.ab-hero__shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.3),rgba(0,0,0,.66))}
.ab-hero__c{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);width:min(92vw,1000px);text-align:center}
.ab-kicker{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.ab-title{font-family:var(--serif);font-weight:300;font-size:clamp(48px,6.8vw,112px);line-height:1.02;margin:22px 0 26px;color:#fff}
.ab-title em{font-style:italic}
.ab-title .ln{display:block;overflow:hidden;padding-bottom:.06em}
.ab-title .ln>span{display:inline-block;transition:transform 1.5s var(--ease) var(--d),filter 1.4s var(--ease) var(--d),opacity 1.2s var(--d)}
.is-loading .ab-title .ln>span{transform:translateY(105%);opacity:0;filter:blur(8px)}
.ab-rule{display:block;height:0;margin:0 0 18px}
.ab-sub{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.ab-play{margin:30px auto 0;width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;color:#fff;transition:background .4s,border-color .4s}
.ab-play:hover{background:var(--red);border-color:var(--red)}
.ab-hero__foot{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.ab-count{display:flex;align-items:center;gap:12px}
.ab-count b{font-weight:500;color:#fff}
.ab-count i{width:60px;height:1px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.ab-count i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:abBar 6s linear infinite}
@keyframes abBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ab-explore{display:flex;flex-direction:column;align-items:center;gap:14px}
.ab-explore::before{content:"";width:1px;height:46px;background:linear-gradient(rgba(255,255,255,0),#fff);animation:abDrop 2.2s var(--ease) infinite}
@keyframes abDrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.ab-mem{justify-self:end}

/* ghost words */
.ghost{position:absolute;left:0;top:3vh;white-space:nowrap;font-family:var(--serif);font-weight:300;font-size:24vw;line-height:.8;letter-spacing:.08em;text-transform:uppercase;color:rgba(11,11,11,.045);pointer-events:none;user-select:none}
.ghost--right{left:auto;right:0}
.ghost--dark{color:rgba(255,255,255,.035)}

/* light editorial blocks */
.ab-intro,.ab-split{position:relative;background:#fff;color:var(--ink);padding:24vh var(--pad) 18vh;overflow:hidden}
.ab-split--tight{padding-top:18vh;background:var(--light-2)}
.ab-values{background:var(--shade-3)!important}
.ab-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8vw;align-items:center;max-width:1180px;margin:0 auto}
.ab-label{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-muted)}
.ab-lead{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.7vw,42px);line-height:1.16;color:#111;margin-bottom:24px}
.dropcap{float:left;font-size:3.1em;line-height:.8;margin:.06em .08em 0 0;color:var(--red)}
.ab-body{font-size:14px;line-height:1.85;color:var(--ink-muted);max-width:470px}
.ab-body+.ab-body{margin-top:14px}
.ab-more{display:inline-flex;align-items:center;gap:14px;margin-top:34px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#111}
.ab-more span{width:46px;height:46px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;transition:background .4s,color .4s,transform .5s var(--ease-out)}
.ab-more:hover span{background:var(--red);color:#fff;transform:translateX(6px)}
.ab-frame{position:relative;margin:0;aspect-ratio:3/4;width:100%;max-width:440px;justify-self:center}
.ab-frame--tall{aspect-ratio:4/5}
.ab-frame::before{content:"";position:absolute;inset:-26px 26px 26px -26px;border:1px solid rgba(255,0,0,.5);pointer-events:none}
.ab-frame img{position:relative;width:100%;height:100%;object-fit:cover}
.ab-checks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:30px;font-size:13px;color:#111}
.ab-checks li{display:flex;gap:10px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--ink-hair)}
.ab-checks li::before{content:"";width:6px;height:6px;background:var(--red);transform:rotate(45deg);flex:0 0 auto}

/* promise band */
.ab-band{position:relative;height:118vh;overflow:hidden;display:grid;place-items:center;background:#111}
.ab-band__media{position:absolute;inset:-12% 0}
.ab-band__media img{width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.85)}
.ab-band__mark{position:absolute;left:50%;top:50%;width:min(24vw,300px);transform:translate(-50%,-50%);opacity:.16}
.ab-band__q{position:relative;font-family:var(--serif);font-weight:300;font-size:clamp(34px,4vw,66px);line-height:1.12;text-align:center;max-width:980px;padding:0 var(--pad);color:#fff}
.ab-band__q em{font-style:italic}
.ab-band__small{position:absolute;left:10vw;bottom:9vh;margin:0;width:min(17vw,240px);aspect-ratio:1;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.ab-band__small img{width:100%;height:100%;object-fit:cover}

/* values carousel */
/* the heading and sub-line keep the standard gutters; the value cards still
   run edge to edge inside the clipped track */
.ab-values{position:relative;background:#121314;padding:17vh 0 14vh;overflow:hidden;text-align:center}
.ab-values>.ab-caps,.ab-values>.ab-caps-sub{padding-left:var(--pad);padding-right:var(--pad)}
.ab-caps{position:relative;font-family:var(--serif);font-weight:500;font-size:clamp(28px,2.6vw,40px);letter-spacing:.2em;text-transform:uppercase;color:#fff}
.ab-caps--dark{color:#111}
.ab-caps-rule{display:block;height:0;margin:18px 0 0}
.ab-caps-sub{margin-top:16px;font-size:13px;color:var(--ink-muted)}
.ab-caps-sub--light{color:var(--muted)}
.vc{position:relative;margin-top:9vh;overflow:hidden;touch-action:pan-y;cursor:grab}
.vc:active{cursor:grabbing}
.vc__track{display:flex;gap:4vw;width:max-content;transition:transform 1.1s var(--ease);will-change:transform}
.vc__card{width:min(42vw,620px);text-align:left;opacity:.3;transform:scale(.86);transition:opacity .8s,transform 1.1s var(--ease)}
.vc__card.is-active{opacity:1;transform:none}
.vc__card figure{margin:0;aspect-ratio:16/10;overflow:hidden}
.vc__card img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.vc__num{display:block;margin-top:22px;font-size:10px;letter-spacing:.3em;color:var(--red)}
.vc__card h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.2vw,34px);color:#fff;margin:8px 0 8px}
.vc__card p{font-size:13.5px;line-height:1.7;color:var(--muted);max-width:480px;opacity:0;transition:opacity .6s .2s}
.vc__card.is-active p{opacity:1}
.vc__nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:6vh}
.vc__nav button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;color:#fff;transition:background .3s,border-color .3s}
.vc__nav button:hover{background:var(--red);border-color:var(--red)}
.vc__bar{position:relative;width:220px;height:1px;background:rgba(255,255,255,.15)}
.vc__bar i{position:absolute;left:0;top:-.5px;height:2px;width:calc(100% / var(--n,8));background:var(--red);transform:translateX(calc(var(--i,0) * 100%));transition:transform .8s var(--ease)}

/* track record */
.ab-journal{position:relative;background:#fff;color:#111;padding:16vh var(--pad) 12vh;text-align:center}
.ab-journal::before{content:"";position:absolute;left:0;right:0;top:48%;bottom:24%;background:var(--paper-2)}
.jr{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;max-width:1340px;margin:8vh auto 0;text-align:left}
.jr__card{background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.06);display:flex;flex-direction:column;transition:transform .6s var(--ease-out),box-shadow .6s}
.jr__card:hover{transform:translateY(-8px);box-shadow:0 30px 70px rgba(0,0,0,.12)}
.jr__card figure{margin:0;aspect-ratio:4/3;overflow:hidden}
.jr__card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.jr__card:hover img{transform:scale(1.06)}
.jr__body{padding:18px 0 0 18px;flex:1;display:flex;flex-direction:column}
.jr__body small{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--red)}
.jr__body h3{font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.25;margin:10px 18px 18px 0}
.jr__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--ink-hair);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted)}
.jr__btn{width:44px;height:44px;background:#111;color:#fff;display:grid;place-items:center;transition:background .3s}
.jr__card:hover .jr__btn{background:var(--red)}
.ab-btn{position:relative;display:inline-block;margin-top:7vh;padding:14px 26px;background:#111;color:#fff;font-size:10px;letter-spacing:.26em;text-transform:uppercase;outline:1px solid #111;outline-offset:3px;transition:background .3s,outline-color .3s}
.ab-btn:hover{background:var(--red);outline-color:var(--red)}

/* trust */
.ab-member{background:var(--light-3);color:#111;padding:14vh var(--pad) 18vh;text-align:center}
.ab-icon{width:50px;height:50px;border-radius:50%;border:1px solid var(--ink-hair);display:grid;place-items:center;margin:0 auto 18px;color:var(--red)}
.mem{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3vw;max-width:1120px;margin:8vh auto 0}
.mem__tile{position:relative;aspect-ratio:1;overflow:hidden}
.mem__tile:nth-child(even){margin-top:30px}
.mem__tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.mem__tile span{position:absolute;inset:0;display:grid;place-content:center;gap:6px;background:rgba(11,11,11,.55);color:#fff;transition:background .5s}
.mem__tile b{font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:.08em}
.mem__tile small{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase}
.mem__tile:hover span{background:rgba(255,0,0,.7)}
.mem__tile:hover img{transform:scale(1.08)}

@media (max-width:900px){
  .ab-grid,.ab-grid--img-left{grid-template-columns:1fr;gap:12vh}
  .ab-grid--img-left .ab-frame{order:2}
  .ab-frame{max-width:340px}
  .ab-hero__foot{grid-template-columns:1fr 1fr}
  .ab-explore{display:none}
  .ab-checks{grid-template-columns:1fr}
  .ab-band__small{display:none}
  .vc__card{width:78vw}
  .jr{grid-template-columns:1fr 1fr}
  .mem{grid-template-columns:1fr 1fr}
  .mem__tile:nth-child(even){margin-top:0}
}

/* ── design partner ────────────────────
   A dark panel before the light "Trusted & Enlisted" one, so the page
   keeps alternating. Two columns on a desktop: what the practice is on
   the left, who it is on the right; stacked on a phone. */
.ab-partner{padding:clamp(70px,9vw,120px) var(--pad) clamp(60px,8vw,110px);background:var(--bg)}
.pr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);
  align-items:start;max-width:1180px;margin:clamp(30px,4vw,54px) auto 0}
.pr__lead p{color:var(--muted);font-size:15px;line-height:1.72;margin:0 0 14px;max-width:52ch}
.pr__lead b{color:var(--text);font-weight:600}
.pr__scope{font-size:13.5px!important;color:rgba(255,255,255,.5)!important;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.pr__lead .ab-btn{margin-top:8px}

.pr__people{display:grid;gap:14px}
.pr__p{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  padding:20px 22px;border-radius:18px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  transition:background .4s,border-color .4s,transform .45s var(--ease-out)}
/* (the quiet lighten is replaced by the red below) */
.pr__ini{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--red);color:#fff;font-weight:600;font-size:14px;letter-spacing:.04em;flex:0 0 auto}
.pr__p b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.pr__p small{display:block;margin:2px 0 9px;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red)}
.pr__p p{margin:0;font-size:14px;line-height:1.68;color:var(--muted)}

@media (max-width:900px){
  .pr{grid-template-columns:1fr}
  .pr__p{padding:17px 18px;gap:13px}
  .pr__ini{width:40px;height:40px;font-size:13px}
}

/* ── the partner card you point at ────────────────────
   Red, bigger, forward — and the other one steps back so the pair never
   both look active. The red wipes up from the bottom edge instead of
   fading in, so it reads as this card changing rather than another card
   arriving. Spring easing, the smallest overshoot, nothing bouncy. */
.pr__p{position:relative;isolation:isolate;overflow:hidden;
  transition:transform .5s var(--spring),border-color .4s,box-shadow .5s var(--spring)}

/* the red itself, a layer that grows up from the bottom */
.pr__p::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--red);transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .52s var(--spring)}
.pr__p:hover::before,.pr__p:focus-within::before{transform:scaleY(1)}

.pr__p:hover,.pr__p:focus-within{
  transform:translateY(-8px) scale(1.035);
  border-color:var(--red);
  box-shadow:0 22px 46px rgba(0,0,0,.5)}

/* type and the initials invert once the red is behind them */
.pr__p:hover b,.pr__p:focus-within b{color:#fff}
.pr__p:hover p,.pr__p:focus-within p{color:rgba(255,255,255,.88)}
.pr__p:hover small,.pr__p:focus-within small{color:rgba(255,255,255,.78)}
.pr__p b,.pr__p p,.pr__p small{transition:color .4s .08s}

.pr__ini{transition:background .42s var(--spring),color .42s,transform .5s var(--spring)}
.pr__p:hover .pr__ini,.pr__p:focus-within .pr__ini{
  background:#fff;color:var(--red);transform:scale(1.06)}

/* the one you are not pointing at gets out of the way */
.pr__people:hover .pr__p:not(:hover),
.pr__people:focus-within .pr__p:not(:focus-within):not(:hover){
  transform:scale(.982);opacity:.6}

@media (prefers-reduced-motion:reduce){
  .pr__p,.pr__p::before,.pr__ini,.pr__p b,.pr__p p,.pr__p small{transition:none}
  .pr__p:hover,.pr__p:focus-within{transform:none}
  .pr__people:hover .pr__p:not(:hover){transform:none;opacity:1}
}

/* ── 4walls' own mark, and the button ────────────────────
   The mark is black type with an orange 4, so it goes on a white plate
   rather than being recoloured. Composed from the four SVGs their own
   site serves, at the positions their page reports. */
.pr__logo{display:inline-flex;align-items:center;justify-content:center;
  padding:14px 20px;margin:0 0 22px;border-radius:14px;background:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  transition:transform .45s var(--spring),box-shadow .45s var(--spring)}
.pr__logo img{display:block;height:68px;width:auto}
.pr__logo:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.48)}

/* On the red card the type reads white (she tried black and preferred
   white — white on this red is the cleaner read). */
.pr__p:hover b,.pr__p:focus-within b{color:#fff}
.pr__p:hover p,.pr__p:focus-within p{color:rgba(255,255,255,.9)}
.pr__p:hover small,.pr__p:focus-within small{color:rgba(255,255,255,.8)}

/* "Visit 4walls": white to begin with, red under the cursor. */
.pr__lead .ab-btn{background:#fff;border-color:#fff;color:#0B0B0B;
  transition:background .4s,border-color .4s,color .4s,transform .4s var(--spring),box-shadow .4s}
.pr__lead .ab-btn:hover,.pr__lead .ab-btn:focus-visible{
  background:var(--red);border-color:var(--red);color:#fff;
  transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,0,0,.3)}

@media (prefers-reduced-motion:reduce){
  .pr__logo,.pr__lead .ab-btn{transition:none}
  .pr__logo:hover,.pr__lead .ab-btn:hover{transform:none}
}

/* The heading and its line sit on one row, with no icon above — the
   section already announces itself, and the icon was one ornament too
   many. The line drops under the heading on a narrow screen. */
.pr__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 18px;
  max-width:1180px;margin:0 auto}
.pr__head .ab-caps{margin:0}
.pr__head .ab-caps-sub{margin:0}
@media (max-width:760px){ .pr__head{gap:4px} }

/* ── the partner cards: black, and white when you point at one ────────────────────
   Final state, after a few passes. The card sits black like the rest of
   the page and fills WHITE on hover — the fill still wipes up from the
   bottom edge rather than cross-fading, so it reads as one card changing
   rather than a second card arriving. Red is the constant in both
   states: the role line, and the initials disc at rest. */
.pr__p{background:#0B0B0B;border-color:rgba(255,255,255,.12);
  box-shadow:0 10px 26px rgba(0,0,0,.34)}
.pr__p b{color:#fff}
.pr__p p{color:rgba(255,255,255,.72)}
.pr__p small{color:var(--red)}
.pr__ini{background:var(--red);color:#fff}

/* the layer that wipes up is now white */
.pr__p::before{background:#fff}

.pr__p:hover,.pr__p:focus-within{background:#0B0B0B;border-color:#fff}
.pr__p:hover b,.pr__p:focus-within b{color:#0B0B0B}
.pr__p:hover p,.pr__p:focus-within p{color:rgba(11,11,11,.78)}
.pr__p:hover small,.pr__p:focus-within small{color:var(--red)}
.pr__p:hover .pr__ini,.pr__p:focus-within .pr__ini{background:#0B0B0B;color:#fff}

/* the one you are not pointing at just dims, it does not grey out */
.pr__people:hover .pr__p:not(:hover),
.pr__people:focus-within .pr__p:not(:focus-within):not(:hover){
  transform:scale(.982);opacity:.72}