/* Sissian & Associates — restrained black register */

@font-face{font-family:"Libertine";src:url(fonts/LinLibertine_R.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libertine";src:url(fonts/LinLibertine_RI.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Lato";src:url(fonts/Lato-Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url(fonts/Lato-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --ink:#050505;
  --ink-2:#0b0c0f;
  --ivory:#ece8de;
  --grey:#a9a9a9;
  --dim:#6f6f6f;
  --brass:#bea264;
  --line:rgba(236,232,222,.08);

  --serif:"Libertine",Georgia,serif;
  --sans:"Lato","Helvetica Neue",Arial,sans-serif;

  /* type ramp — 7 tokens */
  --t-label:clamp(11px,.75vw,13px);
  --t-body:clamp(16px,1.15vw,18px);
  --t-lede:clamp(20px,1.6vw,25px);
  --t-h3:clamp(26px,2.2vw,34px);
  --t-h2:clamp(34px,3.6vw,56px);
  --t-hero:clamp(40px,5.2vw,84px);
  --t-ghost:clamp(120px,22vw,320px);

  --track-wide:.32em;
  --track-tight:-.01em;
  --lh-tight:1.05;
  --lh-head:1.15;
  --lh-lead:1.4;
  --lh-body:1.65;

  --gutter:clamp(20px,5vw,96px);
  --measure:34rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--ivory);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{font-family:var(--sans);font-weight:300;font-size:var(--t-body);line-height:var(--lh-body);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:italic}

.page{opacity:0;animation:page-in 2s ease-in-out forwards}
@keyframes page-in{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.page{animation:none;opacity:1}}

/* hairline grid */
/* ---------- fixed cube stage (rotates with scroll; content passes over it) ---------- */
.cube-stage{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .2s linear}
.cube-stage canvas{position:absolute;top:50%;left:75.5%;width:min(80vh,44vw);height:min(80vh,44vw);transform:translate(-50%,-50%);display:block}
.hero,.statement,.thousand,.method,.principal,.practice,.voices,.close{position:relative;z-index:2}
/* copy keeps to the left of the stage on wide screens, as the cube keeps to the right */
@media (min-width:1024px){
  .method__grid,.voices__lead,.voices__grid,.voices__head,.practice__head,.statement,.method__head{max-width:min(50vw,820px)}
  .method__grid{gap:36px}
  .voices__grid{gap:0 48px}
}
.hero{background:var(--ink)}
@media (max-width:900px){.cube-stage canvas{left:50%;top:58%;width:min(88vw,58vh);height:min(88vw,58vh);opacity:.4}}
.grid-lines{position:fixed;inset:0;pointer-events:none;z-index:1;display:grid;grid-template-columns:repeat(4,1fr)}
.grid-lines span{border-left:1px solid var(--line);grid-column:span 1}
.grid-lines span:first-child{grid-column-start:2}
@media (max-width:767px){.grid-lines{display:none}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gutter);transition:background .5s,border-color .5s;border-bottom:1px solid transparent}
.nav.is-scrolled{background:rgba(5,5,5,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav__brand{font-family:var(--sans);font-weight:400;font-size:var(--t-label);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--brass)}
.nav__brand em{font-style:normal;color:var(--dim)}
.nav__links{display:flex;gap:36px}
.nav__links a{font-size:var(--t-label);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--grey);font-weight:400;transition:color .3s}
.nav__links a:hover{color:var(--ivory)}
@media (max-width:767px){.nav{padding:18px var(--gutter)}.nav__brand{white-space:nowrap;letter-spacing:.22em}.nav__links{gap:18px}.nav__links a:not(:last-child){display:none}}

/* shared type roles */
.eyebrow{font-family:var(--sans);font-weight:400;font-size:var(--t-label);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--brass)}
.eyebrow--rule{display:flex;align-items:center;gap:14px}
.eyebrow--rule::before{content:"";width:36px;height:1px;background:var(--brass)}
.h2{font-family:var(--serif);font-weight:400;font-size:var(--t-h2);line-height:var(--lh-head);letter-spacing:var(--track-tight);margin-top:22px}
.h3{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);line-height:var(--lh-head);letter-spacing:var(--track-tight)}
.balance{text-wrap:balance}
.rule{width:56px;height:1px;background:var(--brass);margin:34px 0 26px}
.line{display:block}
.line--it{font-style:italic}
.w{display:inline-block}
.link{display:inline-block;margin-top:30px;font-size:var(--t-label);letter-spacing:var(--track-wide);text-transform:uppercase;font-weight:400;color:var(--ivory);border-bottom:1px solid var(--brass);padding-bottom:8px;transition:color .3s,border-color .3s}
.link:hover{color:var(--brass)}
.btn{display:inline-block;margin-top:40px;padding:18px 36px;border:1px solid var(--brass);font-size:var(--t-label);letter-spacing:var(--track-wide);text-transform:uppercase;font-weight:400;color:var(--ivory);transition:background .35s,color .35s}
.btn:hover{background:var(--brass);color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;height:280vh}
.hero__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.hero__media{position:absolute;inset:-2%;will-change:transform}
.hero__img{position:absolute;inset:0}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.hero__img--fx{opacity:0}
.hero__streaks{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:0}
.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,0) 34%,rgba(5,5,5,.62) 56%,rgba(5,5,5,.9) 100%),linear-gradient(180deg,rgba(5,5,5,.6) 0%,rgba(5,5,5,0) 24%,rgba(5,5,5,0) 78%,rgba(5,5,5,.5) 100%)}
.hero__copy{position:absolute;left:53%;top:50%;transform:translateY(-50%);width:min(42vw,620px);z-index:2}
.hero__title{font-family:var(--serif);font-weight:400;font-size:var(--t-hero);line-height:var(--lh-tight);letter-spacing:var(--track-tight);margin-top:28px}
.hero__lede{color:var(--grey);max-width:var(--measure)}
.hero__lede-kicker{color:var(--brass)}
.hero__foot{margin-top:26px;font-family:var(--sans);font-weight:400;color:var(--ivory);opacity:.9;font-size:calc(var(--t-label) * 1.18);letter-spacing:.14em;text-transform:uppercase}
.hero__foot span{display:inline-block}
.hero__cue{position:absolute;left:var(--gutter);bottom:36px;display:flex;align-items:center;gap:14px;font-size:var(--t-label);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--dim);z-index:2}
.hero__cue-line{display:block;width:48px;height:1px;background:var(--dim);transform-origin:left;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{transform:scaleX(0);opacity:0}30%{opacity:1}100%{transform:scaleX(1);opacity:0}}
@media (max-width:767px){
  .hero{height:220vh}
  .hero__img img{object-position:50% 0%}
  .hero__shade{background:linear-gradient(180deg,rgba(5,5,5,.6) 0%,rgba(5,5,5,0) 18%,rgba(5,5,5,.25) 36%,rgba(5,5,5,.78) 55%,rgba(5,5,5,.97) 100%)}
  .hero__copy{left:var(--gutter);right:var(--gutter);top:auto;bottom:88px;transform:none;width:auto}
  .hero__cue{display:none}
}

/* ---------- statement ---------- */
.statement{padding:28vh var(--gutter);max-width:1100px}
.statement__text{font-family:var(--serif);font-size:var(--t-h3);line-height:var(--lh-lead);letter-spacing:var(--track-tight);margin-top:40px;max-width:30em;text-wrap:pretty}
.statement__text .w{opacity:.18}

/* ---------- thousand ---------- */
.thousand{position:relative}
.thousand__pin{padding:22vh var(--gutter);border-top:1px solid var(--line)}
.thousand__inner{width:100%;display:grid;grid-template-columns:repeat(12,1fr);gap:0 32px}
.thousand__copy{grid-column:1/7}
.thousand__title{color:var(--ivory);max-width:14em;text-wrap:balance}
.thousand__lead{font-family:var(--serif);font-size:var(--t-lede);line-height:var(--lh-lead);color:var(--grey);margin:34px 0 26px;max-width:var(--measure);text-wrap:pretty}
.thousand__lead em{font-style:italic;color:var(--brass)}
.thousand__tail{max-width:var(--measure);color:var(--grey)}
@media (max-width:767px){
  .thousand__pin{padding:12vh var(--gutter)}
  .thousand__inner{grid-template-columns:1fr}
  .thousand__copy{grid-column:1}
  .thousand__lead br{display:none}
}
/* ---------- method ---------- */
.method{padding:22vh var(--gutter)}
.method__head{max-width:900px}
.method__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:88px;border-top:1px solid var(--line);padding-top:48px}
.method__n{display:block;font-family:var(--serif);font-size:var(--t-lede);color:var(--brass);margin-bottom:26px}
.method__col p{color:var(--grey);margin-top:18px}
@media (max-width:767px){.method__grid{grid-template-columns:1fr;gap:40px;margin-top:56px}}

/* ---------- principal ---------- */
.principal{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:0 32px;padding:20vh var(--gutter);border-top:1px solid var(--line)}
.principal__panel{grid-column:1/7}
.principal__name{font-family:var(--serif);font-weight:400;font-size:var(--t-h2);line-height:var(--lh-head);letter-spacing:var(--track-tight);margin:26px 0 30px}
.principal__panel p+p{margin-top:16px}
.principal__panel p:not(.eyebrow){color:var(--grey);max-width:var(--measure)}
@media (max-width:767px){
  .principal{grid-template-columns:1fr;gap:40px;padding:12vh var(--gutter)}
  .principal__panel{grid-column:1}
}
/* ---------- practice ---------- */
.practice{padding:14vh 0 8vh;border-top:1px solid var(--line)}
.practice__head{padding:0 var(--gutter);max-width:980px;margin-bottom:12vh}
.service{display:grid;grid-template-columns:repeat(12,1fr);gap:0 32px;padding:10vh var(--gutter);border-top:1px solid var(--line)}
.service__text{grid-column:1/7}
.service__n{display:block;font-family:var(--serif);font-size:var(--t-lede);color:var(--brass);margin-bottom:22px}
.service__lede{font-family:var(--serif);font-style:italic;font-size:var(--t-lede);line-height:var(--lh-lead);color:var(--ivory);margin:20px 0 20px}
.service__text>p:not(.service__lede){color:var(--grey);max-width:var(--measure)}
@media (max-width:1023px){
  .service{grid-template-columns:1fr;gap:40px}
  .service__text,.service:nth-child(even) .service__text{grid-column:1}
}

.hero__kicker{color:var(--ivory)}
.statement__h2{margin-bottom:40px}
.statement__text+.statement__text{margin-top:30px}
.hero__eyebrow{color:var(--ivory);opacity:.9}
.hero__eyebrow span{display:inline-block}
.hero__title--long{font-size:clamp(34px,4.1vw,66px)}
.proposition{padding:18vh var(--gutter) 0;max-width:1100px}
.proposition__text{font-family:var(--serif);font-size:var(--t-h3);line-height:var(--lh-head);color:var(--grey);letter-spacing:-.005em;text-wrap:pretty}
.proposition__kicker{color:var(--brass)}
/* ---------- criteria ---------- */
.criteria{padding:20vh var(--gutter) 18vh;border-top:1px solid var(--line);position:relative;z-index:2;background:var(--ink)}
.criteria__inner{max-width:760px}
.criteria__text{margin-top:36px;font-family:var(--serif);color:var(--grey);font-size:var(--t-lede);line-height:var(--lh-lead);max-width:var(--measure);text-wrap:pretty}
.criteria .btn{margin-top:48px}
/* ---------- voices ---------- */
.voices{padding:16vh var(--gutter) 14vh;border-top:1px solid var(--line)}
.voices__head{max-width:720px}
.voices__lead{margin:10vh 0 9vh;max-width:980px}
.voices__lead blockquote{font-family:var(--serif);font-size:var(--t-h3);line-height:var(--lh-head);color:var(--ivory);letter-spacing:-.005em}
.voices figcaption{margin-top:22px;font-family:var(--sans);font-size:var(--t-label);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ivory)}
.voices figcaption span{color:var(--dim);margin-left:14px}
.voices figcaption span::before{content:"";display:inline-block;width:18px;height:1px;background:var(--dim);vertical-align:middle;margin-right:14px}
.voices__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px;border-top:1px solid var(--line)}
.voices__item{padding:48px 0 44px;border-bottom:1px solid var(--line)}
.voices__item blockquote{font-family:var(--serif);font-size:var(--t-lede);line-height:var(--lh-lead);color:var(--grey)}
@media (max-width:767px){
  .voices{padding:12vh var(--gutter)}
  .voices__lead{margin:8vh 0 6vh}
  .voices__grid{grid-template-columns:1fr;gap:0}
  .voices__item{padding:36px 0 32px}
}
/* ---------- close ---------- */
.close{height:240vh;position:relative}
.close__pin{position:sticky;top:0;height:100vh;overflow:hidden}
.close__copy{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);width:min(42vw,620px);z-index:2}
.close__title{font-family:var(--serif);font-weight:400;font-size:var(--t-hero);line-height:var(--lh-tight);letter-spacing:var(--track-tight)}
.close__lede{color:var(--grey);margin-top:34px;max-width:var(--measure)}
.close__lede+.close__lede{margin-top:18px}
.close__slogan{margin-top:30px;font-family:var(--serif);font-style:italic;font-size:var(--t-lede);color:var(--brass)}
@media (max-width:767px){
  .close{height:180vh}
  .close__copy{left:var(--gutter);right:var(--gutter);top:auto;bottom:80px;transform:none;width:auto}
}

/* ---------- contact (still) ---------- */
.contact{padding:24vh var(--gutter) 0;border-top:1px solid var(--line);position:relative;z-index:2;background:var(--ink)}
.contact__inner{max-width:760px}
.contact__inner>.contact__details:first-child{margin-top:0}
.contact__text{color:var(--dim);margin-top:72px;max-width:var(--measure);font-size:var(--t-label);letter-spacing:.04em;line-height:1.8}
.contact__text a{color:var(--grey);text-decoration:none;border-bottom:1px solid var(--line);transition:color .3s}
.contact__text a:hover{color:var(--ivory)}
.contact__mail{display:inline-block;margin-top:40px;font-family:var(--serif);font-size:var(--t-h2);line-height:1.1;letter-spacing:-.01em;color:var(--ivory);text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:10px;transition:color .3s}
.contact__mail:hover{color:var(--brass)}
.contact__details{display:grid;grid-template-columns:repeat(3,max-content);gap:40px 96px;margin-top:64px;width:max-content;max-width:calc(100vw - 2*var(--gutter))}
.contact__details dt{font-family:var(--sans);font-size:var(--t-label);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.contact__details dd{margin:0;font-family:var(--serif);font-size:var(--t-lede);line-height:var(--lh-lead);color:var(--grey);white-space:nowrap}
.contact__details a{color:var(--grey);text-decoration:none;transition:color .3s}
.contact__details a:hover{color:var(--ivory)}
@media (max-width:900px){.contact__details{grid-template-columns:1fr;gap:32px;width:auto}.contact__details dd{white-space:normal}.contact__mail{font-size:clamp(22px,6.2vw,34px);word-break:break-all}}

.footer{display:flex;flex-wrap:wrap;gap:12px 48px;justify-content:space-between;margin-top:22vh;padding:34px 0 40px;border-top:1px solid var(--line);font-size:var(--t-label);letter-spacing:.06em;color:var(--dim);font-weight:400}
@media (max-width:767px){.footer{flex-direction:column}}

@media (prefers-reduced-motion:reduce){
  .hero,.close{height:auto}
  .hero__stage,.close__pin{position:relative;height:auto;min-height:100vh}
  .hero__img--fx{opacity:1}
  .statement__text .w{opacity:1}
  .hero__cue-line{animation:none}
}