/* Portfolio Haus — V1 site stylesheet
   "Haus" architecture: shorter scroll, stronger visual rhythm (numbered steps, cards,
   a disclosure, one studio-note aside). Navy + cream + gold as the base, coral as the
   one primary accent, wine reserved for The Receipt Rule only. */

:root{
  color-scheme: light only;
  --navy:#1C1A2E;
  --gold:#E6A817;
  --cream:#F5EDE0;
  --cream-dim:#E7DBC6;
  --coral:#FF6B6B;
  --wine:#6B2D5E;
  --ink-soft:#4A4760;
  --max:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;background:#F5EDE0;}
body{
  margin:0;
  background:var(--cream);
  color:var(--navy);
  font-family:"Crimson Pro",Georgia,serif;
  font-size:17px;
  line-height:1.65;
}
h1,h2,h3,.eyebrow,.kicker,.nav-links a,.brand-name,.btn,.label,.way-card h3,.room-card h3{
  font-family:"Big Shoulders",sans-serif;
}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-0.01em;}
a{color:inherit;}
img,svg{max-width:100%;display:block;}
.container{max-width:var(--max);margin:0 auto;padding:0 28px;}

a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}
}

/* ---------- Signature: Haus Lines ---------- */
.haus-lines{width:72px;margin:14px 0 24px;}
.haus-lines span{display:block;height:2px;background:var(--gold);}
.haus-lines span + span{margin-top:3px;}
.haus-lines.center{margin-left:auto;margin-right:auto;}

.eyebrow{text-transform:uppercase;letter-spacing:0.18em;font-size:13px;font-weight:700;margin:0;}
/* Rule: gold eyebrow on dark sections (navy/wine), coral eyebrow on cream sections */
.hero .eyebrow,#receipt .eyebrow,#contact .eyebrow{color:var(--gold);}
#useful .eyebrow,#method .eyebrow,#ways .eyebrow,#about .eyebrow,.placeholder-section .eyebrow{color:var(--coral);}

section{padding:96px 0;}
@media (max-width:720px){section{padding:60px 0;}}

p{margin:0 0 16px;}
p:last-child{margin-bottom:0;}

/* ---------- Nav ---------- */
.site-nav{position:sticky;top:0;z-index:50;background:var(--navy);border-bottom:1px solid rgba(230,168,23,0.25);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:var(--max);margin:0 auto;padding:14px 28px;gap:24px;position:relative;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand-name{color:var(--cream);font-weight:700;letter-spacing:0.05em;font-size:14px;text-transform:uppercase;}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.nav-links a{color:var(--cream);text-decoration:none;font-size:13px;letter-spacing:0.07em;text-transform:uppercase;font-weight:600;opacity:0.85;}
.nav-links a:hover{opacity:1;color:var(--gold);}
.nav-cta-item a{opacity:1;}

.nav-toggle-input{display:none;}
.nav-toggle-label{display:none;cursor:pointer;}
.nav-toggle-label svg{stroke:var(--cream);stroke-width:2;stroke-linecap:round;}

@media (max-width:760px){
  .nav-toggle-label{display:flex;align-items:center;}
  .nav-links{
    display:none;flex-direction:column;align-items:flex-start;gap:16px;
    position:absolute;top:100%;left:0;right:0;background:var(--navy);
    padding:22px 28px 28px;border-bottom:1px solid rgba(230,168,23,0.25);
  }
  .nav-toggle-input:checked ~ .nav-links{display:flex;}
  .nav-cta-item{width:100%;}
  .nav-cta-item a{display:block;text-align:center;}
}

/* ---------- Monogram ---------- */
.monogram{width:38px;height:38px;flex-shrink:0;}
.monogram-ring{fill:none;stroke:var(--gold);stroke-width:2;}
.monogram-text{font-family:"Big Shoulders",sans-serif;font-weight:800;font-size:22px;fill:var(--gold);}
.footer-mark .monogram{width:30px;height:30px;}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:13px 26px;font-size:13px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;text-decoration:none;border-radius:2px;border:2px solid transparent;transition:all .2s ease;cursor:pointer;}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-gold:hover{background:#f0bd45;}
.btn-outline-cream{border-color:var(--cream);color:var(--cream);background:transparent;}
.btn-outline-cream:hover{background:var(--cream);color:var(--navy);}
.btn-outline-navy{border-color:var(--navy);color:var(--navy);background:transparent;}
.btn-outline-navy:hover{background:var(--navy);color:var(--cream);}

/* ---------- Hero ---------- */
.hero{background:var(--navy);color:var(--cream);}
.kicker{color:var(--gold);font-weight:800;text-transform:uppercase;letter-spacing:0.05em;font-size:1.3rem;margin:0 0 6px;}
.hero h1{font-size:clamp(2.1rem,4.8vw,3.4rem);margin:0;max-width:700px;}
.hero .lede{font-family:"Crimson Pro",serif;font-style:italic;font-size:1.2rem;max-width:600px;color:var(--cream-dim);margin:0 0 36px;}
.hero .cta-row{display:flex;gap:16px;flex-wrap:wrap;}
@media (max-width:480px){
  .cta-row .btn,.contact-row .btn,.cta-buttons .btn{width:100%;text-align:center;}
}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.hero .kicker,.hero h1,.hero .lede,.hero .cta-row{animation:fadeUp .7s ease both;}
.hero h1{animation-delay:.08s;}
.hero .lede{animation-delay:.16s;}
.hero .cta-row{animation-delay:.24s;}
@media (prefers-reduced-motion: reduce){.hero *{animation:none !important;}}

/* ---------- Where Portfolio Haus Is Most Useful ---------- */
#useful{background:var(--cream);}
.useful-copy{max-width:680px;margin-top:24px;}
.useful-copy p{font-size:1.06rem;color:var(--ink-soft);}
.useful-copy .headline-truth{
  font-family:"Crimson Pro",serif;font-style:italic;font-size:1.3rem;color:var(--navy);margin-bottom:22px;
}
.room-if-label{font-weight:700;font-size:1.05rem;color:var(--navy);margin:0 0 14px;}
.room-if-list{list-style:none;margin:0 0 26px;padding:0;max-width:640px;}
.room-if-list li{position:relative;padding-left:24px;margin-bottom:13px;font-size:1.04rem;color:var(--ink-soft);}
.room-if-list li::before{content:"";position:absolute;left:0;top:0.6em;width:11px;height:2px;background:var(--coral);}

/* ---------- The Method ---------- */
#method{background:var(--cream);}
.work-block{
  display:grid;grid-template-columns:190px 1fr;gap:32px;
  padding:30px 0;border-top:1px solid rgba(28,26,46,0.14);
}
.work-block:last-of-type{border-bottom:1px solid rgba(28,26,46,0.14);}
@media (max-width:700px){.work-block{grid-template-columns:1fr;gap:8px;}}
.work-block .label{
  text-transform:uppercase;letter-spacing:0.08em;font-size:0.78rem;font-weight:700;
  color:var(--coral);padding-top:4px;
}
.work-block h3{font-size:1.18rem;margin-bottom:10px;}
.work-block p{color:var(--ink-soft);font-size:1rem;margin:0;}
.step-detail{margin-bottom:12px;}
.step-detail:last-child{margin-bottom:0;}
.detail-label{display:block;font-weight:700;font-size:0.76rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--coral);margin-bottom:3px;}
.step-detail p{font-size:0.96rem;}

/* ---------- Three Ways to Work With the Haus (Doctrine Build as flagship) ---------- */
#ways{background:var(--cream);}
.ways-intro{font-size:1.06rem;max-width:660px;margin:24px 0 36px;color:var(--ink-soft);}

.flagship-card{
  background:var(--navy);color:var(--cream);padding:36px;border-top:3px solid var(--gold);
  display:flex;flex-direction:column;gap:12px;
}
.flagship-card h3{font-size:1.45rem;}
.flagship-card .tagline{font-family:"Crimson Pro",serif;font-style:italic;color:var(--gold);font-size:1.08rem;margin:0;}
.flagship-card .desc{color:var(--cream-dim);font-size:1rem;margin:0;max-width:600px;}
.flagship-card .card-deliverables li{color:var(--cream);}
.flagship-card .card-deliverables li::before{background:var(--gold);}
.capability-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:18px;}
@media (max-width:760px){.capability-groups{grid-template-columns:1fr;gap:18px;}}
.group-label{display:block;font-family:"Big Shoulders",sans-serif;font-weight:700;font-size:0.76rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--gold);margin-bottom:8px;}

.ways-transition{font-size:0.92rem;font-weight:700;letter-spacing:0.04em;color:var(--navy);margin:32px 0 20px;}

.transform-list{max-width:760px;margin-top:32px;}
.transform-row{display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid rgba(28,26,46,0.1);}
.transform-row:last-child{border-bottom:none;}
.t-from{flex:1;text-align:right;color:var(--ink-soft);font-style:italic;font-family:"Crimson Pro",serif;font-size:0.98rem;}
.t-arrow{color:var(--coral);font-weight:800;font-size:1.1rem;flex-shrink:0;}
.t-to{flex:1;color:var(--navy);font-weight:700;font-size:0.98rem;}
@media (max-width:600px){
  .transform-row{flex-direction:column;align-items:flex-start;gap:4px;text-align:left;}
  .t-from{text-align:left;}
  .t-arrow{margin-left:4px;}
}

.ways-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media (max-width:680px){.ways-grid{grid-template-columns:1fr;}}
.way-card{background:#FBF6EC;border:1px solid rgba(28,26,46,0.12);padding:26px;display:flex;flex-direction:column;gap:12px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.way-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(28,26,46,0.12);border-color:var(--coral);}
.way-card h3{font-size:1.2rem;margin:0;}
.way-card .tagline{font-family:"Crimson Pro",serif;font-style:italic;color:var(--coral);font-size:1.02rem;margin:0;}
.way-card .desc{color:var(--ink-soft);font-size:0.95rem;margin:0;}
.card-deliverables{list-style:none;margin:6px 0 0;padding:0;}
.card-deliverables li{position:relative;padding-left:18px;font-size:0.88rem;color:var(--navy);margin-bottom:6px;}
.card-deliverables li::before{content:"";position:absolute;left:0;top:0.55em;width:9px;height:2px;background:var(--coral);}

/* ---------- The Receipt Rule (wine — the one deep-contrast section) ---------- */
#receipt{background:var(--wine);color:var(--cream);}
.receipt-claim{font-family:"Crimson Pro",serif;font-style:italic;font-size:1.3rem;color:var(--cream);margin:24px 0 18px;max-width:600px;}
.receipt-body{font-size:1.05rem;max-width:640px;color:rgba(245,237,224,0.88);margin-bottom:28px;}

.studio-note{
  border:1px solid rgba(245,237,224,0.35);background:rgba(245,237,224,0.06);
  padding:18px 22px;max-width:560px;margin:0 0 32px;
}
.studio-note .note-label{display:block;font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.studio-note p{font-family:"Crimson Pro",serif;font-style:italic;color:var(--cream);margin:0;font-size:1rem;}

#receipt details{max-width:680px;}
#receipt summary{
  cursor:pointer;font-family:"Big Shoulders",sans-serif;font-weight:700;font-size:0.85rem;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--gold);padding:4px 0;list-style:none;
}
#receipt summary::-webkit-details-marker{display:none;}
#receipt summary::before{content:"+ ";}
#receipt details[open] summary::before{content:"\2212 ";}
.receipt-examples{
  font-family:"Big Shoulders",sans-serif;font-weight:600;letter-spacing:0.03em;font-size:1rem;
  line-height:1.9;color:var(--cream);border-top:1px solid rgba(245,237,224,0.25);padding-top:16px;margin-top:14px;
}

/* ---------- About ---------- */
#about{background:var(--cream);}
.about-grid{display:grid;grid-template-columns:220px 1fr;gap:44px;margin-top:32px;align-items:start;}
@media (max-width:700px){
  .about-grid{grid-template-columns:1fr;gap:28px;}
  .about-photo{margin:0 auto;}
}
.about-photo{max-width:220px;}
.about-photo img{
  width:100%;max-width:220px;height:auto;display:block;
  border-radius:4px;border:1px solid rgba(28,26,46,0.12);
  box-shadow:0 14px 32px rgba(28,26,46,0.14);
}
.about-byline{font-size:0.85rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--coral);margin:0 0 14px;}
.credential-badge{
  display:inline-block;border:1px solid var(--coral);color:var(--coral);font-size:0.76rem;font-weight:700;
  letter-spacing:0.05em;text-transform:uppercase;padding:6px 14px;border-radius:2px;margin-bottom:22px;
}
.about-copy{max-width:680px;}
.about-copy p{font-size:1.04rem;}
.pull-quote{
  font-family:"Crimson Pro",serif;font-style:italic;font-size:1.35rem;color:var(--coral);
  border-left:3px solid var(--coral);padding-left:20px;margin:28px 0 0;
}

/* ---------- FAQ ---------- */
#faq{background:var(--cream);}
.faq-list{max-width:700px;margin-top:32px;}
.faq-item{border-bottom:1px solid rgba(28,26,46,0.14);padding:18px 0;}
.faq-item summary{
  cursor:pointer;font-weight:700;color:var(--navy);font-size:1.02rem;
  list-style:none;position:relative;padding-right:28px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";position:absolute;right:0;top:0;color:var(--coral);font-weight:800;font-size:1.1rem;}
.faq-item[open] summary::after{content:"\2212";}
.faq-item p{margin-top:12px;color:var(--ink-soft);font-size:0.98rem;}

/* ---------- Contact ---------- */
#contact{background:var(--navy);color:var(--cream);text-align:center;}
#contact h2{font-size:clamp(1.8rem,4vw,2.5rem);margin:18px 0 30px;}
.closing-line{font-family:"Crimson Pro",serif;font-style:italic;font-size:1.3rem;color:var(--coral);max-width:560px;margin:22px auto 0;}
.contact-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}

/* ---------- Sub-page header band (About, and future deeper pages) ---------- */
.page-header{background:var(--navy);color:var(--cream);padding:84px 0 52px;}
.page-header .eyebrow{color:var(--gold);}
.page-header h1{font-size:clamp(1.7rem,3.8vw,2.6rem);margin:14px 0 0;max-width:760px;}

/* ---------- What Portfolio Haus Builds (bridge) ---------- */
#builds{background:var(--cream);}
.builds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:28px 0;}
@media (max-width:760px){.builds-grid{grid-template-columns:1fr;}}
.builds-item{font-family:"Big Shoulders",sans-serif;font-weight:700;font-size:1.05rem;color:var(--navy);padding-top:14px;border-top:2px solid var(--coral);}
.builds-close{color:var(--ink-soft);max-width:680px;}

/* ---------- Explore the Haus (pathway cards) ---------- */
#explore{background:var(--cream-dim);}
.room-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px;}
@media (max-width:680px){.room-grid{grid-template-columns:1fr;}}
.room-card{background:#FBF6EC;border:1px solid rgba(28,26,46,0.12);padding:24px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.room-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(28,26,46,0.12);border-color:var(--coral);}
.room-card h3{font-size:1.12rem;margin-bottom:8px;}
.room-card p{color:var(--ink-soft);font-size:0.93rem;margin-bottom:14px;}
.room-card a{color:var(--coral);font-weight:700;text-decoration:underline;font-size:0.88rem;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);border-top:1px solid rgba(230,168,23,0.2);padding:30px 0;}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;color:rgba(245,237,224,0.55);font-size:0.84rem;}
.footer-mark{display:flex;align-items:center;gap:10px;}

/* ---------- Dormant future pages ---------- */
.placeholder-section{padding-top:160px;text-align:center;}
.placeholder-section p{max-width:540px;margin:0 auto;}