/* Velvinci Our Story — approved design (18-our-story v2, 1 Oct 2026). Scoped under .vo. */
.vo{--ink:#111111;--charcoal:#211A14;--stone:#6B6259;--label:#8C8984;--mist:#EEE9E2;--ivory:#FAF7F2;--white:#FFFFFF;--cognac:#9A6B4F;--gold:#C9A96A;--serif:"Cormorant Garamond",Garamond,Georgia,serif;--sans:"Inter","Helvetica Neue",Arial,sans-serif;--vo-top:0px}
/* shield from Kadence global link, list and quote styles */
.vo a,.vo a:hover,.vo a:focus{color:inherit;text-decoration:none}
.vo :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.vo li,.vo dd{margin:0}
.vo blockquote{border-top:0;border-right:0;border-bottom:0;background:none;quotes:none}
.vo blockquote::before,.vo blockquote::after{content:none}
.vo img{max-width:100%;height:auto;display:block}

.vo{container:vo / inline-size;background:var(--white);color:var(--charcoal);font-family:var(--sans);font-size:15.5px;line-height:1.6;position:relative;text-align:left}
.vo *{box-sizing:border-box}
.vo [hidden]{display:none!important}
.vo h1,.vo h2,.vo h3{text-transform:none;letter-spacing:normal;margin:0}
.vo p{margin:0}
.vo ul,.vo ol{margin:0;padding:0;list-style:none}
.vo .wrap{max-width:1290px;margin-inline:auto;padding-inline:clamp(16px,4cqw,48px)}
.vo .eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cognac)}
.vo .h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3.6cqw,2.9rem);line-height:1.08;color:var(--ink);text-wrap:balance}
.vo .sec{padding-block:88px}
.vo .sec.ivory{background:var(--ivory)}
.vo .sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.vo .sec-h > div{display:grid;gap:8px}
.vo .sec-h p{color:var(--stone);max-width:46ch}
.vo .crumbs{font-size:12.5px;color:var(--label);padding-block:18px}
.vo .crumbs a:hover{color:var(--ink)}
.vo .crumbs span{color:var(--charcoal);font-weight:500}
.vo .kick{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--label);font-weight:600}
.vo .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:2px;padding:18px 34px;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.6;background:var(--ink);color:#fff;cursor:pointer;transition:background .25s}
.vo .btn svg,.vo .more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .25s}
.vo .btn:hover svg,.vo a.more:hover svg{transform:translateX(3px)}
.vo .btn.light,.vo .btn.light:focus{background:#fff;color:var(--ink)}
.vo .btn.light:hover{background:#E5E1DA;color:var(--ink)}
.vo .btn.line,.vo .btn.line:focus{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.vo .btn.line:hover{background:#fff;color:var(--ink)}
.vo .more{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);border-bottom:1px solid currentColor;padding-bottom:3px;width:max-content}
.vo .plate{position:relative;overflow:hidden;border-radius:2px;max-width:100%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);background:var(--mist)}
.vo .plate:not(.photo)::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(0,0,0,.07) 1px,transparent 1.3px) 0 0/7px 7px;pointer-events:none}
.vo .plate > svg{width:34%;height:auto;fill:none;stroke:currentColor;stroke-width:1.2;position:relative}
.vo .plate.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vo .t-cognac{background:radial-gradient(120% 90% at 30% 20%,#BC8A67,#8A5C42 55%,#5E3D2B)}
.vo .t-ink{background:radial-gradient(120% 90% at 30% 20%,#433A33,#1E1A17 60%,#111)}
.vo .t-tan{background:radial-gradient(120% 90% at 30% 20%,#D2A77A,#A87750 60%,#80573A)}
.vo .t-sand{background:radial-gradient(120% 90% at 30% 20%,#EFE5D6,#DCCAB0 60%,#C4AB88);color:rgba(33,26,20,.42)}

/* 1 hero */
.vo .hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,5cqw,72px);align-items:center;padding-block:24px 96px}
.vo .hero-copy{display:grid;gap:26px}
.vo .hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(3rem,6.6cqw,5.8rem);line-height:.95;color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
.vo .hero h1 em{font-style:italic;color:var(--cognac)}
.vo .lead{font-size:18px;color:var(--stone);max-width:46ch}
.vo .sign{display:flex;gap:28px;flex-wrap:wrap;border-top:1px solid var(--ink);padding-top:16px}
.vo .sign div{display:grid;gap:2px}
.vo .sign strong{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--ink);line-height:1.15}
.vo .sign span{font-size:12.5px;color:var(--stone)}
.vo .hero-pic{aspect-ratio:4/5}
.vo .hero-pic .stamp{position:absolute;right:0;bottom:28px;background:var(--white);padding:14px 20px 14px 22px;border-radius:2px 0 0 2px;display:grid;gap:2px}
.vo .hero-pic .stamp b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:26px;line-height:1;color:var(--ink)}
.vo .hero-pic .stamp small{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--label);font-weight:600}

/* 2 chapters */
.vo .story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,6cqw,96px)}
.vo .rail{position:sticky;top:calc(var(--vo-top) + 40px);align-self:start;display:grid;gap:22px;padding-top:8px}
.vo .rail .num{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(9rem,20cqw,16rem);line-height:.8;color:var(--cognac);letter-spacing:-.04em}
.vo .rail .of{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--label);font-weight:600}
.vo .rail .now{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,2.6cqw,2.2rem);line-height:1.1;color:var(--ink)}
.vo .rail ol{display:grid;border-left:1px solid var(--mist);margin-top:6px}
.vo .rail ol li{padding:6px 0 6px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:13.5px;color:var(--label);transition:color .2s,border-color .2s}
.vo .rail ol li.on{color:var(--ink);border-left-color:var(--cognac);font-weight:500}
.vo .chapters{display:grid;gap:96px;padding-block:8px 24px}
.vo .ch{display:grid;gap:20px}
.vo .ch .kick b{color:var(--cognac);font-weight:600}
.vo .ch h3{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,3.6cqw,3rem);line-height:1.05;color:var(--ink);text-wrap:balance}
.vo .ch p{font-size:17.5px;line-height:1.75;color:#2B2520;max-width:58ch}
.vo .ch .plate{aspect-ratio:16/10;margin-top:6px}
.vo .ch blockquote{margin:6px 0 0;padding:0 0 0 22px;border-left:2px solid var(--cognac);font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.4cqw,1.9rem);line-height:1.25;color:var(--ink)}
.vo .ch blockquote cite{display:block;margin-top:12px;font-family:var(--sans);font-style:normal;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--label);font-weight:600}
.vo .ch .more{margin-top:4px}

/* 3 route band */
.vo .route{background:var(--ink);color:#EDE8E1;overflow:hidden}
.vo .route .wrap{padding-block:96px;display:grid;gap:48px}
.vo .route .eyebrow{color:var(--gold)}
.vo .route .h2{color:#fff}
.vo .route .sec-h{margin:0}
.vo .route .sec-h p{color:#B8B0A6}
.vo .map{position:relative;aspect-ratio:1194/440;max-width:100%}
.vo .map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vo .map svg.narrow{display:none}
.vo .map .arc{fill:none;stroke:rgba(201,169,106,.55);stroke-width:1.4;stroke-dasharray:4 8}
.vo .map .node{fill:#111;stroke:var(--gold);stroke-width:2}
.vo .map .home{fill:var(--gold)}
.vo .map .t{font-family:var(--serif);font-weight:500;fill:#fff}
.vo .map .s{font-family:var(--sans);letter-spacing:2px;fill:#8C8984}
.vo .map .dot{fill:var(--gold);animation:vo-fly 6s ease-in-out infinite}
@keyframes vo-fly{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
.vo .map .dot{animation-duration:6s}
.vo .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.25)}
.vo .facts div{padding:22px 22px 0 0;display:grid;gap:4px;align-content:start}
.vo .facts div + div{padding-left:22px;border-left:1px solid rgba(255,255,255,.12)}
.vo .facts strong{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,3.6cqw,3rem);line-height:1;color:#fff}
.vo .facts span{font-size:13.5px;color:#B8B0A6}

/* 4 beliefs */
.vo .beliefs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.vo .beliefs li{padding:28px 28px 8px 0;display:grid;gap:12px;align-content:start}
.vo .beliefs li + li{padding-left:28px;border-left:1px solid #E3DDD4}
.vo .beliefs svg{width:30px;height:30px;fill:none;stroke:var(--cognac);stroke-width:1.3}
.vo .beliefs h3{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.15;color:var(--ink)}
.vo .beliefs p{font-size:14.5px;color:var(--stone)}

/* 5 who we are */
.vo .who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5cqw,72px);align-items:start}
.vo .who-copy{display:grid;gap:16px}
.vo .who-copy > p{color:var(--stone);font-size:16.5px;max-width:46ch}
.vo .card{background:var(--ivory);border-radius:4px;padding:40px;position:relative}
.vo .card::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(154,107,79,.45);border-radius:2px;pointer-events:none}
.vo .card dl{margin:0;display:grid;position:relative}
.vo .card dl div{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid #E3DDD4;font-size:15px}
.vo .card dl div:first-child{padding-top:0}
.vo .card dt{color:var(--stone);font-weight:400}
.vo .card dd{margin:0;color:var(--ink);font-weight:500}

/* 6 faq + end */
.vo .faqwrap{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(24px,5cqw,72px)}
.vo .faqwrap > div:first-child{display:grid;gap:10px;align-content:start}
.vo .faq details{border-bottom:1px solid #E3DDD4}
.vo .faq details:first-child{border-top:1px solid #E3DDD4}
.vo .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:500;color:var(--ink);padding:18px 0;min-height:44px}
.vo .faq summary::-webkit-details-marker{display:none}
.vo .faq summary::after{content:"+";font-size:20px;line-height:1;color:var(--cognac);flex:none}
.vo .faq details[open] summary::after{content:"\2013"}
.vo .faq p{padding-bottom:18px;color:var(--stone);font-size:14.5px;max-width:62ch}
.vo .end{background:var(--ink);color:#EDE8E1}
.vo .end .wrap{display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:center;padding-block:72px}
.vo .end h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3.6cqw,3rem);line-height:1.05;color:#fff}
.vo .end p{margin-top:10px;color:#B8B0A6;max-width:52ch}
.vo .end .ctas{display:flex;flex-wrap:wrap;gap:12px}
.vo .end .btn{min-width:220px}

/* ============================ SMALLER SCREENS ============================ */
@container vo (max-width:1000px){
  .vo .beliefs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  .vo .beliefs li:nth-child(3){padding-left:0;border-left:0}
  .vo .facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .vo .facts div:nth-child(3){padding-left:0;border-left:0}
}
@container vo (max-width:760px){
  .vo .crumbs{display:none}
  .vo .sec{padding-block:56px}
  .vo .hero{grid-template-columns:1fr;padding-block:28px 56px;gap:28px}
  .vo .hero h1{font-size:3rem}
  .vo .lead{font-size:16.5px}
  .vo .hero-pic{aspect-ratio:4/3}
  .vo .story{grid-template-columns:1fr;gap:0}
  .vo .rail{top:var(--vo-top);z-index:4;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);grid-template-columns:auto 1fr;align-items:center;gap:4px 16px;margin-inline:calc(-1 * clamp(16px,4cqw,48px));padding:12px clamp(16px,4cqw,48px);border-bottom:1px solid var(--mist)}
  .vo .rail .num{font-size:4rem;grid-row:span 2}
  .vo .rail .now{font-size:1.4rem}
  .vo .rail ol{display:none}
  .vo .chapters{gap:64px;padding-top:32px}
  .vo .ch p{font-size:16.5px}
  .vo .route .wrap{padding-block:56px;gap:32px}
  .vo .map{aspect-ratio:600/600}
  .vo .map svg.wide{display:none}
  .vo .map svg.narrow{display:block}
  .vo .facts div{padding-right:12px}.vo .facts div + div{padding-left:12px}
  .vo .beliefs{grid-template-columns:1fr}
  .vo .beliefs li,.vo .beliefs li + li{padding:20px 0;border-left:0;border-bottom:1px solid #E3DDD4}
  .vo .who{grid-template-columns:1fr}
  .vo .card{padding:28px 22px}
  .vo .card dl div{grid-template-columns:1fr;gap:2px}
  .vo .faqwrap{grid-template-columns:1fr}
  .vo .end .wrap{grid-template-columns:1fr;padding-block:48px}
  .vo .end .btn{min-width:0;width:100%;min-height:54px}
}
@media (prefers-reduced-motion:reduce){.vo *{transition:none!important;animation:none!important}.vo .map .dot{display:none}}