/* Our philosophy landing (2026-11-05, owner: antiqua back, smaller; air; smooth motion; hair through the whole page).
   First screen black with the coloured hair; it runs on into the white second block as a pale underlay and slips away to the right (.ph-river). */
@font-face{font-family:"Cormorant Ph";src:url(../fonts/cormorant/normal-cyr.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant Ph";src:url(../fonts/cormorant/normal-lat.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Ph";src:url(../fonts/cormorant/italic-cyr.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant Ph";src:url(../fonts/cormorant/italic-lat.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.page__w{overflow:clip}
.ph{--ink:#141210;--soft:rgba(20,18,16,.78);--line:rgba(20,18,16,.16);--serif:"Cormorant Ph","Cormorant Garamond",Georgia,"Times New Roman",serif;--ease:cubic-bezier(.16,1,.3,1);position:relative;color:var(--ink);background:#fff}
.ph *{box-sizing:border-box}
.ph ul,.ph ol{margin:0;padding:0;list-style:none}
.ph img{display:block;max-width:100%}
.ph p{margin:0}
.ph figure{margin:0}
.ph h1,.ph h2,.ph h3,.ph blockquote,.ph-close__t{margin:0;padding:0;border:0;font-family:var(--serif);font-weight:300;text-transform:none;text-align:left;letter-spacing:-.005em;color:inherit;max-width:none;text-wrap:balance;quotes:none}
.ph h2{font-size:clamp(30px,3.2vw,48px);line-height:1.14}
.ph h3{font-size:clamp(24px,2.2vw,32px);line-height:1.2;font-weight:400}
.ph-t{font-size:15px;line-height:1.7;letter-spacing:.02em;color:var(--soft);text-wrap:pretty}
.ph .ph-more{display:inline-block;margin-top:24px}
.ph-s{position:relative;z-index:1;padding:clamp(88px,13vw,200px) 0 0}

/* first screen: the black one, the hair as it was */
.ph-hero{position:relative;min-height:100vh;min-height:100svh;background:#000;color:#f4efe6;display:flex;flex-direction:column;overflow:hidden}
.ph-hair{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(96deg,transparent 30%,#000 62%);mask-image:linear-gradient(96deg,transparent 30%,#000 62%)}
.ph-hero__in{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;padding-top:150px;padding-bottom:60px}
.ph .ph-hero h1{font-size:clamp(40px,4.7vw,72px);line-height:1.06;max-width:11.5em}
.ph .ph-hero__lead{max-width:470px;margin-top:clamp(22px,2.2vw,34px);font-size:16px;line-height:1.65;letter-spacing:.02em;color:rgba(244,239,230,.74);text-wrap:pretty}
.ph-cue{position:relative;z-index:1;width:100%;padding-bottom:34px;display:flex;align-items:center;gap:14px;font-family:var(--serif);font-style:italic;font-size:17px;color:rgba(244,239,230,.6)}
.ph-cue i{display:block;width:64px;height:1px;background:rgba(244,239,230,.28);position:relative;overflow:hidden}
.ph-cue i:after{content:"";position:absolute;inset:0;background:#f4efe6;transform:translateX(-100%);animation:ph-cue 3.2s var(--ease) infinite}
@keyframes ph-cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media (max-width:767px){
  .ph-hair{-webkit-mask-image:linear-gradient(180deg,#000 34%,rgba(0,0,0,.2) 62%);mask-image:linear-gradient(180deg,#000 34%,rgba(0,0,0,.2) 62%)}
  .ph-hero__in{justify-content:flex-end;padding-top:110px;padding-bottom:36px}
  .ph .ph-hero__lead{font-size:15px}
  .ph-cue{padding-bottom:24px}
}

/* below the first screen: white, with the hair as an underlay */
.ph-body{position:relative;background:#fff;padding-bottom:clamp(96px,13vw,200px)}
/* the hair lives only in the second block and slips away to the right there */
.ph-river{position:absolute;inset:0;width:100%;height:100%;opacity:.34;pointer-events:none}
.ph-mani>.container{position:relative;z-index:1}

/* the second block: words light up as it scrolls */
.ph-mani__t{margin-top:clamp(32px,4vw,64px);max-width:min(100%,920px);font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.2vw,32px);line-height:1.38;color:var(--ink)}
.ph-mani__t p+p{margin-top:1em}
.ph-js [data-words] .w{opacity:.16;transition:opacity .7s ease}
.ph-js [data-words] .w.on{opacity:1}

/* principles: the text on the left, one picture held on the right */
.ph-pr__grid{margin-top:clamp(40px,5vw,80px)}
.ph .ph-pr__fig{margin-bottom:28px;aspect-ratio:4/5;overflow:hidden}
.ph-pr__fig img{width:100%;height:100%;object-fit:cover}
.ph-pr__fig.is-contain{aspect-ratio:1/1}
.ph-pr__fig.is-contain img{object-fit:contain}
.ph-pr__frame{display:none}
.ph-pr__i{padding-bottom:72px}
.ph-pr__i:last-child{padding-bottom:0}
.ph-n{display:block;margin-bottom:14px;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--soft)}
.ph-pr__i h3{margin-bottom:16px}
@media (min-width:1024px){
  .ph-pr__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(60px,8vw,130px);align-items:start}
  .ph-pr__frame{display:block;position:sticky;top:130px;height:min(calc(100vh - 190px),720px);overflow:hidden}
  .ph-pr__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1.3s ease,transform 2.4s var(--ease)}
  .ph-pr__frame img.is-contain{object-fit:contain}
  .ph-pr__frame img.on{opacity:1;transform:none}
  .ph-js .ph-pr__fig{display:none}
  .ph-pr__i{min-height:min(74vh,640px);display:flex;flex-direction:column;justify-content:center;padding:0}
}

/* the quote */
.ph .ph-quote blockquote{font-style:italic;font-size:clamp(32px,3.9vw,58px);line-height:1.12;max-width:15em}
.ph .ph-quote__love{max-width:min(100%,920px);margin-top:clamp(32px,4vw,64px);font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.2vw,32px);line-height:1.38;color:var(--ink)}

/* rows with a line that draws itself */
.ph .ph-rows{margin-top:clamp(36px,4.4vw,70px)}
.ph-row{position:relative}
.ph-row:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line);transform-origin:0 50%;transition:transform 1.8s var(--ease) var(--d,0s)}
.ph-js .ph-row:not(.in):before{transform:scaleX(0)}
.ph-rows a{display:grid;grid-template-columns:minmax(0,1fr) 14px;gap:10px 16px;align-items:center;padding:26px 0;color:var(--ink);text-decoration:none}
.ph-rows h3{transition:transform .9s var(--ease)}
.ph-rows .ph-t{grid-column:1/-1;grid-row:2}
.ph-rows svg{width:14px;height:13px;stroke:var(--ink);transition:transform .9s var(--ease)}
.ph-rows a:hover h3{transform:translateX(12px)}
.ph-rows a:hover svg{transform:translateX(6px)}
@media (min-width:1024px){
  .ph-rows a{grid-template-columns:minmax(0,5fr) minmax(0,6fr) 14px;gap:clamp(60px,8vw,130px);padding:36px 0}
  .ph-rows .ph-t{grid-column:auto;grid-row:auto}
}

/* figures */
.ph .ph-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px;margin-top:clamp(36px,4.4vw,70px)}
.ph-st__v{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(44px,5vw,76px);line-height:1;letter-spacing:-.01em;margin-bottom:12px;font-variant-numeric:lining-nums}
.ph-nums .ph-t{display:block;font-size:14px;line-height:1.5}
@media (min-width:1024px){.ph .ph-nums{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}}

/* founder and years */
.ph-path__g{display:grid;gap:64px}
.ph-path__f figure{width:100%;max-width:338px;overflow:hidden;margin-bottom:26px}
.ph-path__f img{width:100%;height:auto}
.ph-path__f h3{margin-bottom:12px}
.ph-path__f ul{margin-top:18px}
.ph-path__f li{padding:10px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5}
.ph-path__t ol{margin-top:clamp(32px,3.6vw,54px)}
.ph-path__t li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:baseline;padding:22px 0}
.ph-path__y{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.2;font-variant-numeric:lining-nums}
@media (min-width:1024px){
  .ph-path__g{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(60px,8vw,130px);align-items:start}
  .ph-path__t li{grid-template-columns:110px minmax(0,1fr);padding:26px 0}
  .ph-path__y{font-size:28px}
}

/* closing word and the request */
.ph .ph-close__t{font-size:clamp(25px,2.6vw,38px);line-height:1.26;font-style:italic;max-width:24em}
.ph-cta{text-align:center}
.ph .ph-cta h2{text-align:center;font-size:clamp(34px,3.9vw,58px)}
.ph-cta .ph-t{max-width:480px;margin:20px auto 0}
.ph-cta__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 36px;margin-top:36px}
.ph-tel{font-family:var(--serif);font-size:24px;color:var(--ink);white-space:nowrap;font-variant-numeric:lining-nums;transition:opacity .5s}
.ph-tel:hover{opacity:.55;color:var(--ink)}
.ph .ph-addr{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;line-height:1.5;letter-spacing:.02em;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;transition:text-decoration-color .5s}
.ph .ph-addr:hover{color:var(--ink);text-decoration-color:var(--ink)}
.ph-addr svg{width:12px;height:16px;stroke:var(--ink);stroke-width:1.1}

/* motion, only when the script runs */
.ph-js .ph-r{opacity:0;transform:translateY(22px);transition:opacity 1.5s ease var(--d,0s),transform 1.7s var(--ease) var(--d,0s)}
.ph-js .ph-r.in{opacity:1;transform:none}
.ph-js .ph-row.ph-r{transform:none}
.ph .m{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .16em 0;margin:0 -.08em -.16em 0}
.ph .mi{display:inline-block;transform:translateY(112%);transition:transform 1.5s var(--ease) calc(var(--i)*65ms)}
.ph .in .mi,.ph .mi.in{transform:none}
.ph-js .ph-clip{clip-path:inset(10% 0 10% 0)}
.ph-js .ph-clip img{transform:scale(1.08)}
.ph-clip{transition:clip-path 1.9s var(--ease)}
.ph-clip img{transition:transform 2.4s var(--ease)}
.ph-js .ph-clip.in{clip-path:inset(0)}
.ph-js .ph-clip.in img{transform:none}
@media (prefers-reduced-motion:reduce){
  .ph-js .ph-r,.ph .mi,.ph-js .ph-clip,.ph-js .ph-clip img,.ph-pr__frame img,.ph-row:before{opacity:1;transform:none!important;clip-path:none;transition:none}
  .ph-cue i:after{animation:none}
}

/* the four directions: the black block, as in the first version */
.ph .ph-s.ph-dir{margin-top:clamp(88px,13vw,200px);padding:clamp(88px,11vw,170px) 0;background:#000;color:#f4efe6}
.ph .ph-dir .ph-t{color:rgba(244,239,230,.7)}
.ph .ph-dir .ph-row:before{background:rgba(244,239,230,.22)}
.ph .ph-dir .ph-rows a,.ph .ph-dir .ph-rows a:hover{color:#f4efe6}
.ph .ph-dir .ph-rows svg{stroke:#f4efe6}
/* the rows read as links: a line under the name and a larger arrow at rest, both come alive under the pointer */
.ph-dir .ph-rows a{cursor:pointer}
.ph .ph-dir .ph-rows h3{justify-self:start;padding-bottom:4px;border-bottom:1px solid rgba(244,239,230,.32);transition:transform .9s var(--ease),border-color .6s}
.ph .ph-dir .ph-rows a:hover h3{border-color:#f4efe6}
.ph .ph-dir .ph-rows .ph-t{transition:color .6s}
.ph .ph-dir .ph-rows a:hover .ph-t{color:#f4efe6}
.ph .ph-dir .ph-rows svg{width:20px;height:18px;stroke-width:1.1}
.ph-dir .ph-rows a{grid-template-columns:minmax(0,1fr) 20px}
@media (min-width:1024px){.ph-dir .ph-rows a{grid-template-columns:minmax(0,5fr) minmax(0,6fr) 20px}}

/* the first screen fits under the header, so the scroll line stays in view */
.ph-hero{min-height:calc(100vh - 90px);min-height:calc(100svh - 90px)}
@media (max-width:1199px){.ph-hero{min-height:calc(100vh - 60px);min-height:calc(100svh - 60px)}}
@media (max-width:767px){.ph-hero{min-height:calc(100vh - 49px);min-height:calc(100svh - 49px)}}
@media (min-width:1920px){.ph-hero{min-height:calc(100vh - 112px);min-height:calc(100svh - 112px)}}