/* Home */
/* One idea, used on every screen: a plate, and type that crosses onto it.
   Nothing on this page labels a section. What a screen says is how you know where you are. */
:root{
  --black:#080807;
  --gold:#d4af7a;
  --white:#f6f2ea;
  --grey:#a3a097;
  --soft:rgba(246,242,234,.74);
  --display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --micro:'Helvetica Neue',Arial,sans-serif;
  --hair:rgba(246,242,234,.11);
  --ease:cubic-bezier(.2,.7,.2,1);
  --plate:53vw;
}
h1,h2,p,blockquote,figure{margin:0}
img{display:block}
.micro{font-family:var(--micro);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey);line-height:1.6}
.gold{color:var(--gold)}
em{font-style:italic;color:var(--gold)}
.rules{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(12,1fr);pointer-events:none}
.rules span{border-left:1px solid rgba(246,242,234,.035)}
.datum{position:absolute;z-index:10;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(246,242,234,.22),rgba(246,242,234,.05) 64%,transparent)}
.datum b{position:absolute;top:-6px;width:1px;height:11px;background:rgba(246,242,234,.3)}
.plate-screen.left .datum{background:linear-gradient(270deg,rgba(246,242,234,.22),rgba(246,242,234,.05) 64%,transparent)}
/* ---------- the plate (shared) ---------- */
.screen{position:relative;height:100dvh;min-height:620px;width:100%;overflow:hidden}
.plate{position:absolute;top:0;bottom:0;right:0;width:var(--plate);overflow:hidden;background:#1a1512;
  clip-path:inset(0 0 0 0);transition:clip-path 1.15s var(--ease)}
.left .plate{right:auto;left:0}
.pre .plate{clip-path:inset(100% 0 0 0)}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transition:transform 1.8s var(--ease)}
.pre .plate img{transform:scale(1.12)}
/* the edge the type crosses is always the darker one */
.plate .shade{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,8,7,.78) 0%,rgba(8,8,7,.28) 38%,rgba(8,8,7,.05) 70%),
             linear-gradient(0deg,rgba(8,8,7,.55),transparent 38%)}
.left .plate .shade{background:linear-gradient(270deg,rgba(8,8,7,.78) 0%,rgba(8,8,7,.28) 38%,rgba(8,8,7,.05) 70%),
             linear-gradient(0deg,rgba(8,8,7,.55),transparent 38%)}
.plate.empty{background:
    radial-gradient(105% 80% at 74% 14%,rgba(240,214,175,.30),transparent 56%),
    radial-gradient(85% 65% at 22% 96%,rgba(212,175,122,.12),transparent 58%),
    linear-gradient(197deg,#4a4038 0%,#332b25 34%,#211b17 66%,#14100e 100%)}
.plate.empty::before{content:'';position:absolute;inset:-20%;
  background:linear-gradient(118deg,transparent 30%,rgba(255,246,230,.14) 43%,transparent 58%)}
.plate.empty::after{content:'';position:absolute;inset:0;
  background:radial-gradient(86% 70% at 54% 42%,transparent 34%,rgba(6,6,5,.6) 100%)}
.crop{position:absolute;width:16px;height:16px;z-index:4;border-color:rgba(212,175,122,.75);border-style:solid;border-width:0}
.crop.tl{top:18px;left:18px;border-top-width:1px;border-left-width:1px}
.crop.tr{top:18px;right:18px;border-top-width:1px;border-right-width:1px}
.crop.bl{bottom:18px;left:18px;border-bottom-width:1px;border-left-width:1px}
.crop.br{bottom:18px;right:18px;border-bottom-width:1px;border-right-width:1px}
.caption{position:absolute;z-index:4;right:22px;bottom:20px;display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right}
.left .caption{right:auto;left:22px;align-items:flex-start;text-align:left}
.caption .who{color:var(--white)}
/* ---------- chrome ---------- */
/* the header arrives once the visitor is past the arrival (the arrival carries its own large A and nav) */
.home-top{z-index:60;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:26px 5vw;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
body.scrolled .home-top{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s,background-color .4s ease,padding .4s ease}
.mark-top{display:block}
.home-top nav{display:flex;gap:30px}
.home-top nav a{color:rgba(246,242,234,.84);transition:color .3s}
.home-top nav a:hover{color:var(--white)}
.home-top nav a.gold{color:var(--gold)}
.mark-glyph{width:21px;height:24px;background:var(--gold);
  }
.mark-top .mark-glyph{display:block;width:30px;height:32px;-webkit-mask:none;mask:none}
.a-mark,.mark-top .mark-glyph{background:url("../img/brand/a-mark.png") left center/contain no-repeat}
.a-mark{display:block;width:clamp(72px,6.6vw,124px);aspect-ratio:302/320;margin-bottom:clamp(30px,5.5vh,60px);transition:opacity 1s ease .1s}
.pre .a-mark{opacity:0}
.topright{position:absolute;z-index:40;top:34px;right:5vw;display:flex;gap:30px}
.topright a{color:rgba(246,242,234,.84);transition:color .3s}
.topright a:hover{color:var(--white)}
.topright a.gold{color:var(--gold)}
/* ---------- 01 arrival ---------- */
#arrival .datum{top:40%}
.type{position:absolute;z-index:20;left:5vw;bottom:13vh;width:92vw}
h1{font-family:var(--display);font-weight:400;font-size:clamp(58px,9.2vw,168px);line-height:.86;letter-spacing:-.035em}
.lines span{display:block;overflow:hidden}
.lines i{display:block;font-style:normal;transform:translateY(0);transition:transform .95s var(--ease)}
.pre .lines i{transform:translateY(105%)}
.lines span:nth-child(2) i{transition-delay:.08s}
.l2 .line3{transition-delay:.16s}
.lines span{padding-bottom:.2em;margin-bottom:-.2em}
.lines span:first-child{margin-bottom:.12em}
.l2{display:flex;align-items:baseline;white-space:nowrap}
.l2 i,.lines span:first-child i{display:inline-block}
.line3{margin-left:.24em;text-shadow:0 6px 50px rgba(8,8,7,.95),0 2px 14px rgba(8,8,7,.8)}
.desc{margin-top:clamp(44px,6.5vh,72px);max-width:none;font-size:clamp(14px,1.08vw,17px);line-height:1.65;color:var(--soft);
  transition:transform 1s var(--ease) .45s,opacity 1s ease .45s}
.desc strong{font-weight:400;color:var(--white)}
.desc strong,.desc span{display:block}
.pre .desc{transform:translateY(14px);opacity:0}
/* ---------- 02 the words: each client is the next plate ---------- */
.plate-screen .datum{top:58%}
.said{position:absolute;z-index:20;top:50%;transform:translateY(-50%);
  left:5vw;width:min(58vw,1040px);
  font-family:var(--display);font-weight:400;font-size:clamp(34px,4.3vw,78px);line-height:1.04;letter-spacing:-.028em;
  text-shadow:0 4px 40px rgba(8,8,7,.9),0 1px 10px rgba(8,8,7,.7)}
.left .said{left:auto;right:5vw;text-align:right}
.said q{quotes:none}
.said .open{position:absolute;margin-left:-.42em;color:var(--gold)}
.left .said .open{position:static;margin:0}
.said span.w{display:inline;transition:opacity 1s ease .35s}
.pre .said span.w{opacity:0}
/* ---------- 03 why ---------- */
.why .datum{top:62%}
.why .claim{position:absolute;z-index:20;left:5vw;bottom:calc(38% + 34px);width:min(84vw,1300px);
  font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,92px);line-height:1.02;letter-spacing:-.03em;
  transition:opacity 1.1s ease,transform 1.1s var(--ease)}
/* the arrival's lit plate, carried across the full width; the claim and what it means both sit on it */
.why .plate{left:0;right:0;width:100%}
.why .after{position:absolute;z-index:20;left:5vw;right:5vw;top:calc(62% + 34px);max-width:36em;
  transition:opacity 1.1s ease .25s}
.why .after p{font-size:clamp(15px,1.15vw,18px);line-height:1.7;color:var(--soft)}
.why .after .stays{margin-top:16px;font-family:var(--display);font-style:italic;font-size:clamp(22px,1.9vw,32px);line-height:1.2;color:var(--gold)}
.why .after .u{display:inline-block;margin-top:20px;font-family:var(--display);font-size:clamp(17px,1.25vw,20px);color:var(--white)}
.why.pre .claim{opacity:0;transform:translateY(18px)}
.why.pre .after{opacity:0}
/* ---------- 04 strategic services ----------
   A situation selector and one open service.
   Reading order: where I am (selector) > when this applies > the doorway question > my own questions > the service.
   The doorway question and the self-questions are told apart by scale and placement only. No labels, no icons, no arrows. */
.services{position:relative;padding:clamp(80px,12vh,140px) 5vw}
.services .frame{position:relative;border:1px solid rgba(246,242,234,.12);padding:clamp(56px,8vh,96px) clamp(40px,5vw,96px) clamp(48px,7vh,80px)}
.services .frame>.crop{width:18px;height:18px;z-index:5}
/* the whole section sits on an empty plate: the same lit ground, grid and datum as Plate 01 */
.services .ground{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:
    radial-gradient(70% 34% at 42% 0%,rgba(240,214,175,.10),transparent 70%),
    #0b0a09}
.services .frame>*:not(.ground):not(.crop){position:relative;z-index:3}
.services .frame>.crop.tl{top:-9px;left:-9px}
.services .frame>.crop.tr{top:-9px;right:-9px}
.services .frame>.crop.bl{bottom:-9px;left:-9px}
.services .frame>.crop.br{bottom:-9px;right:-9px}
.services h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(44px,5.4vw,96px);line-height:.96;letter-spacing:-.03em}
/* selector: three panels. Nothing open on arrival. Each whole panel is the control.
   A faint tonal surface and 1px gaps mark the territories; "Learn more" says it opens.
   Active = full gold rule + warmer surface + gold "For when" line (not colour alone). */
:root{--pad:clamp(20px,2.2vw,36px);--sgap:clamp(12px,1.2vw,20px);--sel-on:#2a241c;--sheet:#1f1b16}
.sel{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sgap);margin:clamp(44px,7vh,76px) calc(-1 * var(--pad)) 0}
.sel::before{content:'';position:absolute;top:-1px;left:calc(-1 * clamp(40px,5vw,96px) + var(--pad));right:calc(-1 * clamp(40px,5vw,96px) + var(--pad));height:1px;
  background:linear-gradient(90deg,rgba(246,242,234,.3),rgba(246,242,234,.12) 64%,rgba(246,242,234,.05))}
.sel button{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;
  padding:clamp(28px,4vh,38px) var(--pad) clamp(24px,3.4vh,32px);border:0;text-align:left;cursor:pointer;color:inherit;font:inherit;
  background:#171512;transition:background-color .45s ease}
.sel button::before{content:'';position:absolute;top:-1px;left:0;height:3px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.sel .lbl{display:block;font-family:var(--display);font-weight:400;font-size:clamp(26px,2.3vw,40px);line-height:1.05;letter-spacing:-.02em;color:rgba(246,242,234,.9);transition:color .4s}
.sel .q{display:block;margin-top:14px;max-width:32ch;font-family:var(--display);font-size:clamp(17px,1.3vw,21px);line-height:1.36;color:rgba(246,242,234,.76);transition:color .4s}
.learn{display:inline-block;margin-top:auto;padding-top:clamp(26px,3.8vh,36px)}
.learn span,.sec .learn span{font-family:var(--micro);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(246,242,234,.8);
  padding-bottom:5px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:color .35s,background-size .5s var(--ease)}
.sel button:hover,.sel button:focus-visible{background-color:#1f1c18}
.sel button:hover .lbl,.sel button:focus-visible .lbl{color:var(--white)}
.sel button:hover .q,.sel button:focus-visible .q{color:rgba(246,242,234,.92)}
.sel button:hover .learn span,.sel button:focus-visible .learn span{color:var(--gold)}
.sel button:hover::before,.sel button:focus-visible::before{transform:scaleX(.2)}
.sel button:focus-visible{outline:1px solid rgba(212,175,122,.6);outline-offset:-1px}
.sel button[aria-expanded="true"]{background-color:var(--sel-on)}
/* the open panel reaches down into its sheet, so what opens reads as belonging to it */
.sel button::after{content:'';position:absolute;left:0;right:0;top:100%;height:var(--sgap);
  background:linear-gradient(var(--sel-on),var(--sheet));transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.sel button[aria-expanded="true"]::after{transform:scaleY(1)}
.sel button[aria-expanded="true"]::before{transform:scaleX(1)}
.sel button[aria-expanded="true"] .lbl{color:var(--white)}
.sel button[aria-expanded="true"] .q{color:var(--gold)}
.sel button[aria-expanded="true"] .learn span{color:var(--gold);background-size:0 1px}
.sel.has-open button[aria-expanded="false"] .lbl{color:rgba(246,242,234,.72)}
.sel.has-open button[aria-expanded="false"] .q{color:rgba(246,242,234,.6)}
/* the deeper layer, revealed beneath the three */
.panes{display:grid;grid-template-rows:0fr;margin:0 calc(-1 * var(--pad));transition:grid-template-rows .6s var(--ease)}
.panes.open{grid-template-rows:1fr}
.panes-in{overflow:hidden;display:grid;min-height:0}
.pane{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,7vw,140px);align-items:start;
  margin-top:var(--sgap);padding:clamp(48px,7vh,84px) clamp(28px,3.4vw,64px) clamp(44px,6.5vh,76px);
  background:linear-gradient(180deg,var(--sheet) 0%,#1a1713 100%);box-shadow:0 48px 90px -50px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s ease,transform .5s var(--ease),visibility 0s .35s}
.pane.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .12s,transform .7s var(--ease) .12s,visibility 0s}
.js .pane:not(.on){display:none}
@starting-style{.pane.on{opacity:0;transform:translateY(8px)}}
html:not(.js) .panes{grid-template-rows:1fr}
html:not(.js) .pane{grid-area:auto;opacity:1;visibility:visible;transform:none}
.pane .when{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(30px,3vw,52px);line-height:1.08;letter-spacing:-.025em;color:var(--white);max-width:18ch}
.pane .door-lg{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(36px,3.9vw,68px);line-height:1.05;letter-spacing:-.028em;color:var(--white);max-width:15ch}
.pane .self{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.pane .self li{padding:clamp(16px,2.4vh,22px) 0;border-bottom:1px solid var(--hair);
  font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:rgba(246,242,234,.72)}
.pane .rgt{padding-top:clamp(6px,1vh,10px)}
.pane .svc-foot{margin-top:clamp(34px,5vh,50px)}
.svc-link{display:inline-block;font-family:var(--display);font-size:clamp(22px,1.7vw,28px);letter-spacing:-.01em;color:var(--white);
  padding-bottom:4px;background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat;transition:color .3s,background-size .5s var(--ease)}
.svc-link:hover,.svc-link:focus-visible{color:var(--gold);background-size:0 1px}
/* the way through to each service page: a clear button, not a text link */
.go{display:inline-block;padding:15px 26px 14px;background:var(--gold);color:var(--black);font-family:var(--micro);font-size:11px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;transition:background-color .3s,color .3s,border-color .3s}
.go:hover,.go:focus-visible{background:var(--white)}
.go.ghost{padding:14px 24px 13px;background:transparent;border:1px solid rgba(212,175,122,.6);color:var(--gold)}
.go.ghost:hover,.go.ghost:focus-visible{background:var(--gold);color:var(--black)}
.sec{display:flex;justify-content:space-between;align-items:center;gap:24px}
.sec .nm{font-family:var(--display);font-size:clamp(22px,1.7vw,28px);letter-spacing:-.01em;color:var(--white)}
/* quieter pathways: the same panel language, smaller and lighter; each goes straight to its page */
.more{margin-top:clamp(80px,12vh,130px);border-top:1px solid var(--hair)}
.sec{padding:clamp(24px,3.4vh,32px) 0;border-bottom:1px solid var(--hair)}
.sec .d{margin-top:10px;font-size:15px;line-height:1.55;color:rgba(246,242,234,.62)}
.sec:hover .nm2,.sec:focus-visible .nm2{color:var(--white)}
.sec:hover .learn span,.sec:focus-visible .learn span{color:var(--gold)}
.sec:focus-visible{outline:1px solid rgba(212,175,122,.6);outline-offset:-1px}
.services .rv,.fband .rv{transition:opacity .9s ease,transform .9s var(--ease)}
.services.pre .rv,.fband.pre .rv{opacity:0;transform:translateY(18px)}
.services .rv,.fband .rv{transition:opacity .9s ease,transform .9s var(--ease)}
.services.pre .rv,.fband.pre .rv{opacity:0;transform:translateY(18px)}
/* ---------- 05 founder band ---------- */
.fband{position:relative;display:grid;grid-template-columns:auto minmax(0,1.25fr) 1px minmax(0,1fr);column-gap:clamp(28px,4vw,72px);
  align-items:center;padding:clamp(56px,9vh,96px) 5vw;background:#0e0c0a;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.fband::after{content:'';grid-column:3;grid-row:1;align-self:stretch;background:rgba(212,175,122,.35)}
.fband .me{position:relative;width:clamp(150px,14vw,230px);grid-column:1;grid-row:1}
.fband .me img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.fband .me .crop{border-color:rgba(212,175,122,.75);width:12px;height:12px}
.fband .me .crop.tl{top:-8px;left:-8px}
.fband .me .crop.tr{top:-8px;right:-8px}
.fband .me .crop.bl{bottom:-8px;left:-8px}
.fband .me .crop.br{bottom:-8px;right:-8px}
.fband .who{grid-column:2;grid-row:1}
.fband .line{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.1vw,36px);line-height:1.18;letter-spacing:-.018em;max-width:28ch}
.fband .by{margin-top:22px;display:flex;flex-direction:column;gap:6px}
.fband .by .u{font-family:var(--display);font-size:19px;color:var(--gold);align-self:flex-start}
.fband .way-in{grid-column:4;grid-row:1}
.fband .start{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.3vw,40px);line-height:1.1;letter-spacing:-.02em}
.fband .note{margin-top:12px;font-size:14.5px;line-height:1.65;color:var(--soft);max-width:34ch}
.fband .way-in .u{display:inline-block;margin-top:20px;font-family:var(--display);font-size:20px}
footer{position:relative;padding:30px 5vw 38px;display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--hair)}
footer .sig em{font-size:inherit}
/* ---------- phones: the plate sits above, type below, nothing crosses ---------- */
/* the quiet alternative under the booking link: email, with the page’s subject filled in */
.fband .cta-alt{margin-top:14px;font-size:14.5px;line-height:1.6;color:var(--soft)}

@media (max-width:860px){
  .rules,.datum{display:none}
  .topright{gap:18px;top:32px}
  .topright a:not(.gold){display:none}
  .home-top nav{gap:18px}.home-top nav a:not(.gold){display:none}
  .plate,.left .plate{width:100%;height:46dvh;top:0;bottom:auto;left:0;right:0}
  #arrival .plate{height:38dvh}
  .plate .shade,.left .plate .shade{background:linear-gradient(0deg,rgba(8,8,7,.7),transparent 45%)}
  .screen{height:auto;min-height:0;overflow:visible;padding-bottom:10vh}
  .type{position:static;padding:calc(38dvh + 6vh) 5vw 0;width:100%}
  h1{font-size:clamp(44px,12vw,68px)}
  .l2{display:block}
  .l2 i{display:block}
  .line3{margin-left:0!important;color:var(--gold);text-shadow:none}
  .lines span:first-child{margin-bottom:-.2em}
  .desc{max-width:36ch}
  .said,.left .said{position:static;transform:none;width:auto;text-align:left;padding:calc(46dvh + 5vh) 5vw 0;
    font-size:clamp(26px,7.4vw,38px);text-shadow:none}
  .left .said .open,.said .open{position:static;margin:0}
  .caption,.left .caption{left:5vw;right:auto;align-items:flex-start;text-align:left;bottom:18px}
  /* phone arrival: the lit plate runs full-screen behind the whole opening; the type sits on it */
  #arrival{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-bottom:6svh}
  #arrival .plate{height:auto;bottom:0}
  #arrival .type{position:relative;left:auto;bottom:auto;z-index:20;padding:9svh 5vw 0}
  .why{height:auto;min-height:0;padding:14vh 5vw}
  .why .claim,.why .after{width:auto;left:auto;right:auto;top:auto;bottom:auto}
  .why .claim{font-size:clamp(30px,8.4vw,44px)}
  .why .after{margin-top:26px;max-width:none}
  .why .plate{height:auto;top:0;bottom:0}
  .why .claim,.why .after{position:relative;z-index:20}
  .sel{grid-template-columns:1fr}
  .sel::before{left:0;right:0}
  .sel button{padding:24px var(--pad) 22px}
  .learn{padding-top:18px}
  .sec{flex-direction:column;align-items:flex-start;gap:18px}
  .sel .lbl{font-size:clamp(25px,7vw,30px)}
  .sel .q{font-size:17px;margin-top:10px}
  .panes{margin:0}
  .sel .panes .pane{margin-top:0}
  .pane{grid-template-columns:1fr;padding:34px var(--pad) 36px}
  .pane .door-lg{font-size:clamp(30px,8.6vw,40px)}
  .services{padding:64px 16px}
  .services .frame{padding:44px 22px 40px}
  .pane .rgt{padding-top:34px}
  .more{margin-top:64px}
  .fband{grid-template-columns:1fr;row-gap:34px}
  .fband::after{display:none}
  .fband .me,.fband .who,.fband .way-in{grid-column:1;grid-row:auto}
  .fband .way-in{border-top:1px solid rgba(212,175,122,.35);padding-top:30px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .pre .plate,.pre .plate img,.pre .lines i,.pre .desc,.pre .said span.w,.pre .rv,.why.pre .claim,.why.pre .after{
    clip-path:none!important;transform:none!important;opacity:1!important}
}
html:not(.js) .pre .plate,html:not(.js) .pre .plate img,html:not(.js) .pre .lines i,html:not(.js) .pre .desc,
html:not(.js) .pre .said span.w,html:not(.js) .pre .rv,html:not(.js) .why.pre .claim,html:not(.js) .why.pre .after{
  clip-path:none;transform:none;opacity:1}