/* ===========================================
   ORENDA CONTINUUM CAPITAL
   by Rym Leulmi
=========================================== */

:root{

    --blue:#0d4a63;
    --ink:#1b1b1b;
    --muted:#6b7280;

    --paper:#ffffff;
    --soft:#f8f6f3;
    --line:#e8e4dc;

    --max:1180px;

}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    margin:0;

    background:var(--paper);

    color:var(--ink);

    font-family:Georgia,"Times New Roman",serif;

    line-height:1.75;

}

/* ---------- Links ---------- */

a{

    color:inherit;

    text-decoration:none;

}

a:hover{

    text-decoration:underline;

}

img{

    display:block;

    width:100%;

}

/* ---------- Header ---------- */

.header{

    border-bottom:1px solid var(--line);

    background:white;

}

.nav{

    max-width:var(--max);

    margin:auto;

    padding:26px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.identity strong{

    display:block;

    font-size:30px;

    font-weight:400;

    line-height:1;

}

.identity span{

    display:block;

    margin-top:8px;

    font-family:Arial,Helvetica,sans-serif;

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.16em;

    color:var(--muted);

}

.nav-links{

    display:flex;

    gap:28px;

    align-items:center;

    font-family:Arial,Helvetica,sans-serif;

    font-size:12px;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.lang{

    padding-left:20px;

    border-left:1px solid var(--line);

}

/* ---------- Hero ---------- */

.hero-letter{

    padding:10px 26px 90px;

    background:var(--soft);

}

.hero-letter-inner{

    max-width:var(--max);

    margin:auto;

    display:grid;

    grid-template-columns:560px 420px;

    justify-content:space-between;

    align-items:start;

}
.hero-letter-image{

    width:350px;

}
/* ---------- About Page ---------- */

.about-hero .hero-letter-copy{
    padding-top:70px;
}

.about-hero .hero-letter-image{
    padding-top:20px;
}

.about-hero .hero-letter-image img{
    height:500px;
    object-fit:cover;
    object-position:center;
}
.editorial-photo{
    width:250px;
    float:right;
    margin:10px 0 35px 45px;
    padding:8px;
    background:white;
    box-shadow:0 12px 30px rgba(0,0,0,.10);
}
.editorial-photo-left{
    float:left;
    margin:
        .5rem 2.5rem 2rem 0;
}
.chapter-divider{
    width:60px;
    height:1px;
    background:var(--line);
    margin:80px 0 50px;
}
.chapter-start{
    margin-top:70px;
}
/* ---------- Copy ---------- */

.hero-letter-copy{

    padding-top:45px;

}

.kicker {

    margin: 0 0 18px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 22px;

    font-weight: 400;

    color: var(--ink);

    line-height: 1.4;

}

h1{

    margin:0 0 34px;

    max-width:520px;

    font-size:50px;

    font-weight:400;

    line-height:1.10;

    letter-spacing:-.045em;

}
.page-title{
    font-size:35px;
    line-height:1.08;
    max-width:620px;
}
.intro{

    max-width:500px;

    font-size:22px;

    line-height:1.70;

    color:#303030;

}

.quiet-link{

    display:inline-block;

    margin-top:18px;

    color:var(--blue);

    font-size:20px;

}

/* ---------- Portrait ---------- */

.hero-letter-image{

    padding-top:78px;

}

.hero-letter-image img{

    width:100%;

    height:460px;

    object-fit:cover;

    object-position:center center;

}

/* ---------- Letter ---------- */

.letter-section{

    padding:30px 24px;

}

.letter-content{

    max-width:700px;

    margin:auto;

    font-size:21px;

}

.dropcap::first-letter {

    float: left;

    font-family: "Cormorant Garamond", serif;

    font-size: 4.5rem;

    line-height: 0.85;

    padding-right: 8px;

    color: var(--blue);

    font-weight: 600;

}
.letter-conclusion{

    margin-top: 0;

    color: var(--blue);

}
.letter-quote{

    max-width:700px;
    margin:70px auto 35px;

    font-family:"Cormorant Garamond", serif;
    font-size:2.2rem;
    line-height:1.4;

    color:var(--blue);

    font-style:normal;
    text-align:left;

}
.letter-content h2{

    margin:42px 0 20px;

    font-size:34px;

    font-weight:400;

    color:var(--blue);

}
.opening-letter{

    padding:120px 24px;

    background:white;

}

.container{

    max-width:760px;

    margin:auto;

}

.opening-letter p{

    font-size:24px;

    line-height:1.9;

    margin-bottom:34px;

}

.opening-intro{

    font-size:34px;

    line-height:1.45;

}

.opening-letter h2{

    font-size:48px;

    font-weight:400;

    line-height:1.2;

    margin:70px 0 40px;

    color:var(--blue);

}

.opening-letter blockquote{

    margin:80px 0;

    padding-left:28px;

    border-left:4px solid var(--blue);

    font-size:38px;

    font-style:normal;

}
.story-image{
    width:360px;
    max-width:40%;
    float:right;
    margin:0 0 2rem 3rem;
}

.story-image img{
    width:100%;
    display:block;

    box-shadow:0 10px 30px rgba(0,0,0,.08);
    border:8px solid white;
}
/* ---------- Promise ---------- */

.promise-section{

    padding:20px 24px 80px;

}

.promise-inner{

    max-width:700px;

    margin:auto;

    border-top:1px solid var(--blue);

    padding-top:34px;

}

.promise-label{

    margin-bottom:20px;

    font-family:Arial,Helvetica,sans-serif;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.16em;

    color:var(--blue);

    font-weight:700;

}

.promise-inner p{

    font-size:24px;

}

/* ---------- Credibility ---------- */

.credibility-strip{

    background:var(--soft);

    border-top:1px solid var(--line);

    padding:34px 24px;

}

.credibility-inner{

    max-width:700px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    gap:24px;

    align-items:flex-start;

    flex-wrap:wrap;

}

.credibility-inner a{

    color:var(--blue);

}
.accent {

    color: var(--blue);

    font-weight: 530;
    font-style:italic;

}

/* ---------- Footer ---------- */

.footer{

    padding:30px 24px;

    border-top:1px solid var(--line);

    font-family:Arial,Helvetica,sans-serif;

    font-size:14px;

    color:var(--muted);

}

.footer-inner{

    max-width:var(--max);

    margin:auto;

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

}

/* ===========================================
              MOBILE
=========================================== */

@media(max-width:900px){

.nav{

    flex-direction:column;

    align-items:flex-start;

    gap:18px;

}

.nav-links{

    flex-wrap:wrap;

    gap:16px;

}

.hero-letter{

    padding:35px 22px 60px;

}

.hero-letter-inner{

    display:flex;

    flex-direction:column;

}

.hero-letter-image{

    order:1;

    padding-top:0;

    margin-bottom:40px;

    display:flex;

    justify-content:center;

}

.hero-letter-image img{

    width:290px;

    height:380px;

    object-fit:cover;

    object-position:center;

    border-radius:12px;

}

.hero-letter-copy{

    order:2;

    padding-top:0;

}

.hero-letter-image img{

    height:360px;

}

h1{

    font-size:42px;

    max-width:100%;

}

.intro{

    max-width:100%;

    font-size:20px;

}

.letter-content{

    font-size:20px;

}
.editorial-photo,
.editorial-photo-left{
    float:none;
    display:block;
    width:260px;
    max-width:100%;
    margin:2.5rem auto 3rem;
}

.chapter-start{
    clear:both;
}

}
/* ==========================
   MOBILE HEADER
========================== */

.mobile-actions{

    display:none;

}

.menu-button{

    border:none;

    background:none;

    font-size:34px;

    cursor:pointer;

    color:var(--ink);

}

@media(max-width:900px){

.nav{

    flex-direction:row;

    justify-content:space-between;

    align-items:center;

}

.nav-links{

    display:none;

}

.mobile-actions{

    display:flex;

    align-items:center;

    gap:26px;

}

.identity span{

    display:none;

}

.identity strong{

    font-size:28px;

}

}
/* ---------- Book chapter spacing ---------- */

.book-chapter{
    padding:45px 24px 70px;
}

.book-chapter .chapter-quote{
    margin:0 0 24px;
}
.editorial-question{
    margin:3rem 0;
    font-size:1.6rem;
    line-height:1.8;
    font-style:italic;
    color:#173f5f;
}
.contact-form-block{
  margin-top:4rem;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
  max-width:620px;
}

.contact-form label{
  font-family:var(--sans);
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:.9rem 1rem;
  border:1px solid var(--line);
  background:#fff;
  font-family:var(--serif);
  font-size:1.05rem;
}

.contact-form textarea{
  resize:vertical;
}

.contact-form button{
  margin-top:1rem;
  width:fit-content;
  padding:.9rem 1.4rem;
  border:1px solid var(--blue);
  background:var(--blue);
  color:white;
  font-family:var(--sans);
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}

.contact-form button:hover{
  background:#08384c;
}
/* ===========================================
   Investor Carousel
=========================================== */

.investor-section {
  margin: 3rem 0;
}

.investor-carousel {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1rem 0 1.5rem;
  -webkit-overflow-scrolling: touch;
}

.investor-card {
  flex: 0 0 210px;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.investor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0,0,0,.10);
}

.investor-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: .85rem;
}

.investor-card strong {
  display: block;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.25;
  margin-bottom: .25rem;
}

.investor-card span {
  display: block;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.35;
}

.investor-carousel::-webkit-scrollbar {
  height: 8px;
}

.investor-carousel::-webkit-scrollbar-track {
  background: var(--soft);
  border-radius: 999px;
}

.investor-carousel::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}

@media (max-width: 700px) {
  .investor-card {
    flex-basis: 170px;
  }
}
/* ===========================================
   FAQ PAGE
=========================================== */

.faq-list{
    margin-top:3rem;
}

.faq-list details{
    border-top:1px solid var(--line);
    padding:1.2rem 0;
}

.faq-list details:last-child{
    border-bottom:1px solid var(--line);
}

.faq-list summary{
    list-style:none;
    cursor:pointer;
    color:var(--blue);
    font-size:1.15rem;
    font-weight:600;
    line-height:1.5;
    transition:opacity .2s ease;
}

.faq-list summary::-webkit-details-marker{
    display:none;
}

.faq-list summary::after{
    content:"+";
    float:right;
    color:var(--blue);
    font-size:1.6rem;
    font-weight:300;
    line-height:1;
    transition:transform .2s ease;
}

.faq-list details[open] summary::after{
    content:"–";
}

.faq-list summary:hover{
    opacity:.75;
}

.faq-list p{
    margin:1rem 0 0;
    max-width:70ch;
}

.faq-list a{
    color:var(--blue);
}

.faq-list details + details{
    margin-top:.2rem;
}
/* ===========================================
   Responsive Navigation
=========================================== */

.nav-toggle{
    display:none;
}

.menu-button{
    display:none;
    font-size:1.8rem;
    cursor:pointer;
    color:var(--blue);
}

.lang-desktop{
    margin-left:1rem;
    font-weight:600;
}

.lang-mobile{
    display:none;
}

@media (max-width:900px){

    .menu-button{
        display:block;
    }

    .lang-desktop{
        display:none;
    }

    .nav-links{

        display:none;

        position:absolute;
        top:100%;
        left:0;
        right:0;

        background:white;

        flex-direction:column;

        padding:1.5rem;

        gap:1rem;

        border-top:1px solid var(--line);

        box-shadow:0 12px 30px rgba(0,0,0,.08);

        z-index:1000;
    }

    .lang-mobile{
        display:block;
        margin-top:.5rem;
        font-weight:600;
    }

    .nav-toggle:checked + .menu-button + .nav-links{

        display:flex;

    }

    .nav{

        position:relative;

    }

}
