/* V10.14 — a warm, personal introduction to the founder of MSK Coffee Repair. */
.about-page{margin:0;background:#0b0c0d;color:#f8f2e8}
.detail-shell--about{overflow:hidden;background:radial-gradient(circle at 83% 4%,rgba(185,127,61,.12),transparent 24%),radial-gradient(circle at 8% 40%,rgba(68,139,146,.07),transparent 25%),#0b0c0d;color:#f8f2e8}
.detail-shell--about :is(p,li){font-size:clamp(16px,1.02vw,18px);line-height:1.72;color:#d5cec4}
.detail-shell--about :is(h1,h2,h3,strong){text-wrap:balance}
.detail-shell--about section{position:relative}
.detail-shell--about section>small,.about-section__heading>small,.about-origin__copy>small,.about-certificates__intro>small,.about-finale__copy>small{display:block;color:#e5bd78;font:700 12px/1.3 var(--body);letter-spacing:.11em}
.detail-shell--about h2{margin:14px 0 0;color:#fff9f0;font:400 clamp(50px,5.4vw,92px)/.94 var(--display);letter-spacing:-.038em}
.detail-shell--about h2 em{color:#e8c378;font-weight:400}
[data-about-reveal]{opacity:0;transform:translateY(32px);transition:opacity .85s ease,transform .95s cubic-bezier(.16,1,.3,1)}
[data-about-reveal].is-visible{opacity:1;transform:none}

.about-hero{min-height:calc(100svh - 120px);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr);gap:clamp(35px,6vw,100px);align-items:center;width:min(1640px,calc(100% - 10vw));margin:0 auto;padding:clamp(155px,14vw,220px) 0 clamp(90px,9vw,150px)}
.about-hero::before{content:"";position:absolute;left:52%;top:20%;width:min(42vw,660px);aspect-ratio:1;border:1px solid rgba(226,197,121,.1);border-radius:50%;box-shadow:0 0 0 62px rgba(226,197,121,.018),0 0 0 128px rgba(226,197,121,.012);pointer-events:none}
.about-hero__copy{position:relative;z-index:2;max-width:850px}
.about-hero__copy>small{margin-bottom:25px}
.about-hero h1{margin:0;color:#fffaf2;font:400 clamp(68px,7.1vw,126px)/.84 var(--display);letter-spacing:-.055em}
.about-hero h1 em{color:#e7c17c;font-weight:400}
.about-hero__lead{margin:35px 0 14px!important;color:#f6eee2!important;font-size:clamp(21px,1.55vw,28px)!important;line-height:1.45!important}
.about-hero__copy>p:not(.about-hero__lead){max-width:780px;margin:0}
.about-hero__copy p strong{color:#fff4df}
.about-hero__facts{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.about-hero__facts span{padding:10px 14px;border:1px solid rgba(226,197,121,.28);border-radius:999px;background:rgba(226,197,121,.055);color:#e8ddcc;font-size:13px}
.about-portrait{position:relative;z-index:2;margin:0;padding:13px;border:1px solid rgba(226,197,121,.34);border-radius:38px;background:linear-gradient(145deg,rgba(226,197,121,.1),rgba(255,255,255,.018));box-shadow:0 36px 90px rgba(0,0,0,.43),inset 0 1px 0 rgba(255,246,227,.08);transform:rotate(1.1deg)}
.about-portrait__image{height:min(66vh,760px);min-height:510px;overflow:hidden;border-radius:28px;background:#171513}
.about-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:saturate(.77) contrast(1.04) brightness(.86);transition:transform 1s cubic-bezier(.16,1,.3,1),filter .6s ease}
.about-portrait:hover img{transform:scale(1.025);filter:saturate(.9) contrast(1.04) brightness(.94)}
.about-portrait figcaption{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:18px 9px 7px}
.about-portrait figcaption span{color:#e6bf7c;font:700 10px/1.2 var(--body);letter-spacing:.11em}
.about-portrait figcaption strong{color:#efe7dc;font:500 14px/1.3 var(--body);text-align:right}

.about-section{width:min(1540px,calc(100% - 10vw));margin:0 auto;padding:clamp(95px,10vw,165px) 0}
.about-experience{display:grid;grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);gap:clamp(45px,8vw,135px);border-top:1px solid rgba(226,197,121,.13)}
.about-section__heading{position:sticky;top:190px;align-self:start}
.about-experience__body>p{max-width:920px;margin:0 0 20px}
.about-proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:42px}
.about-proof-grid article{min-height:310px;padding:28px 25px;border:1px solid rgba(226,197,121,.22);border-radius:25px;background:linear-gradient(145deg,rgba(226,197,121,.07),rgba(255,255,255,.018));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.about-proof-grid span,.about-value>small{display:block;margin-bottom:17px;color:#dfb66f;font:700 10px/1.25 var(--body);letter-spacing:.105em}
.about-proof-grid strong{display:block;margin-bottom:13px;color:#fff7ea;font:500 clamp(23px,1.9vw,31px)/1.05 var(--display)}
.about-proof-grid p{margin:0;font-size:14px!important;line-height:1.66!important}
.about-experience blockquote{margin:25px 0 0;padding:27px 31px;border-left:3px solid #e4bf79;border-radius:4px 23px 23px 4px;background:linear-gradient(100deg,rgba(226,197,121,.11),rgba(226,197,121,.025));color:#e9e0d3;font:400 clamp(20px,1.65vw,28px)/1.5 var(--display)}
.about-experience blockquote strong{color:#fff4df;font-weight:500}

.about-origin{min-height:830px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(350px,.7fr);gap:clamp(45px,8vw,140px);align-items:center;padding:clamp(105px,11vw,180px) max(5vw,calc((100vw - 1540px)/2));background:radial-gradient(circle at 14% 50%,rgba(230,176,96,.14),transparent 27%),linear-gradient(115deg,#17110c,#0b0d0e 63%,#102025)}
.about-origin::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 89px,rgba(231,196,135,.028) 90px 91px);mask-image:linear-gradient(90deg,black,transparent 75%)}
.about-origin__index{position:absolute;right:3%;top:7%;color:rgba(231,196,135,.045);font:400 clamp(150px,25vw,420px)/.75 var(--display);letter-spacing:-.08em;pointer-events:none}
.about-origin__copy{position:relative;z-index:2;max-width:900px}
.about-origin__copy h2{max-width:900px}
.about-origin__copy p{max-width:780px;margin:25px 0 0}
.about-origin__copy p:first-of-type{color:#f7e7cb;font-size:21px}
.about-origin__principles{position:relative;z-index:2;display:grid;gap:13px}
.about-origin__principles article{padding:24px 26px;border:1px solid rgba(226,197,121,.27);border-radius:25px;background:rgba(11,12,12,.55);box-shadow:0 17px 44px rgba(0,0,0,.22);backdrop-filter:blur(12px)}
.about-origin__principles span{float:left;margin-right:18px;color:#e0b76e;font:400 30px/1 var(--display)}
.about-origin__principles strong{display:block;color:#fff4e1;font:500 25px/1.1 var(--display)}
.about-origin__principles p{margin:9px 0 0;font-size:14px!important;line-height:1.55!important}

.about-values{display:grid;grid-template-columns:minmax(310px,.62fr) minmax(0,1.38fr);gap:clamp(45px,8vw,130px)}
.about-values__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.about-value{padding:clamp(25px,3vw,39px);border:1px solid rgba(226,197,121,.21);border-radius:28px;background:linear-gradient(145deg,rgba(31,27,22,.96),rgba(15,17,18,.98));box-shadow:0 24px 55px rgba(0,0,0,.19)}
.about-value--wide{grid-column:1/-1}
.about-value h3{margin:0 0 17px;color:#fff8ee;font:500 clamp(28px,2.45vw,42px)/1.05 var(--display)}
.about-value p{margin:0 0 16px;font-size:15px!important}
.about-value__statement{margin-top:23px!important;padding-top:21px;border-top:1px solid rgba(226,197,121,.23);color:#f2dfbc!important;font:500 21px/1.45 var(--display)!important}
.about-value--solo{background:linear-gradient(145deg,rgba(69,49,28,.5),rgba(15,17,18,.98))}

.about-certificates{padding:clamp(105px,11vw,180px) max(5vw,calc((100vw - 1640px)/2));background:linear-gradient(180deg,#0b0c0d,#11100e)}
.about-certificates__intro{display:grid;grid-template-columns:minmax(0,.78fr) minmax(300px,.5fr);gap:18px clamp(35px,6vw,100px);align-items:end;margin-bottom:50px}
.about-certificates__intro>small{grid-column:1/-1}
.about-certificates__intro h2{margin:0}
.about-certificates__intro p{margin:0}
.certificate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.certificate-card{display:grid;grid-template-rows:minmax(420px,58vh) auto;overflow:hidden;border:1px solid rgba(226,197,121,.25);border-radius:30px;background:linear-gradient(150deg,rgba(35,29,22,.96),rgba(15,17,18,.98));color:#fff;text-decoration:none;box-shadow:0 28px 70px rgba(0,0,0,.25);transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .45s ease}
.certificate-card:hover,.certificate-card:focus-visible{transform:translateY(-10px);border-color:rgba(238,199,128,.7);box-shadow:0 38px 80px rgba(0,0,0,.39),0 0 38px rgba(226,167,86,.09);outline:none}
.certificate-card figure{position:relative;margin:0;overflow:hidden;background:#f6f3ee}
.certificate-card figure::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -45px 60px rgba(8,8,8,.08);pointer-events:none}
.certificate-card img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.certificate-card:hover img{transform:scale(1.018)}
.certificate-card>div{padding:25px 27px 28px}
.certificate-card span{display:block;margin-bottom:9px;color:#dfb66f;font:700 10px/1.2 var(--body);letter-spacing:.11em}
.certificate-card strong{display:block;color:#fff8ed;font:500 clamp(26px,2vw,35px)/1.04 var(--display)}
.certificate-card p{min-height:3.5em;margin:12px 0 20px;font-size:14px!important;line-height:1.55!important}
.certificate-card b{color:#edcb8e;font:650 13px/1.2 var(--body)}

.about-finale{min-height:90svh;display:grid;place-content:center;width:min(1220px,calc(100% - 10vw));margin:0 auto;padding:clamp(120px,13vw,210px) 0;text-align:center}
.about-finale::before{content:"";position:absolute;left:50%;top:48%;width:min(72vw,960px);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid rgba(226,197,121,.11);border-radius:50%;box-shadow:0 0 0 70px rgba(226,197,121,.018),0 0 0 145px rgba(226,197,121,.01);pointer-events:none}
.about-finale__copy,.about-finale__slogan,.about-finale__actions{position:relative;z-index:2}
.about-finale__copy h2{margin-inline:auto;max-width:1050px}
.about-finale__copy>p{max-width:820px;margin:25px auto 0}
.about-finale__copy>strong{display:block;max-width:980px;margin:34px auto;color:#fff7e9;font:400 clamp(27px,3vw,48px)/1.2 var(--display)}
.about-finale__slogan{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:60px}
.about-finale__slogan span{color:#c9bdad;font-size:14px}
.about-finale__slogan em{color:#f1c46e;font:400 clamp(42px,5.5vw,80px)/1.1 var(--script);text-shadow:0 0 28px rgba(224,159,63,.18)}
.about-finale__actions{display:flex;justify-content:center;gap:12px;margin-top:42px}
.about-finale__actions a{border-radius:999px!important}

@media(max-width:1180px){
  .about-hero{grid-template-columns:1fr minmax(330px,.72fr);width:min(100% - 7vw,1200px)}
  .about-hero h1{font-size:clamp(62px,7vw,92px)}
  .about-experience,.about-values{grid-template-columns:1fr}
  .about-section__heading{position:relative;top:auto;max-width:760px}
  .about-proof-grid{grid-template-columns:1fr}
  .about-proof-grid article{min-height:0}
  .about-origin{grid-template-columns:1fr;padding-inline:5vw}
  .about-origin__principles{grid-template-columns:repeat(3,1fr)}
  .certificate-card{grid-template-rows:minmax(360px,52vh) auto}
}
@media(max-width:850px){
  .about-hero{grid-template-columns:1fr;padding-top:85px}
  .about-hero::before{left:50%;top:53%;width:80vw}
  .about-portrait{width:min(100%,560px);justify-self:center;transform:none}
  .about-portrait__image{height:min(75vh,720px)}
  .about-origin__principles,.about-values__grid,.certificate-grid{grid-template-columns:1fr}
  .about-value--wide{grid-column:auto}
  .about-certificates__intro{grid-template-columns:1fr}
  .about-certificates__intro>small{grid-column:auto}
  .certificate-card{grid-template-columns:minmax(220px,.68fr) minmax(0,1fr);grid-template-rows:minmax(420px,65vh)}
  .certificate-card>div{align-self:center}
}
@media(max-width:600px){
  .about-hero{width:calc(100% - 32px);padding-top:70px;padding-bottom:85px}
  .about-hero h1{font-size:clamp(52px,15vw,74px)}
  .about-hero__facts{display:grid}
  .about-portrait{padding:9px;border-radius:29px}
  .about-portrait__image{min-height:460px;border-radius:21px}
  .about-portrait figcaption{align-items:flex-start;flex-direction:column;gap:5px}
  .about-portrait figcaption strong{text-align:left}
  .about-section{width:calc(100% - 32px);padding:90px 0}
  .detail-shell--about h2{font-size:clamp(48px,14vw,68px)}
  .about-experience blockquote{padding:24px 21px}
  .about-origin{padding:95px 16px}
  .about-origin__principles article,.about-value{padding:24px 21px}
  .about-certificates{padding:95px 16px}
  .certificate-card{grid-template-columns:1fr;grid-template-rows:minmax(430px,64vh) auto}
  .about-finale{width:calc(100% - 32px);padding:105px 0}
  .about-finale__actions{flex-direction:column;align-items:stretch}
}
@media(prefers-reduced-motion:reduce){
  [data-about-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .about-portrait img,.certificate-card,.certificate-card img{transition:none!important}
}