:root{--wide:1600px;--max:1260px}
html{scroll-behavior:smooth} body{margin:0;font-family:'Lexend Deca','Helvetica Neue',Arial,sans-serif;color:var(--ink);background:#fff;font-weight:300}
img{display:block;width:100%;height:100%;object-fit:cover}
h1,h2,h3,p{margin:0} p{color:var(--ink-2);line-height:1.75}
.wide{max-width:var(--wide);margin:auto;padding:0 42px}
.nav{display:flex;gap:28px;font-size:13px;color:rgba(255,255,255,.86)}
.hero{height:96vh;min-height:690px;position:relative;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#07111a}
/* hero reveal: the same blur-up and slow settle the model pages use */
.hero-bg{position:absolute;inset:0;background:url('../../../../../uploads/hero-about.jpg') center/cover no-repeat;transform:scale(1.15);filter:blur(20px);will-change:filter,transform;animation:kb 30s ease-out forwards,unblur 4.2s var(--ease) .1s forwards}
@keyframes kb{to{transform:scale(1)}}
@keyframes unblur{from{filter:blur(20px)}to{filter:blur(0)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,9,14,.30) 0%,rgba(3,9,14,.12) 38%,rgba(3,9,14,.62) 100%)}
.hero-copy{position:relative;z-index:2;width:100%;max-width:var(--wide);margin:auto;padding:0 42px 82px;text-align:center}
.hero .ey{color:rgba(255,255,255,.72);margin-bottom:20px}
.hero h1{font-size:clamp(40px,6vw,92px);font-weight:200;line-height:.98;letter-spacing:-.048em}
@media(prefers-reduced-motion:reduce){.hero-bg{animation:none;transform:scale(1.02);filter:none}.reveal{opacity:1;transform:none;transition:none}}
.hero .sub{font-size:clamp(20px,2.1vw,27px);font-weight:250;line-height:1.35;letter-spacing:-.02em;color:rgba(255,255,255,.86);margin:22px auto 0}
.manifesto{padding:145px 0 135px;text-align:center}
.manifesto h2{font-size:clamp(38px,4.9vw,70px);font-weight:200;letter-spacing:-.03em;line-height:1.02;max-width:16ch;margin:12px auto 0}
.manifesto p{font-size:16px;max-width:780px;margin:26px auto 0;line-height:1.6;color:var(--ink);font-weight:400}
.storylead{padding:115px 0 72px} .storylead-grid{display:block}
.storylead h2{font-size:clamp(34px,4.1vw,46px);font-weight:200;letter-spacing:-.03em;line-height:1.12;max-width:28ch}
.storylead p{font-size:17px;max-width:54ch}
.mosaic{padding:0 0 120px} .mgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px} .mright{display:grid;grid-template-rows:1fr 1fr;gap:24px}
.mgrid>.media{aspect-ratio:4/5} .mright .media{min-height:0}
.timeline{background:#eef0f26e}
.timeline-grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:var(--wide);margin:auto}
.year{padding:88px 60px 94px;border-right:1px solid var(--line)} .year:last-child{border-right:0}
.year .big{font-size:clamp(58px,6vw,92px);font-weight:200;letter-spacing:-.055em;line-height:1;margin-bottom:44px}
.year h3{font-size:18px;font-weight:500;letter-spacing:-.02em;margin-bottom:14px}
.year p{font-size:14px;line-height:1.72;max-width:34ch}
.craft{padding:130px 0} .craftgrid{display:grid;grid-template-columns:1fr 1fr;gap:86px;align-items:center}
/* the electronics shot keeps its own portrait proportions -- nothing cropped */
.craft .craftmedia{aspect-ratio:auto;background:none}
.craft .craftmedia img{height:auto;object-fit:contain} .craftcopy h2{font-size:clamp(34px,4vw,56px);font-weight:200;letter-spacing:-.03em;line-height:1.06;max-width:15ch;margin-top:14px}
.craftcopy p{font-size:16px;margin-top:26px;max-width:54ch} .proofs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:42px;border-top:1px solid var(--line)}
.proof{padding:24px 20px 0 0;font-size:12px;line-height:1.55} .proof b{display:block;font-size:14px;font-weight:500;line-height:1.3;margin-bottom:7px} .proof span{display:block;font-size:12px;color:var(--muted);line-height:1.55}
.closer{height:96vh;min-height:690px;position:relative;color:#fff;display:flex;align-items:flex-end;background:url('../../../../../uploads/about-cta.jpg') center/cover no-repeat;overflow:hidden}
.closer::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,9,13,.1) 25%,rgba(4,9,13,.3) 100%)}
.closecopy{position:relative;z-index:2;width:100%;max-width:var(--wide);margin:auto;padding:0 42px 74px;text-align:center}
.closecopy .ey{color:rgba(255,255,255,.65)} .closecopy h2{font-size:clamp(36px,4.8vw,68px);font-weight:300;letter-spacing:-.03em;line-height:1.06;max-width:22ch;margin:14px auto 0}
.closecopy p{color:rgba(255,255,255,.74);font-size:17px;max-width:54ch;margin:22px auto 0}
.acts{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.btn.ghost{color:#fff}
@media(max-width:900px){
  .wide,.wrap,.hero-copy,.closecopy{padding-left:22px;padding-right:22px}
  /* portrait crop for phone and tablet portrait */
  .hero-bg{background-image:url('../../../../../uploads/about-hero-mobile.jpg')}
  .hero-copy{margin:0 auto auto;padding-top:15vh;padding-bottom:0}
  /* the mobile/tablet crop wants a heavier, less tightly set headline */
  .hero h1{font-weight:300;letter-spacing:-.03em}
  .hero::after{display:none}
  .storylead-grid,.craftgrid{grid-template-columns:1fr;gap:44px}
  .mgrid{grid-template-columns:1fr} .mgrid>.media{aspect-ratio:4/3} .mright{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .timeline-grid{grid-template-columns:1fr} .year{border-right:0;border-bottom:1px solid var(--line);padding:62px 22px} .year:last-child{border-bottom:0}
  .hero{height:88vh} .manifesto{padding:105px 0} .craft{padding:95px 0}
}
@media(max-width:600px){
  .hero h1{font-size:clamp(30px,10.5vw,44px)} .hero .sub{font-size:18px} .storylead{padding-top:88px}
  .mright{grid-template-columns:1fr}
  .proofs{grid-template-columns:1fr} .proof{padding-top:18px} .legal{flex-direction:column;gap:10px}
}


/* ==========================================================
   ABOUT V4 — final requested structure
   hero → manifesto → origin statement → lifestyle gallery
   → history → flagship projects → craft → full-screen closer
   ========================================================== */

/* Current-site origin statement: intentionally quiet and generous. */
.origin-statement{
  background:#fff;
  padding:0 42px 118px;
}
.origin-box{
  max-width:1600px;
  margin:0 auto;
  background:#f3f4f4;
  padding:104px clamp(42px,8vw,140px) 110px;
}
.origin-box .ey{
  margin-bottom:28px;
}
.origin-box p{
  max-width:1180px;
  color:var(--ink);
  font-size:clamp(25px,2.65vw,28px);
  line-height:1.38;
  letter-spacing:-.025em;
  font-weight:400;
}

/* Flagship projects: proof without turning the page into a portfolio. */
.heritage-projects{
  padding:138px 0 142px;
  background:#fff;
}
.projects-head{display:block;margin-bottom:72px}
.projects-head h2{max-width:22ch;font-size:clamp(40px,5vw,68px);font-weight:200;letter-spacing:-.03em;line-height:1.02}
.project-kicker{
  margin-bottom:12px;
  color:rgba(255,255,255,.60);
  font-size:10px;
  line-height:1.4;
  letter-spacing:.17em;
  text-transform:uppercase;
  font-weight:500;
}

/* Give craft some breathing room before the final cinematic close. */
.craft{
  padding-top:132px;
  padding-bottom:138px;
}

/* Mobile / tablet */
@media(max-width:900px){
  .origin-statement{
    padding-left:24px;
    padding-right:24px;
    padding-bottom:88px;
  }
  .origin-box{
    padding:72px 42px 76px;
  }
  .projects-head{margin-bottom:54px}
}
@media(max-width:600px){
  .origin-statement{
    padding-left:16px;
    padding-right:16px;
    padding-bottom:72px;
  }
  .origin-box{
    padding:58px 25px 62px;
  }
  .origin-box p{
    font-size:24px;
    line-height:1.43;
  }
  .heritage-projects{
    padding-top:92px;
    padding-bottom:96px;
  }
  .craft{
    padding-top:94px;
    padding-bottom:100px;
  }
}

/* the shared sheet colours h1-h4 with --ink; these sections are dark grounds */
.hero :is(h1,h2,h3,h4),
.closer :is(h1,h2,h3,h4){color:inherit}

.project-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
@media(prefers-reduced-motion:reduce){.project-vid{display:none}}

/* heritage: one portrait film on the left, the expertise copy on the right */
.heritage-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(40px,5vw,86px);align-items:center}
.heritage-media{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;
  background:linear-gradient(135deg,#082b3f 0%,#06131d 100%)}
.heritage-media .project-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.heritage-media::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(5,8,12,0) 55%,rgba(5,8,12,.72) 100%)}
.heritage-media figcaption{position:absolute;z-index:2;left:clamp(20px,2.6vw,34px);
  right:clamp(20px,2.6vw,34px);bottom:clamp(20px,2.6vw,32px);color:#fff}
.heritage-media figcaption b{display:block;margin-top:8px;font-size:clamp(20px,2vw,27px);
  font-weight:300;letter-spacing:-.02em;color:#fff}
.heritage-copy p{max-width:48ch;font-size:16px;line-height:1.8;font-weight:400}
.heritage-copy p strong{font-weight:500;color:var(--ink)}
@media(max-width:900px){
  .heritage-split{grid-template-columns:1fr;gap:34px}
  .heritage-media{aspect-ratio:4/5;max-width:520px}
  .heritage-copy p{max-width:none;font-size:15.5px}}

/* flipped on desktop: copy left, film right. Below 900 the grid is a single
   column and DOM order applies, so the photo leads on mobile. */
@media(min-width:901px){
  .craftgrid .craftmedia{order:2}
  .craftgrid .craftcopy{order:1}}
.craftcopy .btn{margin-top:34px}
/* same ink button the homepage uses; not in yphos.css yet, so scoped here */
.btn.ink{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.dark{background:#fff;border-color:#fff;color:var(--ink)}
.btn.dark:hover{background:transparent;border-color:#fff;color:#fff}
.btn.ink:hover{background:transparent;color:var(--ink);border-color:var(--ink)}

/* hero entrance: slow, staggered, fade only -- nothing moves */
.hero-copy>*{opacity:0;animation:heroFade 1.3s var(--ease) forwards}
.hero .ey {animation-delay:.22s}
.hero h1  {animation-delay:.42s}
.hero .sub{animation-delay:.64s}
@keyframes heroFade{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-copy>*{opacity:1;animation:none}}