*{box-sizing:border-box}
:root{
  --ivory:#f2efe7;
  --muted:rgba(242,239,231,.67);
  --ease:cubic-bezier(.22,.75,.2,1);
}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#8097a4;color:var(--ivory)}
body{font-family:"DM Sans",Arial,sans-serif;font-weight:300}
button,a{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
.site,.hero{position:relative;width:100%;height:100%}
.hero{overflow:hidden}

.hero-image{
  position:absolute;inset:-2%;
  width:104%;height:104%;
  object-fit:cover;object-position:center;
  transform:translate3d(0,0,0) scale(1.02);
  will-change:transform;
}
.readability{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(12,22,29,.31) 0%,rgba(12,22,29,.18) 30%,rgba(12,22,29,.05) 54%,transparent 72%),
    linear-gradient(0deg,rgba(10,20,27,.16) 0%,transparent 30%);
}
.warm-glow{
  position:absolute;left:-7vw;top:12vh;width:34vw;height:55vh;border-radius:50%;
  background:radial-gradient(circle,rgba(255,219,164,.11),transparent 68%);
  mix-blend-mode:screen;animation:glowPulse 7s ease-in-out infinite alternate;
}
@keyframes glowPulse{from{opacity:.42;transform:scale(.97)}to{opacity:.82;transform:scale(1.03)}}

.hud-frame{
  position:absolute;left:7.6%;top:13.7%;width:72.2%;height:67.5%;
  border-left:1px solid rgba(255,255,255,.28);
  border-right:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.12);
  border-radius:34px 0 34px 0;pointer-events:none;
}
.hud-topline{
  position:absolute;left:19.4%;top:10.4%;width:57.5%;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.44),rgba(255,255,255,.10));
}
.hud-vline{position:absolute;top:0;height:84%;width:1px;background:linear-gradient(transparent,rgba(255,255,255,.24),transparent);pointer-events:none}
.hud-v1{left:24.8%}.hud-v2{left:79.5%}
.hud-point{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 13px rgba(224,242,255,.8);pointer-events:none;animation:pointPulse 3.5s ease-in-out infinite}
.point-1{left:44.9%;top:10.15%}.point-2{left:79.35%;top:36%}
@keyframes pointPulse{50%{opacity:.22;box-shadow:0 0 4px rgba(224,242,255,.4)}}

.motion-line{position:absolute;pointer-events:none;mix-blend-mode:screen;opacity:.88;box-shadow:0 0 16px rgba(221,239,249,.14)}
.motion-line-a{
  width:14vw;height:1px;left:19.4%;top:10.4%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);
  animation:hudScanTop 8.6s ease-in-out infinite;
}
.motion-line-b{
  width:1px;height:19vh;left:24.8%;top:12.2%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.86),transparent);
  animation:hudScanLeft 7.2s ease-in-out infinite 1.1s;
}
.motion-line-d{
  width:1px;height:22vh;left:79.5%;top:20%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.82),transparent);
  animation:hudScanRight 8.2s ease-in-out infinite 2.4s;
}
@keyframes hudScanTop{0%{transform:translateX(-8vw);opacity:0}14%{opacity:.92}58%{opacity:.9}100%{transform:translateX(33vw);opacity:0}}
@keyframes hudScanLeft{0%{transform:translateY(-7vh);opacity:0}18%{opacity:.8}60%{opacity:.84}100%{transform:translateY(49vh);opacity:0}}
@keyframes hudScanRight{0%{transform:translateY(-4vh);opacity:0}16%{opacity:.74}58%{opacity:.78}100%{transform:translateY(44vh);opacity:0}}

.cursor-orbit{
  position:absolute;width:240px;height:240px;border:1px solid rgba(255,255,255,.065);
  border-radius:50%;translate:-50% -50%;pointer-events:none;
  box-shadow:0 0 70px rgba(211,233,244,.035) inset;opacity:.52
}

.topbar{
  position:absolute;z-index:40;left:0;right:0;top:0;height:108px;
  display:flex;align-items:center;justify-content:space-between;padding:0 5.6vw;
}
:root{
  --arrt-brand-width:48px;
}

.brand{width:var(--arrt-brand-width);display:block}
.brand img{
  width:100%;height:auto;display:block;
  opacity:1;
  filter:
    drop-shadow(3px 5px 7px rgba(3,10,28,.32))
    drop-shadow(0 12px 24px rgba(3,10,24,.18));
}
.index-trigger{
  display:flex;align-items:center;justify-content:center;width:54px;height:54px;
  border:1px solid rgba(255,255,255,.62);border-radius:50%;
  background:rgba(88,107,120,.04);backdrop-filter:blur(3px);
  transition:.28s var(--ease);
}
.index-trigger:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
.menu-icon{display:grid;gap:5px;width:25px}.menu-icon i{height:1px;background:var(--ivory);display:block}

.hero-copy{
  position:absolute;z-index:9;left:9.2%;top:50%;
  width:min(1180px,68vw);height:270px;
  transform:translateY(-50%);
}
.eyebrow{
  position:absolute;left:0;bottom:calc(100% + 22px);margin:0;
  font-size:18px;line-height:1;letter-spacing:.18em;white-space:nowrap;color:var(--muted)
}
.headline-rotator{position:relative;width:100%;height:270px}
.headline-slide{
  position:absolute;inset:0;opacity:0;transform:translate3d(0,56px,0);
  filter:blur(5px);pointer-events:none;
  transition:opacity 1.45s cubic-bezier(.22,.78,.2,1),
             transform 1.65s cubic-bezier(.18,.72,.16,1),
             filter 1.35s ease;
}
.headline-inner{
  width:100%;height:100%;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;
}
.headline-slide.active{opacity:1;transform:translate3d(0,0,0);filter:blur(0);pointer-events:auto}
.headline-slide.active .headline-inner{animation:headlineDriftUp 13s linear both}
.headline-slide.leaving{opacity:0;transform:translate3d(0,-82px,0);filter:blur(3px)}
.headline-slide.leaving .headline-inner{animation:headlineExitUp .92s cubic-bezier(.16,.82,.18,1) forwards}
@keyframes headlineDriftUp{0%{transform:translate3d(0,16px,0)}100%{transform:translate3d(0,-18px,0)}}
@keyframes headlineExitUp{0%{transform:translate3d(0,-18px,0)}100%{transform:translate3d(0,-52px,0)}}

.headline-slide h1{
  width:100%;max-width:1140px;margin:0;
  font-family:"Jost","DM Sans",Arial,sans-serif;
  font-size:clamp(44px,3.7vw,64px);
  font-weight:300;line-height:.95;letter-spacing:.045em;text-transform:uppercase;
  text-shadow:0 8px 24px rgba(6,14,22,.12),0 16px 42px rgba(6,14,22,.08);
}
.short-rule{width:62px;height:1px;background:rgba(255,255,255,.76);margin:24px 0 20px}
.lead{
  margin:0;max-width:720px;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(17px,1.2vw,21px);line-height:1.38;color:rgba(255,255,255,.89)
}

.hero-actions{
  position:absolute;z-index:9;left:9.2%;bottom:82px;
  display:flex;gap:18px;align-items:center;
}
.action-btn{
  width:256px;height:56px;border:1px solid rgba(255,255,255,.66);border-radius:6px;
  padding:0 23px;display:flex;align-items:center;justify-content:space-between;
  background:rgba(111,134,147,.08);backdrop-filter:blur(4px);
  font-family:"Libre Caslon Display",Georgia,serif;font-size:16px;letter-spacing:.025em;
  transition:.28s var(--ease);
}
.action-btn:hover{background:rgba(255,255,255,.105);transform:translateY(-2px)}
.action-btn b{font-family:"DM Sans",Arial,sans-serif;font-size:22px;font-weight:300}

.hero-footer{
  position:absolute;z-index:9;left:5.6vw;right:5.6vw;bottom:25px;
  display:grid;grid-template-columns:1fr auto 1fr;
  font-size:10.4px;letter-spacing:.22em;color:rgba(255,255,255,.68)
}
.domain{grid-column:1;justify-self:start}.practice{grid-column:2;justify-self:center}.year{grid-column:3;justify-self:end}

/* drawer */
.index-drawer{
  position:absolute;z-index:50;right:0;top:0;height:100%;
  width:20vw;min-width:330px;max-width:410px;
  background:linear-gradient(180deg,rgba(108,124,138,.34),rgba(95,111,124,.27));
  backdrop-filter:blur(22px) saturate(1.04);
  border-left:1px solid rgba(255,255,255,.26);
  box-shadow:-24px 0 70px rgba(6,16,22,.16);
  transform:translateX(102%);transition:transform .54s var(--ease)
}
.index-drawer.open{transform:none}
.drawer-head{
  height:108px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.13);font-size:9px;letter-spacing:.2em
}
.simple-x{
  padding:0;border:0;background:transparent;color:rgba(255,255,255,.86);
  font-family:"DM Sans",Arial,sans-serif;font-size:28px;font-weight:200;line-height:1
}
.drawer-nav{padding:5.5vh 28px 0}
.drawer-nav button{
  width:100%;display:grid;grid-template-columns:37px 1fr;text-align:left;align-items:center;
  padding:17px 0;border-bottom:1px solid rgba(255,255,255,.09);
  opacity:.64;transition:.28s var(--ease)
}
.drawer-nav button:hover,.drawer-nav button.active{opacity:1;padding-left:7px}
.drawer-nav span{font-size:8px;letter-spacing:.16em;color:rgba(255,255,255,.42)}
.drawer-nav strong{
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:25px;
  font-weight:400;
  color:rgba(255,255,255,.84);
  transition:color .22s ease, text-shadow .28s ease, filter .28s ease;
}
.drawer-nav button:hover strong{
  color:#fff;
  filter:brightness(1.28);
  text-shadow:
    0 0 2px rgba(255,255,255,1),
    0 0 7px rgba(255,255,255,.96),
    0 0 15px rgba(226,244,255,.78),
    0 0 28px rgba(188,226,255,.42),
    0 0 44px rgba(160,211,255,.18);
  animation:arrtLedPulse 1.65s ease-in-out infinite alternate;
}
@keyframes arrtLedPulse{
  from{
    text-shadow:
      0 0 2px rgba(255,255,255,.96),
      0 0 6px rgba(255,255,255,.86),
      0 0 13px rgba(226,244,255,.64),
      0 0 24px rgba(188,226,255,.32);
  }
  to{
    text-shadow:
      0 0 3px rgba(255,255,255,1),
      0 0 9px rgba(255,255,255,1),
      0 0 18px rgba(226,244,255,.86),
      0 0 34px rgba(188,226,255,.48),
      0 0 50px rgba(160,211,255,.22);
  }
}
.drawer-footer{position:absolute;left:28px;right:28px;bottom:28px}
.drawer-rule{display:block;width:43px;height:1px;background:rgba(255,255,255,.48);margin-bottom:18px}
.drawer-footer p{font-family:"Libre Caslon Display",Georgia,serif;font-size:18px;line-height:1.32;color:rgba(255,255,255,.72)}
.drawer-footer small{font-size:8px;letter-spacing:.18em;color:rgba(255,255,255,.42)}

/* glass pages */
.panel{
  position:absolute;z-index:30;
  inset:4.8vh calc(5.6vw + 74px) 5.2vh 3.8vw;
  border-radius:30px;border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg,rgba(96,112,125,.23),rgba(63,80,92,.18)),rgba(22,31,38,.10);
  backdrop-filter:blur(22px) saturate(1.06);
  box-shadow:0 30px 80px rgba(6,16,22,.24),inset 0 1px 0 rgba(255,255,255,.10);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.988);
  transition:opacity .3s ease,transform .5s var(--ease),visibility 0s linear .5s;
  overflow:hidden;
}
.panel.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.panel-head{
  height:88px;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.14);
  font-size:9px;letter-spacing:.18em
}
.panel-head span{color:rgba(255,255,255,.72)}

.work-grid{
  position:absolute;inset:108px 26px 26px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px
}
.work-grid article{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.work-grid img{width:100%;height:100%;object-fit:cover;display:block}
.work-grid article>div{
  position:absolute;left:18px;right:18px;bottom:18px;padding:14px 16px;
  background:rgba(32,46,56,.30);backdrop-filter:blur(10px)
}
.work-grid h2{font-family:"Libre Caslon Display",Georgia,serif;font-size:30px;font-weight:400;margin:7px 0 4px}
.work-grid p{font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.62);margin:0}

.practice-scroll{position:absolute;inset:88px 0 0;overflow-y:auto}
.practice-intro{min-height:78vh;padding:9vh 7vw 8vh;display:flex;flex-direction:column;justify-content:center}
.practice-kicker,.section-label{font-size:9px;letter-spacing:.22em;color:rgba(255,255,255,.55)}
.practice-intro-grid{margin-top:3.8vh;display:grid;grid-template-columns:.95fr 1.05fr;gap:8vw;align-items:end}
.practice-intro-grid h2{
  margin:0;font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(58px,6.5vw,112px);line-height:.89;font-weight:400;letter-spacing:-.035em
}
.practice-lead{font-family:"Libre Caslon Display",Georgia,serif;font-size:clamp(24px,2.25vw,39px);line-height:1.13}
.practice-principles{margin:0 7vw;border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}
.practice-row{display:grid;grid-template-columns:155px 1fr;padding:25px 0;border-top:1px solid rgba(255,255,255,.13)}
.practice-row:first-child{border-top:0}
.practice-row p{margin:0;font-family:"Libre Caslon Display",Georgia,serif;font-size:clamp(23px,2.1vw,36px)}
.practice-history,.practice-notes{padding:13vh 7vw 5vh}
.history-item{display:grid;grid-template-columns:155px 1fr;padding:24px 0;border-top:1px solid rgba(255,255,255,.19)}
.history-item strong{font-family:"Libre Caslon Display",Georgia,serif;font-size:clamp(28px,3vw,50px);font-weight:400}
.notes-grid{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.18);border-left:1px solid rgba(255,255,255,.18)}
.notes-grid article{min-height:220px;padding:28px;border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.notes-grid h3{margin:78px 0 0;font-family:"Libre Caslon Display",Georgia,serif;font-size:clamp(30px,3.1vw,52px);font-weight:400}

.commission-copy{position:absolute;left:7vw;top:50%;transform:translateY(-50%)}
.commission-copy p{font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.60)}
.commission-copy h2{
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(74px,9vw,150px);line-height:.8;font-weight:400;
  margin:28px 0 50px
}
.commission-copy a{
  text-decoration:none;text-transform:uppercase;font-size:11px;letter-spacing:.11em;
  border-bottom:1px solid rgba(255,255,255,.74);padding-bottom:8px
}

@media(max-width:900px){
  .brand{width:73px}
  .hero-copy{left:7%;right:7%;width:auto;height:330px}
  .eyebrow{font-size:14px;white-space:normal}
  .headline-rotator{height:280px}
  .headline-slide h1{font-size:clamp(34px,8.5vw,54px)}
  .hero-actions{left:7%;right:7%;bottom:74px;gap:10px}
  .action-btn{width:min(220px,44vw);height:50px;padding:0 16px;font-size:14px}
  .hero-footer{left:20px;right:20px}.practice,.year{display:none}.domain{display:block;grid-column:1;justify-self:start}
  .index-drawer{width:88vw;max-width:none;min-width:0}
  .panel{inset:2.8vh 88px 3vh 2.8vw;border-radius:22px}
  .work-grid{grid-template-columns:1fr;overflow:auto}
  .practice-intro-grid{grid-template-columns:1fr}
}


/* =========================================================
   v8.17 — background slider only
   Preserves the approved v8.14 layout, logo, typography and panels.
   ========================================================= */
.hero-backgrounds{
  position:absolute;
  inset:-2%;
  width:104%;
  height:104%;
  overflow:hidden;
  will-change:transform;
}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  filter:blur(10px);
  transform:translate3d(7%,0,0) scale(1.025);
  transition:
    opacity 1.2s ease,
    filter 1.2s ease,
    transform 1.55s cubic-bezier(.18,.72,.16,1);
  will-change:opacity,filter,transform;
}
.hero-bg.active{
  opacity:1;
  filter:blur(0);
  animation:bgDriftLeft 7s linear both;
}
.hero-bg.leaving{
  opacity:0;
  filter:blur(10px);
  animation:bgExitLeft 1.0s cubic-bezier(.16,.82,.18,1) forwards;
}
@keyframes bgDriftLeft{
  0%{transform:translate3d(2.4%,0,0) scale(1.025)}
  100%{transform:translate3d(-1.8%,0,0) scale(1.025)}
}
@keyframes bgExitLeft{
  0%{transform:translate3d(-1.8%,0,0) scale(1.025)}
  100%{transform:translate3d(-7%,0,0) scale(1.025)}
}
.panel-head .simple-x{
  position:relative;
  z-index:4;
  pointer-events:auto;
  cursor:pointer;
}
@media (prefers-reduced-motion: reduce){
  .hero-bg.active{animation:none;transform:scale(1.02)}
  .hero-bg.leaving{animation:none}
}


/* =========================================================
   v8.18 — panel close X click fix
   The topbar remains visually above the page, but its empty
   transparent area no longer blocks clicks on panel controls.
   ========================================================= */
.topbar{
  pointer-events:none;
}
.topbar .brand,
.topbar .index-trigger{
  pointer-events:auto;
}
.panel-head .simple-x{
  pointer-events:auto;
  touch-action:manipulation;
}


/* =========================================================
   v8.19 — PRIVATE COMMISSIONS
   No form. Invitation-led project enquiry.
   ========================================================= */

.commission-v2{
  position:absolute;
  inset:88px 0 0;
  overflow-y:auto;
  padding:6.5vh 6.5vw 4vh;
  display:grid;
  grid-template-columns:minmax(360px,.9fr) minmax(520px,1.1fr);
  grid-template-rows:auto auto;
  column-gap:7vw;
  row-gap:5vh;
}

.commission-v2-intro{
  align-self:start;
}

.commission-kicker{
  margin:0 0 2.2vh;
  font-size:9px;
  letter-spacing:.22em;
  color:rgba(255,255,255,.56);
}

.commission-v2-intro h2{
  margin:0;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(64px,7.1vw,118px);
  line-height:.82;
  font-weight:400;
  letter-spacing:-.035em;
}

.commission-lead{
  margin:4vh 0 0;
  max-width:640px;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(20px,1.8vw,30px);
  line-height:1.28;
  color:rgba(255,255,255,.82);
}

.commission-categories{
  border-top:1px solid rgba(255,255,255,.20);
  align-self:start;
}

.commission-categories article{
  display:grid;
  grid-template-columns:54px 1fr;
  grid-template-areas:
    "n h"
    "n p";
  gap:4px 18px;
  padding:22px 0 23px;
  border-bottom:1px solid rgba(255,255,255,.16);
}

.commission-categories article > span{
  grid-area:n;
  padding-top:5px;
  font-size:8px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.44);
}

.commission-categories h3{
  grid-area:h;
  margin:0;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(24px,2.1vw,34px);
  font-weight:400;
  letter-spacing:.01em;
}

.commission-categories p{
  grid-area:p;
  margin:3px 0 0;
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
}

.commission-invitation{
  grid-column:1 / -1;
  border-top:1px solid rgba(255,255,255,.20);
  padding-top:4.5vh;
  display:grid;
  grid-template-columns:minmax(340px,.9fr) minmax(380px,1.1fr);
  column-gap:7vw;
  row-gap:2.2vh;
}

.commission-invitation-title{
  grid-column:1;
  margin:0;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(34px,3.3vw,56px);
  line-height:.98;
}

.commission-invitation-copy{
  grid-column:2;
  margin:0;
  max-width:660px;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(19px,1.55vw,27px);
  line-height:1.32;
  color:rgba(255,255,255,.78);
}

.commission-note{
  grid-column:2;
  margin:1vh 0 0;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.54);
}

.commission-actions{
  grid-column:2;
  margin-top:1.4vh;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.commission-actions a{
  min-width:240px;
  min-height:52px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:14px;
  letter-spacing:.025em;
  transition:background .25s ease, transform .25s ease, border-color .25s ease;
}

.commission-actions a:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.54);
  transform:translateY(-1px);
}

.commission-actions a span{
  font-family:"DM Sans",Arial,sans-serif;
  font-size:20px;
  font-weight:300;
}

.commission-signoff{
  grid-column:1 / -1;
  margin-top:2vh;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.11);
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:8px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
}

@media(max-width:980px){
  .commission-v2{
    grid-template-columns:1fr;
    padding:5vh 5vw 4vh;
    row-gap:5vh;
  }
  .commission-invitation{
    grid-template-columns:1fr;
  }
  .commission-invitation-title,
  .commission-invitation-copy,
  .commission-note,
  .commission-actions{
    grid-column:1;
  }
  .commission-signoff{
    flex-direction:column;
    gap:8px;
  }
}

@media(max-width:620px){
  .commission-v2-intro h2{
    font-size:clamp(50px,15vw,76px);
  }
  .commission-actions{
    flex-direction:column;
  }
  .commission-actions a{
    width:100%;
  }
}


/* =========================================================
   v8.20 — compact PRIVATE COMMISSIONS / no-scroll layout
   ========================================================= */

.commission-panel{
  overflow:hidden;
}

.commission-panel .panel-head{
  height:72px;
  padding:0 30px;
}

.commission-v3{
  position:absolute;
  inset:72px 0 0;
  overflow:hidden;
  padding:4.1vh 5.6vw 3.2vh;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:3.2vh;
}

.commission-v3-top{
  display:grid;
  grid-template-columns:minmax(340px,.88fr) minmax(460px,1.12fr);
  gap:6vw;
  align-items:start;
  min-height:0;
}

.commission-v3-intro{
  min-width:0;
}

.commission-v3 .commission-kicker{
  margin:0 0 1.4vh;
  font-size:8px;
  letter-spacing:.22em;
  color:rgba(255,255,255,.53);
}

/* 30% smaller than v8.19 */
.commission-v3-intro h2{
  margin:0;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(45px,5vw,83px);
  line-height:.86;
  font-weight:400;
  letter-spacing:-.035em;
}

.commission-v3 .commission-lead{
  margin:2.3vh 0 0;
  max-width:610px;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(17px,1.35vw,23px);
  line-height:1.28;
  color:rgba(255,255,255,.78);
}

.commission-v3-categories{
  border-top:1px solid rgba(255,255,255,.18);
}

.commission-v3-categories article{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:12px;
  align-items:start;
  padding:15px 0 16px;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.commission-v3-categories article > span{
  padding-top:4px;
  font-size:8px;
  letter-spacing:.17em;
  color:rgba(255,255,255,.42);
}

.commission-v3-categories h3{
  margin:0 0 4px;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(20px,1.7vw,29px);
  font-weight:400;
}

.commission-v3-categories p{
  margin:0;
  font-size:9px;
  line-height:1.4;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.53);
}

.commission-v3-bottom{
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:2.4vh;
  display:grid;
  grid-template-columns:minmax(280px,.62fr) minmax(620px,1.38fr);
  gap:4.5vw;
  align-items:end;
}

.commission-v3-message{
  align-self:center;
}

.commission-v3-message .commission-invitation-title{
  margin:0 0 8px;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(24px,2.15vw,36px);
  line-height:1;
}

.commission-v3-message > p:last-child{
  margin:0;
  max-width:420px;
  font-size:10px;
  line-height:1.5;
  letter-spacing:.07em;
  color:rgba(255,255,255,.55);
}

.commission-form{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  grid-template-areas:
    "name email submit"
    "project project submit"
    "consent consent submit";
  gap:12px 14px;
  align-items:stretch;
}

.commission-field{
  position:relative;
  min-height:48px;
  border-bottom:1px solid rgba(255,255,255,.28);
}

.commission-field:nth-child(1){grid-area:name}
.commission-field:nth-child(2){grid-area:email}
.commission-field-project{grid-area:project}

.commission-field label{
  display:block;
  margin-bottom:3px;
  font-size:7px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.46);
}

.commission-field input,
.commission-field textarea{
  width:100%;
  border:0;
  outline:0;
  resize:none;
  padding:4px 0 8px;
  color:rgba(255,255,255,.95);
  background:transparent;
  font-family:"DM Sans",Arial,sans-serif;
  font-size:13px;
  font-weight:300;
}

.commission-field textarea{
  min-height:42px;
  line-height:1.35;
}

.commission-field:focus-within{
  border-bottom-color:rgba(255,255,255,.72);
}

.commission-submit{
  grid-area:submit;
  min-width:198px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:6px;
  background:rgba(255,255,255,.035);
  color:rgba(255,255,255,.90);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:12px;
  line-height:1.2;
  letter-spacing:.035em;
  transition:background .24s ease,border-color .24s ease,transform .24s ease;
}

.commission-submit:hover{
  background:rgba(255,255,255,.085);
  border-color:rgba(255,255,255,.52);
  transform:translateY(-1px);
}

.commission-submit b{
  font-family:"DM Sans",Arial,sans-serif;
  font-size:20px;
  font-weight:300;
}

@media(max-width:1100px){
  .commission-v3{
    padding:3.4vh 4vw 2.8vh;
  }
  .commission-v3-top{
    grid-template-columns:.9fr 1.1fr;
    gap:4vw;
  }
  .commission-v3-bottom{
    grid-template-columns:1fr;
    gap:2vh;
  }
  .commission-form{
    grid-template-columns:1fr 1fr 190px;
  }
}

@media(max-height:760px) and (min-width:901px){
  .commission-v3{
    padding-top:2.6vh;
    gap:2vh;
  }
  .commission-v3-intro h2{
    font-size:clamp(40px,4.5vw,70px);
  }
  .commission-v3 .commission-lead{
    margin-top:1.4vh;
    font-size:17px;
  }
  .commission-v3-categories article{
    padding:10px 0 11px;
  }
  .commission-v3-bottom{
    padding-top:1.8vh;
  }
}

@media(max-width:900px){
  .commission-panel{
    overflow:auto;
  }
  .commission-v3{
    position:relative;
    inset:auto;
    overflow:visible;
    display:block;
    padding:4vh 5vw 5vh;
  }
  .commission-v3-top,
  .commission-v3-bottom{
    display:block;
  }
  .commission-v3-categories{
    margin-top:4vh;
  }
  .commission-v3-bottom{
    margin-top:4vh;
    padding-top:3vh;
  }
  .commission-form{
    margin-top:3vh;
    grid-template-columns:1fr;
    grid-template-areas:
      "name"
      "email"
      "project"
      "submit";
  }
  .commission-submit{
    min-height:54px;
  }
}


/* =========================================================
   v8.21 — synced cinematic background drift + commission glow
   ========================================================= */

/* Background images now behave like the HERO text:
   enter from the right, drift gently left, accelerate on exit. */
.bg-slide{
  opacity:0;
  filter:blur(8px);
  transform:translate3d(92px,0,0) scale(1.025);
  transition:
    opacity 1.25s ease,
    filter 1.25s ease;
}

.bg-slide.active{
  opacity:1;
  filter:blur(0);
  animation:bgDriftLeft 7s linear both;
}

.bg-slide.leaving{
  opacity:0;
  filter:blur(9px);
  animation:bgExitLeft 1.35s cubic-bezier(.18,.78,.2,1) forwards;
}

@keyframes bgDriftLeft{
  0%{
    transform:translate3d(86px,0,0) scale(1.035);
  }
  100%{
    transform:translate3d(-34px,0,0) scale(1.02);
  }
}

@keyframes bgExitLeft{
  0%{
    transform:translate3d(-34px,0,0) scale(1.02);
  }
  100%{
    transform:translate3d(-126px,0,0) scale(1.018);
  }
}

/* Keep cursor parallax extremely subtle on top of the slideshow motion. */
.bg-slide.parallax-active{
  will-change:transform,opacity,filter;
}

/* Commission lead is intentionally lighter and more editorial. */
.commission-v3 .commission-lead{
  max-width:660px;
  font-size:clamp(16px,1.24vw,21px);
  line-height:1.48;
  color:rgba(255,255,255,.68);
  font-weight:300;
}

/* Natural, cool-neutral illumination for SEND PROJECT INTRODUCTION */
.commission-submit{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(225,239,246,.095),rgba(190,211,223,.045));
  border-color:rgba(224,239,247,.44);
  box-shadow:
    0 0 18px rgba(204,226,238,.11),
    0 8px 26px rgba(7,16,22,.12),
    inset 0 1px 0 rgba(255,255,255,.15);
}

.commission-submit::before{
  content:"";
  position:absolute;
  inset:-40% -15%;
  background:
    radial-gradient(circle at 38% 42%,
      rgba(229,244,250,.24) 0%,
      rgba(205,228,239,.12) 28%,
      rgba(205,228,239,0) 66%);
  filter:blur(12px);
  pointer-events:none;
}

.commission-submit span,
.commission-submit b{
  position:relative;
  z-index:1;
}

.commission-submit:hover{
  background:
    linear-gradient(180deg,rgba(230,244,250,.15),rgba(195,218,229,.075));
  border-color:rgba(231,244,250,.62);
  box-shadow:
    0 0 26px rgba(205,229,240,.17),
    0 10px 30px rgba(7,16,22,.14),
    inset 0 1px 0 rgba(255,255,255,.20);
}


/* =========================================================
   v8.22 — BACKGROUND MOTION FIX
   Correct target is .hero-bg (not .bg-slide).
   Each image enters from the right, drifts continuously left,
   then accelerates left while blurring out.
   ========================================================= */

.hero-backgrounds{
  overflow:hidden;
}

/* Stable base state */
.hero-backgrounds .hero-bg{
  inset:-3%;
  width:106%;
  height:106%;
  opacity:0;
  filter:blur(8px);
  transform:translate3d(110px,0,0) scale(1.055);
  transition:opacity 1.05s ease, filter 1.05s ease;
  will-change:transform,opacity,filter;
}

/* 7-second slow cinematic drift: right -> left */
.hero-backgrounds .hero-bg.active{
  opacity:1;
  filter:blur(0);
  animation:arrtBgDriftLeft 7s linear both !important;
}

/* Exit continues in the same direction and accelerates */
.hero-backgrounds .hero-bg.leaving{
  opacity:0;
  filter:blur(10px);
  animation:arrtBgExitLeft 1.35s cubic-bezier(.16,.82,.18,1) forwards !important;
}

@keyframes arrtBgDriftLeft{
  0%{
    transform:translate3d(88px,0,0) scale(1.055);
  }
  100%{
    transform:translate3d(-46px,0,0) scale(1.045);
  }
}

@keyframes arrtBgExitLeft{
  0%{
    transform:translate3d(-46px,0,0) scale(1.045);
  }
  100%{
    transform:translate3d(-150px,0,0) scale(1.04);
  }
}


/* =========================================================
   v8.23 — softer background travel + 10s cadence
   ========================================================= */

/* HERO text now drifts for the full 10-second display period */
.headline-slide.active .headline-inner{
  animation:headlineDriftUp 10s linear both;
}

/* Background movement amplitude reduced by ~50% */
.hero-backgrounds .hero-bg{
  transform:translate3d(55px,0,0) scale(1.04);
}

.hero-backgrounds .hero-bg.active{
  animation:arrtBgDriftLeftV823 10s linear both !important;
}

.hero-backgrounds .hero-bg.leaving{
  animation:arrtBgExitLeftV823 1.35s cubic-bezier(.16,.82,.18,1) forwards !important;
}

@keyframes arrtBgDriftLeftV823{
  0%{
    transform:translate3d(44px,0,0) scale(1.045);
  }
  100%{
    transform:translate3d(-23px,0,0) scale(1.04);
  }
}

@keyframes arrtBgExitLeftV823{
  0%{
    transform:translate3d(-23px,0,0) scale(1.04);
  }
  100%{
    transform:translate3d(-75px,0,0) scale(1.038);
  }
}


/* =========================================================
   v8.24 — background motion reduced another 50%
   ========================================================= */

.hero-backgrounds .hero-bg{
  transform:translate3d(28px,0,0) scale(1.038);
}

.hero-backgrounds .hero-bg.active{
  animation:arrtBgDriftLeftV824 10s linear both !important;
}

.hero-backgrounds .hero-bg.leaving{
  animation:arrtBgExitLeftV824 1.35s cubic-bezier(.16,.82,.18,1) forwards !important;
}

@keyframes arrtBgDriftLeftV824{
  0%{
    transform:translate3d(22px,0,0) scale(1.042);
  }
  100%{
    transform:translate3d(-11px,0,0) scale(1.038);
  }
}

@keyframes arrtBgExitLeftV824{
  0%{
    transform:translate3d(-11px,0,0) scale(1.038);
  }
  100%{
    transform:translate3d(-38px,0,0) scale(1.036);
  }
}


/* =========================================================
   v8.25 — SELECTED WORK / 8-video horizontal gallery
   ========================================================= */

.work-panel{
  overflow:hidden;
}

.video-gallery-shell{
  position:absolute;
  inset:88px 0 0;
  display:grid;
  grid-template-columns:62px minmax(0,1fr) 62px;
  grid-template-rows:minmax(0,1fr) 42px;
  align-items:center;
  padding:28px 18px 18px;
}

.video-gallery-viewport{
  grid-column:2;
  grid-row:1;
  width:100%;
  height:100%;
  overflow:hidden;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.video-gallery-viewport::-webkit-scrollbar{display:none}

.video-gallery-track{
  height:100%;
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  padding:0 2px;
}

.work-video-card{
  flex:0 0 clamp(360px,36vw,620px);
  height:min(66vh,650px);
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(19,30,38,.11);
  overflow:hidden;
}

.video-poster{
  position:relative;
  min-height:0;
  overflow:hidden;
  background:rgba(15,23,29,.45);
}

.video-poster::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(9,17,22,.24));
}

.video-poster img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s cubic-bezier(.18,.72,.16,1),filter .35s ease;
}

.work-video-card:hover .video-poster img{
  transform:scale(1.018);
}

.video-play{
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  width:70px;
  height:70px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.62);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(97,117,132,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .28s ease,background .28s ease,border-color .28s ease;
}

.video-play span{
  margin-left:4px;
  font-size:20px;
  color:rgba(255,255,255,.94);
}

.video-play:hover{
  transform:translate(-50%,-50%) scale(1.06);
  background:rgba(220,237,245,.13);
  border-color:rgba(255,255,255,.84);
}

.video-fs{
  position:absolute;
  z-index:4;
  right:18px;
  bottom:18px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(27,41,51,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:rgba(255,255,255,.88);
  font-size:18px;
  transition:background .25s ease,border-color .25s ease;
}

.video-fs:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.56);
}

.video-caption{
  min-height:94px;
  padding:17px 18px 18px;
  display:grid;
  grid-template-columns:46px 1fr;
  gap:12px;
  align-items:start;
  border-top:1px solid rgba(255,255,255,.11);
  background:rgba(44,61,72,.20);
  backdrop-filter:blur(8px);
}

.video-caption>span{
  padding-top:5px;
  font-size:8px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.43);
}

.video-caption h2{
  margin:0 0 4px;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(22px,1.8vw,31px);
  line-height:1;
  font-weight:400;
}

.video-caption p{
  margin:0;
  font-size:8px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(255,255,255,.53);
}

.gallery-arrow{
  grid-row:1;
  align-self:center;
  width:48px;
  height:78px;
  display:grid;
  place-items:center;
  font-family:"DM Sans",Arial,sans-serif;
  font-size:42px;
  font-weight:200;
  color:rgba(255,255,255,.76);
  cursor:pointer;
  transition:color .25s ease,transform .25s ease;
}
.gallery-prev{grid-column:1;justify-self:start}
.gallery-next{grid-column:3;justify-self:end}
.gallery-arrow:hover{color:#fff;transform:scale(1.06)}
.gallery-arrow:disabled{opacity:.20;cursor:default;transform:none}

.video-gallery-status{
  grid-column:2;
  grid-row:2;
  align-self:end;
  display:flex;
  align-items:center;
  gap:14px;
  padding-top:11px;
  font-size:8px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.48);
}

.video-gallery-line{
  position:relative;
  flex:1;
  height:1px;
  background:rgba(255,255,255,.13);
  overflow:hidden;
}
.video-gallery-line i{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:12.5%;
  background:rgba(255,255,255,.60);
  transition:width .35s ease;
}

/* Full-screen viewing layer inside Selected Work */
.video-lightbox{
  position:absolute;
  z-index:80;
  inset:0;
  padding:20px 22px 22px;
  background:rgba(9,16,22,.86);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.video-lightbox.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}

.video-lightbox-top{
  height:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:8px;
  letter-spacing:.17em;
  color:rgba(255,255,255,.66);
}

.video-lightbox-controls{
  display:flex;
  align-items:center;
  gap:20px;
}
#videoNativeFullscreen{
  cursor:pointer;
  font-size:8px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.68);
}
#videoNativeFullscreen:hover{color:#fff}

.video-lightbox-stage{
  position:absolute;
  left:22px;
  right:22px;
  top:88px;
  bottom:22px;
  display:grid;
  place-items:center;
  overflow:hidden;
}

#selectedWorkPlayer{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#070c10;
}

.video-missing{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  background:rgba(9,16,22,.88);
  color:rgba(255,255,255,.66);
  text-align:center;
  letter-spacing:.14em;
  font-size:10px;
}
.video-missing small{
  max-width:440px;
  font-size:9px;
  line-height:1.5;
  letter-spacing:.05em;
  color:rgba(255,255,255,.40);
}

@media(max-width:900px){
  .video-gallery-shell{
    grid-template-columns:42px minmax(0,1fr) 42px;
    padding-left:6px;
    padding-right:6px;
  }
  .work-video-card{
    flex-basis:min(78vw,520px);
    height:min(62vh,560px);
  }
  .video-play{width:60px;height:60px}
  .gallery-arrow{width:38px;font-size:34px}
}

@media(max-width:620px){
  .video-gallery-shell{
    grid-template-columns:34px minmax(0,1fr) 34px;
  }
  .work-video-card{
    flex-basis:calc(100vw - 152px);
    min-width:260px;
  }
  .video-caption{min-height:84px}
}


/* =========================================================
   v8.26 — top language switch + click outside to close panel
   ========================================================= */

.topbar-controls{
  display:flex;
  align-items:center;
  gap:17px;
  pointer-events:auto;
}

.language-switch{
  display:inline-flex;
  align-items:center;
  height:54px;
  color:rgba(255,255,255,.68);
  font-family:"DM Sans",Arial,sans-serif;
  font-size:8px;
  font-weight:400;
  letter-spacing:.19em;
  white-space:nowrap;
  text-shadow:0 4px 14px rgba(5,13,19,.18);
  user-select:none;
}

/* The topbar itself stays click-through; its visible controls remain interactive. */
.topbar .topbar-controls,
.topbar .brand,
.topbar .index-trigger{
  pointer-events:auto;
}

@media(max-width:620px){
  .topbar-controls{gap:11px}
  .language-switch{
    height:50px;
    font-size:7px;
    letter-spacing:.14em;
  }
}


/* =========================================================
   v8.28 — logo behavior on opened pages
   ========================================================= */

.brand{
  transition:opacity .28s ease, transform .32s var(--ease);
}

body.panel-open .brand{
  opacity:0;
  transform:translateY(-7px);
  pointer-events:none !important;
}

/* Centered ARRT logo inside each opened page */
.panel-head{
  position:relative;
}

.panel-logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:41px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.panel-logo img{
  display:block;
  width:100%;
  height:auto;
  opacity:1;
  filter:
    drop-shadow(3px 5px 7px rgba(3,10,28,.32))
    drop-shadow(0 12px 24px rgba(3,10,24,.18));
}

@media(max-width:720px){
  .panel-logo{
    width:36px;
  }
}


/* =========================================================
   v8.29 — page layering + cinematic Selected Work
   ========================================================= */

/* EN / RO should not sit above an opened page.
   Menu button remains visible and interactive. */
.language-switch{
  transition:opacity .25s ease, transform .28s var(--ease);
}
body.panel-open .language-switch{
  opacity:0;
  transform:translateY(-5px);
  pointer-events:none;
}

/* Centered gallery: one main project, adjacent projects only peeking in. */
.video-gallery-shell{
  grid-template-columns:62px minmax(0,1fr) 62px;
  padding:22px 18px 16px;
  overflow:hidden;
}

.video-gallery-viewport{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  cursor:grab;
}
.video-gallery-viewport:active{cursor:grabbing}

.video-gallery-track{
  height:100%;
  align-items:center;
  gap:30px;
  padding-top:0;
  padding-bottom:0;
}

/* Card occupies most of the stage, leaving side previews. */
.work-video-card{
  --work-opacity:1;
  --work-scale:1;
  --work-brightness:1;
  --work-blur:0px;
  --work-y:0px;

  flex:0 0 clamp(520px,62vw,900px);
  max-width:900px;
  height:min(65vh,650px);
  opacity:var(--work-opacity);
  transform:translateY(var(--work-y)) scale(var(--work-scale));
  filter:brightness(var(--work-brightness)) blur(var(--work-blur));
  transform-origin:center center;
  transition:
    opacity .16s linear,
    filter .16s linear;
  will-change:transform,opacity,filter;
  cursor:pointer;
}

/* Soft cinematic loss at the left and right edges. */
.video-gallery-shell::before,
.video-gallery-shell::after{
  content:"";
  position:absolute;
  z-index:5;
  top:22px;
  bottom:58px;
  width:clamp(90px,13vw,190px);
  pointer-events:none;
}
.video-gallery-shell::before{
  left:62px;
  background:linear-gradient(90deg,
    rgba(28,40,49,.58) 0%,
    rgba(28,40,49,.22) 45%,
    rgba(28,40,49,0) 100%);
}
.video-gallery-shell::after{
  right:62px;
  background:linear-gradient(270deg,
    rgba(28,40,49,.58) 0%,
    rgba(28,40,49,.22) 45%,
    rgba(28,40,49,0) 100%);
}

/* Keep navigation arrows above the edge gradients. */
.gallery-arrow{
  position:relative;
  z-index:8;
}

/* Inline video occupies exactly the poster/card area. */
.inline-work-video{
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  visibility:hidden;
  background:#080d11;
  transition:opacity .3s ease,visibility 0s linear .3s;
}

.inline-work-video.ready{
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}

.video-poster img{
  transition:
    opacity .3s ease,
    transform .8s cubic-bezier(.18,.72,.16,1),
    filter .35s ease;
}
.video-poster img.video-active{
  opacity:0;
}

.video-play{
  transition:
    opacity .25s ease,
    visibility 0s linear 0s,
    transform .28s ease,
    background .28s ease,
    border-color .28s ease;
}
.video-play.video-active{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* Fullscreen remains available while the video plays inline. */
.video-fs{
  z-index:6;
}

.inline-video-missing{
  position:absolute;
  z-index:7;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(11,19,25,.70);
  backdrop-filter:blur(9px);
  color:rgba(255,255,255,.60);
  font-size:8px;
  letter-spacing:.14em;
  white-space:nowrap;
  pointer-events:none;
}

/* Old page-size player is no longer used. */
.video-lightbox{
  display:none !important;
}

@media(max-width:900px){
  .video-gallery-shell{
    grid-template-columns:44px minmax(0,1fr) 44px;
  }
  .work-video-card{
    flex-basis:78%;
    height:min(62vh,570px);
  }
  .video-gallery-shell::before{left:44px}
  .video-gallery-shell::after{right:44px}
}

@media(max-width:620px){
  .video-gallery-shell{
    grid-template-columns:34px minmax(0,1fr) 34px;
    padding-left:5px;
    padding-right:5px;
  }
  .work-video-card{
    flex-basis:84%;
    min-width:0;
    height:min(58vh,500px);
  }
  .video-gallery-track{gap:18px}
  .video-gallery-shell::before{
    left:34px;
    width:70px;
  }
  .video-gallery-shell::after{
    right:34px;
    width:70px;
  }
}


/* =========================================================
   v8.30 — SELECTED WORK / 3-up clean gallery
   ========================================================= */

.video-gallery-track{
  gap:18px;
  padding-left:0 !important;
  padding-right:0 !important;
}

.work-video-card{
  flex:0 0 var(--gallery-card-width, 31%);
  max-width:none;
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  height:min(62vh,620px);
}

/* All three visible projects stay equally clear and bright. */
.video-gallery-shell::before,
.video-gallery-shell::after{
  display:none !important;
}

/* Slightly tighter arrows for the 3-up composition. */
.video-gallery-shell{
  grid-template-columns:54px minmax(0,1fr) 54px;
}

@media(max-width:900px){
  .work-video-card{
    flex-basis:var(--gallery-card-width, 48%);
  }
}

@media(max-width:620px){
  .work-video-card{
    flex-basis:var(--gallery-card-width, 86%);
  }
}


/* =========================================================
   v8.31 — PRACTICE / professional story + purpose
   ========================================================= */

.practice-story-page{
  scroll-behavior:smooth;
}

.practice-story-page .practice-intro{
  min-height:72vh;
  padding-bottom:7vh;
}

.practice-story-page .practice-intro-copy > p:last-child{
  margin:20px 0 0;
  max-width:690px;
  font-size:13px;
  line-height:1.65;
  color:rgba(255,255,255,.58);
}

.practice-story{
  margin:0 7vw;
  padding:9vh 0 5vh;
  border-top:1px solid rgba(255,255,255,.18);
  display:grid;
  grid-template-columns:minmax(250px,.7fr) minmax(520px,1.3fr);
  gap:7vw;
}

.practice-story-heading{
  position:sticky;
  top:42px;
  align-self:start;
}

.practice-story-heading h3{
  margin:28px 0 0;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(42px,4.6vw,76px);
  line-height:.92;
  font-weight:400;
  letter-spacing:-.035em;
}

.practice-story-list{
  border-top:1px solid rgba(255,255,255,.18);
}

.practice-story-row{
  display:grid;
  grid-template-columns:118px 1fr;
  gap:25px;
  padding:29px 0 31px;
  border-bottom:1px solid rgba(255,255,255,.15);
}

.story-marker{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:3px;
}

.story-marker span{
  font-size:8px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.34);
}

.story-marker strong{
  font-family:"DM Sans",Arial,sans-serif;
  font-size:10px;
  font-weight:400;
  letter-spacing:.16em;
  color:rgba(255,255,255,.67);
}

.story-copy h4{
  margin:0 0 10px;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(27px,2.5vw,42px);
  line-height:1;
  font-weight:400;
}

.story-copy p{
  margin:0;
  max-width:760px;
  font-size:12px;
  line-height:1.68;
  color:rgba(255,255,255,.57);
}

.practice-story-now .story-copy h4{
  color:rgba(255,255,255,.98);
}

.practice-purpose{
  margin:8vh 7vw 0;
  padding:8vh 0 11vh;
  border-top:1px solid rgba(255,255,255,.20);
}

.practice-purpose p{
  max-width:1240px;
  margin:4.5vh 0 0;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:clamp(42px,5.4vw,92px);
  line-height:.98;
  font-weight:400;
  letter-spacing:-.03em;
}

.practice-purpose em{
  font-style:normal;
  color:rgba(255,255,255,.66);
}

@media(max-width:900px){
  .practice-story{
    grid-template-columns:1fr;
    gap:5vh;
  }
  .practice-story-heading{
    position:static;
  }
  .practice-story-row{
    grid-template-columns:90px 1fr;
  }
}

@media(max-width:620px){
  .practice-story{
    margin:0 6vw;
    padding-top:7vh;
  }
  .practice-story-row{
    grid-template-columns:1fr;
    gap:14px;
    padding:24px 0 26px;
  }
  .story-marker{
    flex-direction:row;
    align-items:center;
    gap:14px;
  }
  .practice-purpose{
    margin-left:6vw;
    margin-right:6vw;
    padding-bottom:9vh;
  }
}


/* =========================================================
   v8.33 — PRACTICE / 3-image editorial version
   ========================================================= */

.practice-v833{
  scroll-behavior:smooth;
}

.practice-v833 .practice-intro{
  min-height:66vh;
  padding-bottom:6.5vh;
}

.practice-v833-story{
  margin:0 6.7vw;
  padding:7vh 0 0;
  border-top:1px solid rgba(255,255,255,.18);
}

.practice-v833-hero-image,
.practice-v833-image{
  position:relative;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}

.practice-v833-hero-image{
  width:min(100%,1180px);
  margin-left:auto;
  aspect-ratio:16/8.2;
}

.practice-v833-hero-image img,
.practice-v833-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.002);
  transition:transform 1.1s cubic-bezier(.18,.72,.16,1);
}

.practice-v833-hero-image:hover img,
.practice-v833-image:hover img{
  transform:scale(1.015);
}

.practice-v833-hero-image figcaption,
.practice-v833-image figcaption{
  position:absolute;
  left:14px;
  bottom:12px;
  padding:6px 8px;
  background:rgba(16,25,31,.36);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:7px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
}

.practice-v833-text{
  display:grid;
  grid-template-columns:200px minmax(0,860px);
  gap:5vw;
  margin:8vh 0 7vh;
  align-items:start;
}

.practice-v833-text .section-label{
  padding-top:7px;
}

.practice-v833-copy{
  columns:2;
  column-gap:42px;
}

.practice-v833-copy p{
  margin:0 0 18px;
  break-inside:avoid;
  font-size:17.4px;
  line-height:1.72;
  color:rgba(255,255,255,.62);
}

.practice-v833-copy p:first-child::first-letter{
  float:left;
  margin:4px 8px 0 0;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:52px;
  line-height:.72;
  color:rgba(255,255,255,.94);
}

.practice-v833-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.practice-v833-image{
  aspect-ratio:4/3;
}

.practice-v833-image:first-child img{
  object-position:center 40%;
}

.practice-v833-image:last-child img{
  object-position:center center;
}

.practice-v833 .practice-purpose{
  margin-top:8vh;
}

.practice-founder{
  margin:7.5vh 0 0;
  padding-top:4.8vh;
  border-top:1px solid rgba(255,255,255,.12);
  display:grid;
  grid-template-columns:minmax(220px,320px) minmax(0,520px);
  justify-content:space-between;
  align-items:end;
  gap:3.2vw;
}

.practice-founder-copy .section-label{
  display:block;
  margin-bottom:18px;
}

.practice-founder-copy h3{
  margin:0 0 8px;
  font-family:"Libre Caslon Display",Georgia,serif;
  font-size:30px;
  line-height:1.08;
  font-weight:400;
  color:rgba(255,255,255,.94);
}

.practice-founder-copy p{
  margin:0;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.54);
}

.practice-founder-image{
  margin:0;
  width:min(100%,520px);
  justify-self:end;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  aspect-ratio:4/3;
}

.practice-founder-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 28%;
  filter:saturate(.92) contrast(1.04) brightness(.96);
}

@media(max-width:900px){
  .practice-v833-text{
    grid-template-columns:1fr;
    gap:24px;
  }

  .practice-v833-copy{
    columns:1;
  }

  .practice-v833-hero-image{
    aspect-ratio:4/3;
  }

  .practice-founder{
    grid-template-columns:1fr;
    align-items:start;
  }

  .practice-founder-image{
    justify-self:start;
    width:min(100%,460px);
  }
}

@media(max-width:640px){
  .practice-v833-story{
    margin-left:5.5vw;
    margin-right:5.5vw;
  }

  .practice-v833-pair{
    grid-template-columns:1fr;
  }

  .practice-v833-image{
    aspect-ratio:4/3;
  }

  .practice-v833-text{
    margin-top:6vh;
    margin-bottom:6vh;
  }
}

/* =========================================================
   v8.53 — PRACTICE / compact editorial layout
   ========================================================= */
.practice-v833{
  padding-bottom:4vh;
}

.practice-v833 .practice-intro{
  min-height:0;
  margin:0 6.7vw;
  padding:4.6vh 0 4vh;
  display:block;
}

.practice-v833 .practice-kicker{
  margin-bottom:2.2vh;
}

.practice-v833 .practice-intro-grid{
  margin-top:0;
  grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);
  gap:4.2vw;
  align-items:end;
}

.practice-v833 .practice-intro-grid h2{
  font-size:clamp(46px,4.8vw,78px);
  line-height:.92;
}

.practice-v833 .practice-intro-copy{
  max-width:680px;
}

.practice-v833 .practice-lead{
  margin:0 0 14px;
  font-size:clamp(22px,1.8vw,31px);
  line-height:1.12;
}

.practice-v833 .practice-intro-copy > p:last-child{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.60);
}

.practice-v833 .practice-v833-hero-image{
  width:100%;
  margin:3.6vh 0 0;
  aspect-ratio:16/6.5;
}

.practice-v833 .practice-v833-hero-image img{
  object-position:center 48%;
}

.practice-v833-story{
  margin:0 6.7vw;
  padding:4.5vh 0 0;
}

.practice-v833-text{
  grid-template-columns:150px minmax(0,1fr);
  gap:3.2vw;
  margin:0;
}

.practice-v833-copy{
  columns:auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}

.practice-v833-copy p{
  margin:0;
  font-size:15px;
  line-height:1.55;
}

.practice-v833-copy p:first-child::first-letter{
  font-size:44px;
}

.practice-v833 .practice-purpose{
  margin:4.5vh 6.7vw 0;
  padding:3.6vh 0 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:3.2vw;
  align-items:start;
}

.practice-v833 .practice-purpose p{
  margin:0;
  max-width:980px;
  font-size:clamp(24px,2.25vw,38px);
  line-height:1.12;
}

.practice-founder{
  margin:4.2vh 6.7vw 0;
  padding:3.2vh 0 0;
  grid-template-columns:1fr 364px;
  gap:3vw;
  align-items:center;
}

.practice-founder-copy .section-label{
  margin-bottom:10px;
}

.practice-founder-copy h3{
  margin-bottom:5px;
  font-size:26px;
}

.practice-founder-copy p{
  font-size:10px;
}

.practice-founder-image{
  width:364px;
  aspect-ratio:16/10;
}

@media(max-width:1100px){
  .practice-v833-copy{
    grid-template-columns:1fr 1fr;
  }
  .practice-founder{
    grid-template-columns:1fr 320px;
  }
  .practice-founder-image{width:320px;}
}

@media(max-width:900px){
  .practice-v833 .practice-intro{
    margin-left:5.5vw;
    margin-right:5.5vw;
    padding-top:4vh;
  }
  .practice-v833 .practice-intro-grid{
    grid-template-columns:1fr;
    gap:22px;
  }
  .practice-v833 .practice-v833-hero-image{
    aspect-ratio:4/2.4;
    margin-top:3vh;
  }
  .practice-v833-story{
    margin-left:5.5vw;
    margin-right:5.5vw;
  }
  .practice-v833-text{
    grid-template-columns:1fr;
    gap:20px;
  }
  .practice-v833-copy{
    grid-template-columns:1fr;
    gap:16px;
  }
  .practice-v833 .practice-purpose{
    margin-left:5.5vw;
    margin-right:5.5vw;
    grid-template-columns:1fr;
    gap:18px;
  }
  .practice-founder{
    margin-left:5.5vw;
    margin-right:5.5vw;
    grid-template-columns:1fr;
    gap:20px;
    align-items:start;
  }
  .practice-founder-image{
    width:min(100%,320px);
    justify-self:start;
  }
}

/* =========================================================
   v8.50 — GLOBAL LED HOVER SYSTEM
   Cool-white illumination across interactive controls.
   ========================================================= */

/* Shared luminous response */
.action-btn,
.index-trigger,
.simple-x,
.gallery-arrow,
.video-play,
.video-fs,
.commission-submit,
.drawer-nav button,
.brand,
.menu-icon i{
  transition-property:color,background,border-color,box-shadow,text-shadow,filter,transform,opacity,padding-left;
  transition-duration:.28s;
  transition-timing-function:var(--ease);
}

/* Homepage action buttons */
.action-btn:hover{
  color:#fff;
  border-color:rgba(255,255,255,.96);
  background:rgba(234,247,255,.12);
  box-shadow:
    0 0 4px rgba(255,255,255,.76),
    0 0 13px rgba(232,247,255,.48),
    0 0 28px rgba(182,224,255,.24),
    inset 0 0 15px rgba(236,248,255,.06);
  text-shadow:
    0 0 2px rgba(255,255,255,1),
    0 0 9px rgba(230,246,255,.80),
    0 0 20px rgba(186,226,255,.36);
}
.action-btn:hover b{
  color:#fff;
  text-shadow:
    0 0 2px #fff,
    0 0 9px rgba(225,244,255,.96),
    0 0 22px rgba(173,218,255,.56);
}

/* Circular Index trigger */
.index-trigger:hover{
  border-color:rgba(255,255,255,.98);
  background:rgba(234,247,255,.11);
  box-shadow:
    0 0 4px rgba(255,255,255,.76),
    0 0 14px rgba(225,244,255,.50),
    0 0 30px rgba(178,220,255,.24),
    inset 0 0 15px rgba(237,249,255,.07);
}
.index-trigger:hover .menu-icon i{
  background:#fff;
  box-shadow:
    0 0 2px #fff,
    0 0 7px rgba(229,246,255,.96),
    0 0 16px rgba(180,222,255,.50);
}

/* Drawer page links — extend existing LED text to the number as well */
.drawer-nav button:hover span{
  color:rgba(255,255,255,.94);
  text-shadow:
    0 0 2px rgba(255,255,255,.98),
    0 0 8px rgba(226,244,255,.78),
    0 0 18px rgba(180,222,255,.34);
}

/* Close X controls */
.simple-x:hover{
  color:#fff;
  transform:scale(1.08);
  text-shadow:
    0 0 2px #fff,
    0 0 8px rgba(231,247,255,.96),
    0 0 18px rgba(189,229,255,.58),
    0 0 32px rgba(157,211,255,.28);
  filter:brightness(1.24);
}

/* Selected Work navigation arrows */
.gallery-arrow:not(:disabled):hover{
  color:#fff;
  transform:scale(1.09);
  text-shadow:
    0 0 2px #fff,
    0 0 9px rgba(230,246,255,.98),
    0 0 20px rgba(188,228,255,.62),
    0 0 36px rgba(154,211,255,.30);
  filter:brightness(1.22);
}

/* Selected Work media controls */
.video-play:hover,
.video-fs:hover{
  color:#fff;
  border-color:rgba(255,255,255,.92);
  box-shadow:
    0 0 4px rgba(255,255,255,.72),
    0 0 13px rgba(228,245,255,.48),
    0 0 28px rgba(178,220,255,.24),
    inset 0 0 13px rgba(237,249,255,.06);
}
.video-play:hover span,
.video-fs:hover{
  text-shadow:
    0 0 2px #fff,
    0 0 8px rgba(230,246,255,.90),
    0 0 18px rgba(186,226,255,.48);
}

/* Commission submit */
.commission-submit:hover{
  color:#fff;
  border-color:rgba(255,255,255,.92);
  box-shadow:
    0 0 4px rgba(255,255,255,.74),
    0 0 14px rgba(229,246,255,.50),
    0 0 30px rgba(181,223,255,.25),
    0 10px 30px rgba(7,16,22,.14),
    inset 0 0 16px rgba(239,250,255,.07);
  text-shadow:
    0 0 2px rgba(255,255,255,1),
    0 0 8px rgba(230,246,255,.80),
    0 0 19px rgba(184,225,255,.36);
}
.commission-submit:hover b{
  text-shadow:
    0 0 2px #fff,
    0 0 8px rgba(230,246,255,.96),
    0 0 18px rgba(180,222,255,.50);
}

/* Top-left ARRT logo — luminous rather than enlarging */
.brand:hover{
  transform:translateY(-1px);
}
.brand:hover img{
  filter:
    brightness(1.18)
    drop-shadow(0 0 2px rgba(255,255,255,.98))
    drop-shadow(0 0 7px rgba(231,247,255,.86))
    drop-shadow(0 0 15px rgba(190,229,255,.48))
    drop-shadow(0 0 27px rgba(159,213,255,.22));
}

/* Keep disabled controls quiet */
button:disabled:hover{
  box-shadow:none;
  text-shadow:none;
  filter:none;
}

/* =========================================================
   v8.51 — DESKTOP BUTTON GLOW: INTERNAL ONLY
   Keep text/arrow illumination; move button halo inside.
   ========================================================= */
@media (min-width: 641px){
  .action-btn:hover{
    box-shadow:
      inset 0 0 4px rgba(255,255,255,.72),
      inset 0 0 12px rgba(232,247,255,.42),
      inset 0 0 26px rgba(182,224,255,.18);
  }

  .commission-submit:hover{
    box-shadow:
      inset 0 0 4px rgba(255,255,255,.70),
      inset 0 0 13px rgba(229,246,255,.43),
      inset 0 0 28px rgba(181,223,255,.19);
  }

  .index-trigger:hover{
    box-shadow:
      inset 0 0 4px rgba(255,255,255,.72),
      inset 0 0 12px rgba(225,244,255,.44),
      inset 0 0 26px rgba(178,220,255,.18);
  }
}

/* =========================================================
   v8.52 — STRICT DESKTOP INNER GLOW
   No exterior halo on primary desktop buttons.
   ========================================================= */
@media (min-width: 641px){
  .action-btn:hover,
  .commission-submit:hover,
  .index-trigger:hover{
    filter:none !important;
    outline:none !important;
  }

  .action-btn:hover{
    box-shadow:
      inset 0 0 3px rgba(255,255,255,.78),
      inset 0 0 10px rgba(232,247,255,.46),
      inset 0 0 24px rgba(182,224,255,.22) !important;
  }

  .commission-submit:hover{
    box-shadow:
      inset 0 0 3px rgba(255,255,255,.76),
      inset 0 0 11px rgba(229,246,255,.46),
      inset 0 0 26px rgba(181,223,255,.22) !important;
  }

  .index-trigger:hover{
    box-shadow:
      inset 0 0 3px rgba(255,255,255,.78),
      inset 0 0 10px rgba(225,244,255,.47),
      inset 0 0 24px rgba(178,220,255,.22) !important;
  }
}


/* =========================================================
   v8.54 — PRACTICE / frame-by-frame scroll
   ========================================================= */
@media (min-width:901px){
  .practice-scroll{
    scroll-snap-type:y mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-y:contain;
  }

  .practice-frame{
    min-height:100%;
    height:100%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    box-sizing:border-box;
  }

  .practice-frame-primary{
    overflow:hidden;
  }

  .practice-v833 .practice-frame-primary{
    padding-top:2.8vh;
    padding-bottom:2.5vh;
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr);
    align-content:stretch;
  }

  .practice-v833 .practice-frame-primary .practice-kicker{
    margin-bottom:1.5vh;
  }

  .practice-v833 .practice-frame-primary .practice-v833-hero-image{
    margin-top:2.2vh;
    height:100%;
    min-height:0;
    aspect-ratio:auto;
  }

  .practice-frame-secondary{
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
    padding:2.5vh 0;
  }

  .practice-frame-secondary .practice-v833-story{
    padding-top:0;
  }

  .practice-frame-secondary .practice-purpose{
    margin-top:3.2vh;
    padding-top:2.8vh;
  }

  .practice-frame-secondary .practice-founder{
    margin-top:3vh;
    padding-top:2.6vh;
  }
}

@media (max-width:900px){
  .practice-scroll{
    scroll-snap-type:none;
    scroll-behavior:auto;
  }

  .practice-frame{
    min-height:0;
    height:auto;
  }
}


/* =========================================================
   v8.55 — PRACTICE / founder + related online projects
   ========================================================= */
.practice-founder{
  grid-template-columns:minmax(170px,.8fr) 255px minmax(280px,1fr);
  gap:2.6vw;
  align-items:center;
}

.practice-founder-image{
  width:255px;
  aspect-ratio:4/3;
  justify-self:center;
}

.practice-founder-links{
  display:grid;
  gap:0;
  align-self:stretch;
  align-content:center;
}

.practice-founder-links > .section-label{
  display:block;
  margin-bottom:10px;
}

.founder-link{
  display:grid;
  grid-template-columns:minmax(135px,.72fr) 1fr;
  align-items:baseline;
  gap:18px;
  padding:9px 0;
  border-top:1px solid rgba(255,255,255,.11);
  color:inherit;
  text-decoration:none;
  transition:border-color .24s ease, text-shadow .24s ease;
}

.founder-link:last-child{
  border-bottom:1px solid rgba(255,255,255,.11);
}

.founder-link strong{
  font-size:10px;
  font-weight:400;
  letter-spacing:.15em;
  color:rgba(255,255,255,.86);
  transition:color .24s ease, text-shadow .24s ease;
}

.founder-link span{
  font-size:10px;
  letter-spacing:.05em;
  color:rgba(255,255,255,.46);
  transition:color .24s ease, text-shadow .24s ease;
}

.founder-link:hover{
  border-color:rgba(255,255,255,.34);
}

.founder-link:hover strong,
.founder-link:hover span{
  color:#fff;
  text-shadow:
    0 0 4px rgba(255,255,255,.85),
    0 0 10px rgba(225,243,255,.55),
    0 0 20px rgba(206,235,255,.25);
}

@media(max-width:1100px){
  .practice-founder{
    grid-template-columns:1fr 220px minmax(245px,.9fr);
  }

  .practice-founder-image{
    width:220px;
  }

  .founder-link{
    grid-template-columns:1fr;
    gap:3px;
  }
}

@media(max-width:900px){
  .practice-founder{
    grid-template-columns:1fr;
  }

  .practice-founder-image{
    width:min(100%,255px);
    justify-self:start;
  }

  .practice-founder-links{
    width:min(100%,520px);
  }

  .founder-link{
    grid-template-columns:150px 1fr;
  }
}


/* v8.56 — founder portrait uses the selected original portrait */
.practice-founder-image{
  width:190px;
  aspect-ratio:3/4;
}
.practice-founder-image img{
  object-fit:cover;
  object-position:center 42%;
  filter:saturate(.96) contrast(1.03) brightness(.98);
}
@media(max-width:1100px){
  .practice-founder-image{width:180px;}
}
@media(max-width:900px){
  .practice-founder-image{width:min(100%,190px);}
}


/* =========================================================
   v8.59 — PRACTICE / one-screen desktop composition
   ========================================================= */
@media (min-width:901px){
  .practice-panel .practice-scroll{
    inset:88px 0 0;
    overflow:hidden !important;
    scroll-snap-type:none !important;
    scroll-behavior:auto !important;
    padding:3vh 5vw 3.2vh;
    display:grid;
    grid-template-columns:minmax(300px,.78fr) minmax(0,1.72fr);
    gap:3.2vw;
    align-items:stretch;
  }
  .practice-scroll > .practice-frame{
    min-height:0 !important;height:auto !important;scroll-snap-align:none !important;
    overflow:visible !important;box-sizing:border-box;
  }
  .practice-v833 .practice-frame-primary{
    margin:0;padding:0 !important;display:grid !important;
    grid-template-rows:auto auto minmax(0,1fr);align-content:stretch;
  }
  .practice-v833 .practice-frame-primary .practice-kicker{margin:0 0 1.2vh;}
  .practice-v833 .practice-frame-primary .practice-intro-grid{
    grid-template-columns:1fr;gap:1.2vh;align-items:start;
  }
  .practice-v833 .practice-frame-primary .practice-intro-grid h2{
    margin:0;font-size:clamp(34px,3.2vw,54px);line-height:.94;
  }
  .practice-v833 .practice-frame-primary .practice-lead{
    margin:0 0 7px;font-size:clamp(16px,1.25vw,21px);line-height:1.16;
  }
  .practice-v833 .practice-frame-primary .practice-intro-copy > p:last-child{
    font-size:11px;line-height:1.42;
  }
  .practice-v833 .practice-frame-primary .practice-v833-hero-image{
    width:100%;height:auto !important;max-height:35vh;margin:2.2vh 0 0 !important;
    aspect-ratio:4/3 !important;align-self:end;
  }
  .practice-v833 .practice-frame-primary .practice-v833-hero-image img{object-position:center 50%;}

  .practice-frame-secondary{
    padding:0 !important;margin:0;display:grid !important;
    grid-template-columns:minmax(0,1.45fr) minmax(240px,.78fr);
    grid-template-rows:auto auto 1fr;column-gap:3vw;row-gap:2.25vh;
    align-content:start;overflow:hidden !important;
  }
  .practice-frame-secondary .practice-v833-story{
    grid-column:1;grid-row:1;margin:0;padding:0;border-top:0;
  }
  .practice-frame-secondary .practice-v833-text{display:block;margin:0;}
  .practice-frame-secondary .practice-v833-text > .section-label{
    display:block;padding:0;margin:0 0 10px;
  }
  .practice-frame-secondary .practice-v833-copy{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;
  }
  .practice-frame-secondary .practice-v833-copy p{
    margin:0;font-size:11.2px;line-height:1.43;color:rgba(255,255,255,.64);
  }
  .practice-frame-secondary .practice-v833-copy p:first-child{grid-row:span 2;}
  .practice-frame-secondary .practice-v833-copy p:first-child::first-letter{
    font-size:35px;margin:3px 6px 0 0;
  }
  .practice-frame-secondary .practice-purpose{
    grid-column:1;grid-row:2;margin:0 !important;padding:2vh 0 0 !important;
    border-top:1px solid rgba(255,255,255,.12);display:grid;
    grid-template-columns:112px minmax(0,1fr);gap:1.8vw;
  }
  .practice-frame-secondary .practice-purpose p{
    margin:0;font-size:clamp(18px,1.45vw,25px);line-height:1.08;
  }
  .practice-frame-secondary .practice-founder{
    grid-column:2;grid-row:1 / span 3;margin:0;padding:0;border-top:0;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:1.35vh;min-width:0;
  }
  .practice-founder-copy .section-label{margin-bottom:6px;}
  .practice-founder-copy h3{margin:0 0 3px;font-size:23px;}
  .practice-founder-copy p{font-size:9px;}
  .practice-founder-image{
    order:2;width:min(100%,150px) !important;aspect-ratio:3/4 !important;
    justify-self:start;margin:0;
  }
  .practice-founder-links{order:3;width:100%;align-self:auto;margin-top:.3vh;}
  .practice-founder-links > .section-label{margin-bottom:5px;}
  .founder-link{grid-template-columns:1fr;gap:1px;padding:6px 0;}
  .founder-link strong{font-size:8.5px;}
  .founder-link span{font-size:8.5px;}
}
@media (min-width:901px) and (max-height:820px){
  .practice-panel .practice-scroll{padding-top:2.1vh;padding-bottom:2.2vh;}
  .practice-v833 .practice-frame-primary .practice-v833-hero-image{
    max-height:31vh;margin-top:1.5vh !important;
  }
  .practice-frame-secondary{row-gap:1.55vh;}
  .practice-frame-secondary .practice-v833-copy p{font-size:10.5px;line-height:1.36;}
  .practice-frame-secondary .practice-purpose{padding-top:1.4vh !important;}
  .practice-founder-image{width:min(100%,132px) !important;}
  .founder-link{padding:4px 0;}
}


/* =========================================================
   v8.60 — PRACTICE / balanced composition + related links
   Rebalances the whole desktop page so it reads larger,
   uses the empty space better, and remains one-screen.
   ========================================================= */
@media (min-width:901px){
  .practice-panel .practice-scroll{
    padding:3.1vh 3.85vw 3.1vh !important;
    grid-template-columns:minmax(360px,.96fr) minmax(0,1.34fr) !important;
    gap:2.65vw !important;
    align-items:start !important;
  }

  .practice-v833 .practice-frame-primary{
    grid-template-rows:auto auto minmax(0,1fr) !important;
    align-content:start !important;
  }

  .practice-v833 .practice-frame-primary .practice-kicker{
    margin:0 0 1.5vh !important;
    font-size:11px;
    letter-spacing:.18em;
  }

  .practice-v833 .practice-frame-primary .practice-intro-grid{
    gap:1.55vh !important;
  }

  .practice-v833 .practice-frame-primary .practice-intro-grid h2{
    font-size:clamp(42px,3.9vw,68px) !important;
    line-height:.97 !important;
    max-width:12ch;
  }

  .practice-v833 .practice-frame-primary .practice-intro-copy{
    max-width:92%;
  }

  .practice-v833 .practice-frame-primary .practice-lead{
    margin:0 0 10px !important;
    font-size:clamp(18px,1.38vw,24px) !important;
    line-height:1.18 !important;
  }

  .practice-v833 .practice-frame-primary .practice-intro-copy > p:last-child{
    font-size:12.5px !important;
    line-height:1.55 !important;
    max-width:52ch;
  }

  .practice-v833 .practice-frame-primary .practice-v833-hero-image{
    width:100% !important;
    max-width:540px;
    max-height:39vh !important;
    margin:2.7vh 0 0 !important;
    justify-self:start;
    align-self:end;
  }

  .practice-frame-secondary{
    grid-template-columns:minmax(0,1.28fr) minmax(215px,.62fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:2.5vw !important;
    row-gap:2.1vh !important;
    align-items:start !important;
  }

  .practice-frame-secondary .practice-v833-story{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  .practice-frame-secondary .practice-v833-text > .section-label,
  .practice-frame-secondary .practice-purpose > .section-label,
  .practice-founder-copy .section-label,
  .practice-founder-links > .section-label{
    font-size:11px;
    letter-spacing:.18em;
    margin-bottom:10px !important;
  }

  .practice-frame-secondary .practice-v833-copy{
    gap:14px 24px !important;
  }

  .practice-frame-secondary .practice-v833-copy p{
    font-size:13px !important;
    line-height:1.58 !important;
    color:rgba(255,255,255,.68) !important;
  }

  .practice-frame-secondary .practice-v833-copy p:first-child::first-letter{
    font-size:38px !important;
    margin:4px 6px 0 0 !important;
  }

  .practice-frame-secondary .practice-purpose{
    grid-column:1 !important;
    grid-row:2 !important;
    padding:1.9vh 0 0 !important;
    gap:1.35vw !important;
    align-self:start;
  }

  .practice-frame-secondary .practice-purpose p{
    font-size:clamp(24px,1.72vw,34px) !important;
    line-height:1.10 !important;
    max-width:24ch;
  }

  .practice-frame-secondary .practice-founder{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    gap:1.15vh !important;
    align-self:start;
  }

  .practice-founder-copy h3{
    font-size:clamp(22px,1.9vw,32px) !important;
    line-height:1.02;
    margin:0 0 4px !important;
  }

  .practice-founder-copy p{
    font-size:10px !important;
    letter-spacing:.16em;
  }

  .practice-founder-image{
    width:min(100%,178px) !important;
    margin:.35vh 0 .25vh !important;
  }

  .practice-founder-links{
    margin-top:.35vh !important;
  }

  .founder-link{
    padding:7px 0 !important;
    gap:2px !important;
  }

  .founder-link strong{
    font-size:9px !important;
    letter-spacing:.17em;
  }

  .founder-link span{
    font-size:9px !important;
    line-height:1.35 !important;
  }
}

@media (min-width:901px) and (max-height:860px){
  .practice-panel .practice-scroll{
    padding-top:2.55vh !important;
    padding-bottom:2.55vh !important;
  }

  .practice-v833 .practice-frame-primary .practice-intro-grid h2{
    font-size:clamp(38px,3.45vw,58px) !important;
  }

  .practice-v833 .practice-frame-primary .practice-v833-hero-image{
    max-height:35vh !important;
    margin-top:2vh !important;
  }

  .practice-frame-secondary .practice-v833-copy p{
    font-size:12px !important;
    line-height:1.48 !important;
  }

  .practice-frame-secondary .practice-purpose p{
    font-size:clamp(21px,1.52vw,29px) !important;
  }

  .practice-founder-image{
    width:min(100%,160px) !important;
  }

  .founder-link{
    padding:5px 0 !important;
  }
}


/* =========================================================
   v8.61 — PRACTICE purpose full-width + COMMISSION cues
   ========================================================= */
@media (min-width:901px){
  /* Practice: make page denser and move THE PURPOSE to the full bottom row */
  .practice-panel .practice-scroll{
    grid-template-rows:minmax(0,1fr) auto !important;
    row-gap:2.1vh !important;
    align-items:start !important;
  }

  .practice-v833 .practice-frame-primary{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  .practice-frame-secondary{
    grid-column:2 !important;
    grid-row:1 !important;
    grid-template-columns:minmax(0,1.18fr) minmax(220px,.72fr) !important;
    grid-template-rows:auto !important;
    column-gap:2.55vw !important;
    row-gap:0 !important;
    align-items:start !important;
  }

  .practice-frame-secondary .practice-v833-story{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:start;
  }

  .practice-frame-secondary .practice-founder{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:start;
    gap:1.05vh !important;
  }

  .practice-frame-secondary .practice-v833-copy{
    gap:15px 22px !important;
  }

  .practice-frame-secondary .practice-v833-copy p{
    font-size:12.7px !important;
    line-height:1.56 !important;
  }

  .practice-frame-secondary .practice-v833-copy p:first-child::first-letter{
    font-size:39px !important;
  }

  .practice-founder-image{
    width:min(100%,170px) !important;
    margin:.25vh 0 .15vh !important;
  }

  .practice-founder-copy h3{
    font-size:clamp(24px,1.85vw,32px) !important;
  }

  .practice-founder-links{
    margin-top:.5vh !important;
  }

  .founder-link{
    padding:6px 0 !important;
  }

  .practice-panel .practice-scroll > .practice-purpose{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    margin:0 !important;
    padding:1.55vh 0 0 !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
    display:grid !important;
    grid-template-columns:clamp(120px,8vw,160px) minmax(0,1fr) !important;
    gap:1.6vw !important;
    align-items:start !important;
    align-self:end !important;
  }

  .practice-panel .practice-scroll > .practice-purpose > .section-label{
    margin:0 !important;
    font-size:11px;
    letter-spacing:.18em;
    padding-top:5px;
  }

  .practice-panel .practice-scroll > .practice-purpose p{
    margin:0 !important;
    width:100%;
    max-width:none !important;
    font-size:clamp(26px,1.95vw,36px) !important;
    line-height:1.08 !important;
    color:rgba(255,255,255,.93);
    text-wrap:balance;
  }

  /* Commission: enlarge labels and add subtle writable glow at the field base */
  .commission-field label{
    font-size:8.4px !important; /* +20% from 7px */
    letter-spacing:.17em !important;
    margin-bottom:5px !important;
    color:rgba(255,255,255,.58) !important;
  }

  .commission-field input,
  .commission-field textarea{
    padding:6px 0 10px !important;
    background:
      linear-gradient(to top,
        rgba(198,224,255,.13) 0%,
        rgba(198,224,255,.07) 18%,
        rgba(198,224,255,.02) 34%,
        rgba(198,224,255,0) 58%) !important;
    box-shadow:
      inset 0 -1px 0 rgba(255,255,255,.20),
      inset 0 -12px 18px rgba(188,221,255,.06) !important;
    border-radius:4px 4px 2px 2px;
  }

  .commission-field textarea{
    min-height:50px !important;
  }

  .commission-field:focus-within{
    border-bottom-color:rgba(255,255,255,.82) !important;
  }

  .commission-field:focus-within input,
  .commission-field:focus-within textarea{
    background:
      linear-gradient(to top,
        rgba(212,235,255,.20) 0%,
        rgba(212,235,255,.10) 22%,
        rgba(212,235,255,.03) 42%,
        rgba(212,235,255,0) 66%) !important;
    box-shadow:
      inset 0 -1px 0 rgba(255,255,255,.34),
      inset 0 -16px 24px rgba(205,234,255,.11),
      0 0 14px rgba(205,234,255,.05) !important;
  }
}

@media (min-width:901px) and (max-height:860px){
  .practice-panel .practice-scroll{
    row-gap:1.45vh !important;
  }

  .practice-panel .practice-scroll > .practice-purpose{
    padding-top:1.2vh !important;
  }

  .practice-panel .practice-scroll > .practice-purpose p{
    font-size:clamp(22px,1.65vw,30px) !important;
  }

  .practice-frame-secondary .practice-v833-copy p{
    font-size:12px !important;
    line-height:1.47 !important;
  }

  .practice-founder-image{
    width:min(100%,156px) !important;
  }
}


/* =========================================================
   v8.62 — COMMISSION / diffuse field light + filled inner glow
   ========================================================= */
@media (min-width:901px){
  .commission-field{
    transition:border-color .24s ease;
  }

  /* Default: diffuse light centered through the writable field */
  .commission-field input,
  .commission-field textarea{
    background:
      radial-gradient(
        ellipse at 50% 58%,
        rgba(205,232,255,.105) 0%,
        rgba(205,232,255,.065) 28%,
        rgba(205,232,255,.025) 48%,
        rgba(205,232,255,0) 72%
      ) !important;
    box-shadow:
      inset 0 0 18px rgba(194,226,255,.045),
      inset 0 -1px 0 rgba(255,255,255,.17) !important;
    transition:
      background .24s ease,
      box-shadow .24s ease,
      color .24s ease;
  }

  /* Hover: field lights up more visibly, still only on the inside */
  .commission-field:hover{
    border-bottom-color:rgba(255,255,255,.58) !important;
  }

  .commission-field:hover input,
  .commission-field:hover textarea{
    background:
      radial-gradient(
        ellipse at 50% 58%,
        rgba(218,238,255,.18) 0%,
        rgba(218,238,255,.105) 30%,
        rgba(218,238,255,.045) 52%,
        rgba(218,238,255,0) 76%
      ) !important;
    box-shadow:
      inset 0 0 22px rgba(205,233,255,.10),
      inset 0 -1px 0 rgba(255,255,255,.28) !important;
  }

  /* Focus: clearer writing cue */
  .commission-field:focus-within input,
  .commission-field:focus-within textarea{
    background:
      radial-gradient(
        ellipse at 50% 58%,
        rgba(226,242,255,.22) 0%,
        rgba(226,242,255,.13) 31%,
        rgba(226,242,255,.055) 54%,
        rgba(226,242,255,0) 78%
      ) !important;
    box-shadow:
      inset 0 0 25px rgba(213,238,255,.13),
      inset 0 -1px 0 rgba(255,255,255,.38) !important;
  }

  /* Filled: persistent internal LED-like glow, matching button language */
  .commission-field.has-value{
    border-bottom-color:rgba(255,255,255,.72) !important;
  }

  .commission-field.has-value input,
  .commission-field.has-value textarea{
    background:
      radial-gradient(
        ellipse at 50% 58%,
        rgba(232,246,255,.24) 0%,
        rgba(216,239,255,.145) 32%,
        rgba(202,231,255,.06) 56%,
        rgba(202,231,255,0) 80%
      ) !important;
    box-shadow:
      inset 0 0 28px rgba(215,239,255,.16),
      inset 0 -1px 0 rgba(255,255,255,.42) !important;
  }

  .commission-field.has-value label{
    color:rgba(255,255,255,.78) !important;
    text-shadow:
      0 0 4px rgba(255,255,255,.48),
      0 0 9px rgba(210,236,255,.28);
  }
}


/* =========================================================
   v8.63 — PRACTICE + COMMISSION refinement
   ========================================================= */
@media (min-width:901px){
  /* PRACTICE: left visual column + homogeneous central narrative + founder column. */
  .practice-panel .practice-scroll{
    grid-template-columns:minmax(350px,.92fr) minmax(0,1.38fr) !important;
    grid-template-rows:minmax(0,1fr) auto !important;
    column-gap:2.8vw !important;
    row-gap:1.65vh !important;
    padding:2.7vh 3.85vw 2.7vh !important;
    align-items:start !important;
  }

  .practice-v833 .practice-frame-primary{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    align-content:start !important;
  }

  .practice-v833 .practice-frame-primary .practice-intro-grid h2{
    font-size:clamp(40px,3.55vw,62px) !important;
    line-height:.97 !important;
  }

  .practice-v833 .practice-frame-primary .practice-lead{
    font-size:clamp(17px,1.28vw,22px) !important;
    line-height:1.2 !important;
  }

  .practice-v833 .practice-frame-primary .practice-intro-copy > p:last-child{
    font-size:12.5px !important;
    line-height:1.5 !important;
  }

  .practice-v833 .practice-frame-primary .practice-v833-hero-image{
    max-width:520px !important;
    max-height:35vh !important;
    margin:2.1vh 0 0 !important;
  }

  .practice-frame-secondary{
    grid-column:2 !important;
    grid-row:1 !important;
    grid-template-columns:minmax(0,1.42fr) minmax(218px,.58fr) !important;
    grid-template-rows:auto !important;
    column-gap:2.8vw !important;
    row-gap:0 !important;
    align-items:start !important;
    overflow:visible !important;
  }

  .practice-frame-secondary .practice-v833-story{
    grid-column:1 !important;
    grid-row:1 !important;
    width:100%;
  }

  .practice-frame-secondary .practice-v833-copy{
    display:block !important;
    columns:1 !important;
    column-count:1 !important;
    max-width:100%;
  }

  .practice-frame-secondary .practice-v833-copy p{
    margin:0 0 1.15em !important;
    font-size:13.8px !important;
    line-height:1.62 !important;
    color:rgba(255,255,255,.70) !important;
    max-width:66ch;
  }

  .practice-frame-secondary .practice-v833-copy p:last-child{
    margin-bottom:0 !important;
  }

  .practice-frame-secondary .practice-v833-copy p:first-child::first-letter{
    float:none !important;
    font-size:inherit !important;
    line-height:inherit !important;
    margin:0 !important;
    font-family:inherit !important;
    color:inherit !important;
  }

  .practice-frame-secondary .practice-founder{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:start !important;
    gap:.9vh !important;
  }

  .practice-founder-image{
    width:min(100%,166px) !important;
    margin:.2vh 0 .15vh !important;
  }

  .practice-founder-links{
    margin-top:.35vh !important;
  }

  .founder-link{
    padding:5px 0 !important;
  }

  .founder-link strong small{
    display:inline;
    font-size:.78em;
    font-weight:400;
    letter-spacing:.08em;
    color:rgba(255,255,255,.48);
  }

  /* THE PURPOSE becomes the visual footer of the right side only:
     from the right edge of the sketch column to the right edge of the panel. */
  .practice-panel .practice-scroll > .practice-purpose{
    grid-column:2 !important;
    grid-row:2 !important;
    width:100% !important;
    margin:0 !important;
    padding:1.45vh 0 0 !important;
    border-top:1px solid rgba(255,255,255,.13) !important;
    display:grid !important;
    grid-template-columns:clamp(116px,7vw,145px) minmax(0,1fr) !important;
    gap:1.45vw !important;
    align-items:start !important;
    align-self:end !important;
  }

  .practice-panel .practice-scroll > .practice-purpose > .section-label{
    margin:0 !important;
    padding-top:4px;
    font-size:10.5px !important;
    letter-spacing:.18em !important;
  }

  .practice-panel .practice-scroll > .practice-purpose p{
    margin:0 !important;
    max-width:none !important;
    font-size:clamp(23px,1.65vw,31px) !important;
    line-height:1.08 !important;
    text-wrap:balance;
  }

  /* COMMISSION: filled fields keep their color; only the inner light persists. */
  .commission-field.has-value{
    border-bottom-color:rgba(255,255,255,.28) !important;
  }

  .commission-field.has-value label{
    color:rgba(255,255,255,.58) !important;
    text-shadow:none !important;
  }

  .commission-field.has-value input,
  .commission-field.has-value textarea{
    color:rgba(255,255,255,.95) !important;
    background:
      radial-gradient(
        ellipse at 50% 58%,
        rgba(218,238,255,.18) 0%,
        rgba(218,238,255,.105) 30%,
        rgba(218,238,255,.045) 52%,
        rgba(218,238,255,0) 76%
      ) !important;
    box-shadow:
      inset 0 0 22px rgba(205,233,255,.10),
      inset 0 -1px 0 rgba(255,255,255,.28) !important;
  }

  .commission-field.has-value:hover input,
  .commission-field.has-value:hover textarea{
    background:
      radial-gradient(
        ellipse at 50% 58%,
        rgba(226,242,255,.22) 0%,
        rgba(226,242,255,.13) 31%,
        rgba(226,242,255,.055) 54%,
        rgba(226,242,255,0) 78%
      ) !important;
    box-shadow:
      inset 0 0 25px rgba(213,238,255,.13),
      inset 0 -1px 0 rgba(255,255,255,.36) !important;
  }
}

@media (min-width:901px) and (max-height:860px){
  .practice-panel .practice-scroll{
    padding-top:2.25vh !important;
    padding-bottom:2.25vh !important;
    row-gap:1.2vh !important;
  }

  .practice-v833 .practice-frame-primary .practice-v833-hero-image{
    max-height:31vh !important;
    margin-top:1.6vh !important;
  }

  .practice-frame-secondary .practice-v833-copy p{
    font-size:12.7px !important;
    line-height:1.52 !important;
    margin-bottom:.9em !important;
  }

  .practice-founder-image{
    width:min(100%,150px) !important;
  }

  .practice-panel .practice-scroll > .practice-purpose{
    padding-top:1vh !important;
  }

  .practice-panel .practice-scroll > .practice-purpose p{
    font-size:clamp(20px,1.42vw,27px) !important;
  }
}


/* =========================================================
   v8.64 — PRACTICE purpose under copy + COMMISSION final field behavior
   ========================================================= */
@media (min-width:901px){

  /* PRACTICE — THE PURPOSE now sits directly below THE PRACTICE copy. */
  .practice-panel .practice-scroll{
    grid-template-rows:minmax(0,1fr) !important;
    row-gap:0 !important;
  }

  .practice-frame-secondary{
    grid-row:1 !important;
    grid-template-rows:auto !important;
  }

  .practice-frame-secondary .practice-v833-story{
    display:block !important;
    grid-column:1 !important;
    grid-row:1 !important;
  }

  .practice-frame-secondary .practice-v833-story > .practice-purpose{
    position:static !important;
    width:100% !important;
    margin:2.2vh 0 0 !important;
    padding:1.7vh 0 0 !important;
    border-top:1px solid rgba(255,255,255,.13) !important;
    display:grid !important;
    grid-template-columns:clamp(108px,6.5vw,138px) minmax(0,1fr) !important;
    gap:1.35vw !important;
    align-items:start !important;
  }

  .practice-frame-secondary .practice-v833-story > .practice-purpose > .section-label{
    margin:0 !important;
    padding-top:4px;
    font-size:10.5px !important;
    letter-spacing:.18em !important;
  }

  .practice-frame-secondary .practice-v833-story > .practice-purpose p{
    margin:0 !important;
    max-width:34ch !important;
    font-size:clamp(21px,1.45vw,28px) !important;
    line-height:1.10 !important;
    text-wrap:balance;
  }

  /* Neutralize the old full-width bottom-purpose rules. */
  .practice-panel .practice-scroll > .practice-purpose{
    display:none !important;
  }

  /* COMMISSION — move the contact form about two text lines upward. */
  .commission-form{
    transform:translateY(-30px);
  }

  /* One and only one baseline: the parent border.
     Inputs themselves have no extra bottom line. */
  .commission-field input,
  .commission-field textarea{
    background:transparent !important;
    background-image:none !important;
    box-shadow:
      inset 0 0 18px rgba(194,226,255,.05) !important;
  }

  .commission-field:hover input,
  .commission-field:hover textarea{
    background:transparent !important;
    background-image:none !important;
    box-shadow:
      inset 0 0 23px rgba(205,233,255,.11) !important;
  }

  .commission-field:focus-within input,
  .commission-field:focus-within textarea{
    background:transparent !important;
    background-image:none !important;
    box-shadow:
      inset 0 0 27px rgba(213,238,255,.15) !important;
  }

  /* Filled fields stay visually transparent; only the internal LED glow persists. */
  .commission-field.has-value{
    border-bottom-color:rgba(255,255,255,.38) !important;
    background:transparent !important;
  }

  .commission-field.has-value label{
    color:rgba(255,255,255,.58) !important;
    text-shadow:none !important;
  }

  .commission-field.has-value input,
  .commission-field.has-value textarea{
    color:rgba(255,255,255,.95) !important;
    background:transparent !important;
    background-image:none !important;
    box-shadow:
      inset 0 0 26px rgba(211,237,255,.14),
      inset 0 0 8px rgba(235,248,255,.06) !important;
  }

  .commission-field.has-value:hover input,
  .commission-field.has-value:hover textarea{
    background:transparent !important;
    background-image:none !important;
    box-shadow:
      inset 0 0 31px rgba(218,241,255,.19),
      inset 0 0 10px rgba(240,250,255,.08) !important;
  }

  /* Keep browser autofill from painting a white/yellow field. */
  .commission-field input:-webkit-autofill,
  .commission-field input:-webkit-autofill:hover,
  .commission-field input:-webkit-autofill:focus,
  .commission-field textarea:-webkit-autofill,
  .commission-field textarea:-webkit-autofill:hover,
  .commission-field textarea:-webkit-autofill:focus{
    -webkit-text-fill-color:rgba(255,255,255,.95) !important;
    caret-color:#fff;
    transition:background-color 9999s ease-out 0s;
  }
}

@media (min-width:901px) and (max-height:860px){
  .commission-form{
    transform:translateY(-24px);
  }

  .practice-frame-secondary .practice-v833-story > .practice-purpose{
    margin-top:1.55vh !important;
    padding-top:1.25vh !important;
  }

  .practice-frame-secondary .practice-v833-story > .practice-purpose p{
    font-size:clamp(19px,1.28vw,25px) !important;
  }
}


/* =========================================================
   v8.65 — PRACTICE typography + COMMISSION hover glow
   ========================================================= */
@media (min-width:901px){

  /* THE PRACTICE body now uses the same typeface as THE PURPOSE. */
  .practice-frame-secondary .practice-v833-copy p{
    font-family:"Libre Caslon Display",Georgia,serif !important;
    font-weight:400 !important;
    letter-spacing:-.012em !important;
    line-height:1.52 !important;
  }

  /* Commission hover glow: +50% intensity. */
  .commission-field:hover input,
  .commission-field:hover textarea{
    box-shadow:
      inset 0 0 23px rgba(205,233,255,.165) !important;
  }

  .commission-field.has-value:hover input,
  .commission-field.has-value:hover textarea{
    box-shadow:
      inset 0 0 31px rgba(218,241,255,.285),
      inset 0 0 10px rgba(240,250,255,.12) !important;
  }
}

/* =========================================================
   v8.66 — PRACTICE exact text size + COMMISSION matched hover glow
   ========================================================= */
@media (min-width:901px){
  /* THE PRACTICE body: exact same responsive font size as THE PURPOSE. */
  .practice-frame-secondary .practice-v833-copy p{
    font-size:clamp(21px,1.45vw,28px) !important;
    line-height:1.30 !important;
  }

  /* COMMISSION fields: hover intensity matches SEND PROJECT INTRODUCTION. */
  .commission-field:hover input,
  .commission-field:hover textarea,
  .commission-field.has-value:hover input,
  .commission-field.has-value:hover textarea{
    box-shadow:
      inset 0 0 3px rgba(255,255,255,.76),
      inset 0 0 11px rgba(229,246,255,.46),
      inset 0 0 26px rgba(181,223,255,.22) !important;
  }
}

@media (min-width:901px) and (max-height:860px){
  /* Keep exact parity with THE PURPOSE on lower-height desktop screens too. */
  .practice-frame-secondary .practice-v833-copy p{
    font-size:clamp(19px,1.28vw,25px) !important;
    line-height:1.28 !important;
  }
}


/* =========================================================
   v8.67 — COMMISSION / +50% secondary typography + raised divider
   ========================================================= */
@media (min-width:901px){

  /* +50% for the small / secondary text family on the Commission page */
  .commission-v3 .commission-kicker{
    font-size:12px !important;
  }

  .commission-v3-categories article > span{
    font-size:12px !important;
  }

  .commission-v3-categories p{
    font-size:13.5px !important;
    line-height:1.35 !important;
  }

  .commission-field label{
    font-size:12.6px !important;
    line-height:1.15 !important;
    margin-bottom:6px !important;
  }

  .commission-v3-message .commission-invitation-title{
    font-size:clamp(36px,3.225vw,54px) !important;
    line-height:.98 !important;
  }

  /* Move the separator line upward by roughly two text rows,
     while preserving the already-raised form position. */
  .commission-v3-bottom{
    position:relative;
    border-top:0 !important;
  }

  .commission-v3-bottom::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-30px;
    height:1px;
    background:rgba(255,255,255,.18);
    pointer-events:none;
  }
}

@media (min-width:901px) and (max-height:860px){
  .commission-v3-message .commission-invitation-title{
    font-size:clamp(32px,2.85vw,46px) !important;
  }

  .commission-v3-bottom::before{
    top:-24px;
  }
}


/* =========================================================
   v8.68 — RO / EN / IT language selector
   ========================================================= */
.language-switch{
  gap:5px;
  pointer-events:auto;
}

.lang-option{
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:rgba(255,255,255,.48);
  font:inherit;
  font-size:inherit;
  font-weight:400;
  letter-spacing:inherit;
  line-height:1;
  cursor:pointer;
  transition:color .22s ease,text-shadow .22s ease,opacity .22s ease;
}

.lang-separator{
  color:rgba(255,255,255,.28);
  opacity:.8;
}

.lang-option:hover{
  color:rgba(255,255,255,.88);
  text-shadow:0 0 7px rgba(225,243,255,.24);
}

.lang-option.active{
  color:#fff;
  text-shadow:
    0 0 3px rgba(255,255,255,.92),
    0 0 9px rgba(229,246,255,.62),
    0 0 19px rgba(181,223,255,.36);
}

.lang-option:focus-visible{
  outline:0;
  color:#fff;
  text-shadow:
    0 0 3px rgba(255,255,255,.92),
    0 0 9px rgba(229,246,255,.62),
    0 0 19px rgba(181,223,255,.36);
}

/* Translation-length safeguards without changing the approved composition. */
body[data-lang="ro"] .commission-submit,
body[data-lang="it"] .commission-submit{
  min-width:225px;
}

body[data-lang="ro"] .commission-submit span,
body[data-lang="it"] .commission-submit span{
  max-width:175px;
}

@media (min-width:901px) and (max-height:860px){
  body[data-lang="ro"] .practice-frame-secondary .practice-v833-copy p,
  body[data-lang="it"] .practice-frame-secondary .practice-v833-copy p{
    font-size:clamp(18px,1.18vw,23px) !important;
    line-height:1.25 !important;
  }
}

@media(max-width:620px){
  .language-switch{gap:4px;}
  .lang-option{font-size:7px;}
}

/* =========================================================
   v8.70 — Mobile legibility and layout corrections
   Full-bleed panels, opaque glass, no bleed-through,
   no drop cap, scrollable Commission.
   ========================================================= */
@media (max-width:640px){

  /* Panels fill the screen: no wasted right gutter, no
     homepage text showing through the glass. */
  .panel{
    inset:0;
    border-radius:0;
    border:0;
    /* Glass, as on desktop, with a heavier blur. The homepage
       text behind it is faded out instead of covered up. */
    background:linear-gradient(180deg,rgba(96,112,125,.40),rgba(63,80,92,.34)),rgba(22,31,38,.14);
    backdrop-filter:blur(34px) saturate(1.06);
    box-shadow:none;
  }

  /* The centred symbol collided with the page title.
     Title + close is enough at this width. */
  .panel-logo{display:none}

  .panel-head,
  .commission-panel .panel-head{
    height:72px;
    padding:0 84px 0 22px;   /* clears the floating menu button */
  }
  .panel-head span{font-size:9.5px}

  /* Drop cap floated away from its paragraph. */
  .practice-v833-copy p:first-child::first-letter{
    float:none;
    margin:0;
    font-family:inherit;
    font-size:inherit;
    line-height:inherit;
    color:inherit;
  }

  /* Free vertical scrolling; snap belongs to desktop. */
  .practice-scroll{
    inset:72px 0 0;
    scroll-snap-type:none;
  }
  .practice-frame{
    min-height:auto;
    height:auto;
  }

  /* Commission was clipped: its form sat below the fold
     with no way to reach it. */
  .commission-v3{
    position:absolute;
    inset:72px 0 0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    display:block;
    padding:26px 22px 40px;
  }
  .commission-v3-top{display:block}
  .commission-v3-categories{margin-top:26px}
  .commission-v3-bottom{margin-top:30px}

  .hero-footer .practice{display:none}

  /* The topbar sat above the open panel and swallowed the
     clicks meant for its close button. Only the menu button
     stays interactive while a page is open. */
  body.panel-open .topbar,
  body.panel-open .topbar .topbar-controls,
  body.panel-open .topbar .language-switch,
  body.panel-open .topbar .brand{pointer-events:none}
  body.panel-open .topbar .index-trigger{pointer-events:auto}

  .panel-head .simple-x{
    position:relative;
    z-index:60;
    font-size:26px;
    line-height:1;
  }
}

/* =========================================================
   v8.72 — Mobile menu as a top sheet
   Full width, 60% of the screen height, sliding down from
   the top. The bottom 40% stays exposed and closes it.
   ========================================================= */
@media (max-width:640px){

  .index-drawer{
    right:0;
    left:0;
    top:0;
    /* Same glass as desktop, a touch denser with a heavier
       blur so the homepage behind it stays unreadable. */
    background:linear-gradient(180deg,rgba(108,124,138,.44),rgba(95,111,124,.37));
    backdrop-filter:blur(34px) saturate(1.06);
    width:auto;
    min-width:0;
    max-width:none;
    height:60vh;
    height:60dvh;
    border-left:0;
    border-bottom:1px solid rgba(255,255,255,.26);
    border-radius:0 0 26px 26px;
    box-shadow:0 26px 70px rgba(6,16,22,.28);
    transform:translateY(-101%);
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .index-drawer.open{transform:none}

  /* The menu button floats above the sheet so it still toggles. */
  .topbar{z-index:60}

  .drawer-head{
    height:72px;
    padding:0 84px 0 22px;   /* clears the floating menu button */
    flex:0 0 auto;
  }
  .drawer-head .simple-x{display:none}   /* the button above does this */

  /* The homepage logo sat on top of the sheet's own title. */
  body.drawer-open .brand{opacity:0;pointer-events:none}

  /* Keep the glass: instead of making the sheet opaque, the
     headline behind it fades, so only the photograph shows
     through. */
  .hero-copy,.hero-actions,.hero-footer{transition:opacity .42s var(--ease)}
  body.drawer-open .hero-copy{opacity:0}

  /* Same for an open page: the panel fills the screen, so
     everything behind it would otherwise read through. */
  body.panel-open .hero-copy,
  body.panel-open .hero-actions,
  body.panel-open .hero-footer{opacity:0;pointer-events:none}

  .drawer-nav{
    padding:14px 22px 0;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .drawer-nav button{padding:13px 0}
  .drawer-nav strong{font-size:22px}

  .drawer-footer{
    position:static;      /* was absolute; it sat on top of the menu items */
    left:auto;right:auto;bottom:auto;
    flex:0 0 auto;
    padding:0 22px 20px;
  }
  .drawer-footer p{font-size:15px}
}

/* =========================================================
   v8.73 — Commission invitation title
   Set in the same face as the form labels (NAME / SURNAME),
   at the display size it had before.
   ========================================================= */
.commission-v3-message .commission-invitation-title,
.commission-invitation-title{
  font-family:"DM Sans",Arial,sans-serif !important;
  font-weight:300 !important;
  letter-spacing:.12em !important;
  line-height:1.06 !important;
  text-transform:uppercase;
  color:rgba(255,255,255,.88) !important;
  font-size:clamp(19.2px,1.72vw,28.8px) !important;   /* -20% */
}

@media (min-width:901px){
  .commission-v3-message .commission-invitation-title{
    font-size:clamp(28.8px,2.58vw,43.2px) !important; /* -20% */
  }
}

@media (min-width:901px) and (max-height:860px){
  .commission-v3-message .commission-invitation-title{
    font-size:clamp(25.6px,2.28vw,36.8px) !important; /* -20% */
  }
}

/* =========================================================
   v8.77 — Commission on tall screens
   The upper block sat pinned to the top of its row, leaving
   a large empty band above the form. It is centred in the
   space it is given instead.
   ========================================================= */
@media (min-width:901px){
  .commission-v3-top{
    align-self:center;
    align-content:center;
  }
}


/* =========================================================
   v8.78 — Commission bottom band
   The form is raised by a translate; the heading beside it
   was not, so the two were off by that amount. It now moves
   with the form and stays centred on its height.
   ========================================================= */
@media (min-width:901px){
  .commission-v3-message{
    align-self:center;
    transform:translateY(-30px);
  }
}

@media (min-width:901px) and (max-height:860px){
  .commission-v3-message{
    transform:translateY(-24px);
  }
}

/* =========================================================
   v8.79 — Language switch, 20% larger
   ========================================================= */
.language-switch{
  font-size:9.6px;   /* was 8px */
}

@media(max-width:620px){
  .lang-option{font-size:8.4px;}   /* was 7px */
}

/* =========================================================
   v8.80 — Formular: acord GDPR, mesaj de stare, capcană
   ========================================================= */
.commission-trap{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important; height:1px !important;
  opacity:0 !important; pointer-events:none !important;
}

.commission-consent{
  grid-area:consent;
  align-self:end;
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:10px;
  cursor:pointer;
  font-size:9.5px;
  line-height:1.45;
  letter-spacing:.05em;
  color:rgba(255,255,255,.5);
  transition:color .25s ease;
}
.commission-consent:hover{color:rgba(255,255,255,.72)}
.commission-consent input{
  appearance:none;
  flex:0 0 auto;
  width:13px; height:13px;
  margin:1px 0 0;
  border:1px solid rgba(255,255,255,.35);
  border-radius:3px;
  background:transparent;
  cursor:pointer;
  transition:.22s var(--ease);
}
.commission-consent input:hover{border-color:rgba(255,255,255,.6)}
.commission-consent input:checked{
  border-color:rgba(214,235,255,.75);
  box-shadow:inset 0 0 0 3px rgba(214,235,255,.75);
}

.commission-status{
  grid-column:1 / -1;
  margin:10px 0 0;
  min-height:14px;
  font-size:10.5px;
  letter-spacing:.08em;
  line-height:1.5;
  color:rgba(255,255,255,.6);
}
.commission-status[data-tone="ok"]{color:rgba(214,235,255,.92)}
.commission-status[data-tone="err"]{color:rgba(255,196,186,.9)}

/* Butonul devine mai discret cât timp mesajul pleacă. */
.commission-submit:disabled{opacity:.5; cursor:default}

@media (max-width:640px){
  .commission-consent{font-size:11px; margin-top:14px}
  .commission-status{font-size:12px}
}


/* =========================================================
   v8.81 — SELECTED WORK / „pagină în lucru"
   ========================================================= */
.work-wip{
  position:absolute;left:50%;z-index:3;margin:0;
  transform:translateX(-50%);
  max-width:calc(100% - 32px);box-sizing:border-box;
  text-align:center;pointer-events:none;white-space:nowrap;
  font-family:'DM Sans',sans-serif;font-weight:500;
  font-size:11px;letter-spacing:.22em;line-height:1;
  color:#fff;background:#d42020;
  padding:9px 18px 8px;border-radius:999px;
  box-shadow:0 6px 18px rgba(120,0,0,.28);
}
.work-wip-top{top:100px}
.work-wip-bottom{bottom:12px}
.work-panel .video-gallery-shell{top:126px !important;bottom:40px !important}
@media(max-width:640px){
  .work-wip{font-size:9px;letter-spacing:.14em;padding:8px 12px 7px;white-space:normal}
  .work-wip-top{top:92px}
  .work-panel .video-gallery-shell{top:118px !important}
}