/* ============================================
   Catherine Hostiani — Design tokens
   Minimal, warm, mauve. Two disciplines, one
   throughline: strategic thinking that moves people.
   ============================================ */

:root{
  --cream: #FAF6F3;
  --paper: #FFFFFF;
  --ink: #2E2530;
  --ink-soft: #5B4E56;
  --mauve: #A6748A;
  --mauve-deep: #6B4657;
  --mauve-pale: #F1E4E9;
  --sand: #C9A876;
  --line: #E4D6D9;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Work Sans", "Helvetica Neue", Arial, sans-serif;

  --max: 1080px;
  --pad: clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:var(--mauve-deep);}
a:focus-visible, button:focus-visible{outline:2px solid var(--mauve-deep); outline-offset:3px;}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  color:var(--ink);
  margin:0 0 .4em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.2rem, 5vw, 3.4rem); line-height:1.08;}
h2{font-size:clamp(1.5rem, 3vw, 2.1rem); line-height:1.2;}
h3{font-size:1.2rem; line-height:1.3;}
p{margin:0 0 1.1em;}
.lede{font-size:1.2rem; color:var(--ink-soft); font-weight:400;}

.eyebrow{
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mauve-deep);
  font-weight:600;
  margin-bottom:.9em;
  display:inline-block;
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad);}

/* Signature divider — a soft arc, echoing a museum wall-text rule
   and a chart baseline at once */
.arc-divider{
  width:100%; height:64px; margin: 0 auto; overflow:hidden;
}
.arc-divider svg{width:100%; height:100%; display:block;}

/* Nav */
header.site{
  padding:22px var(--pad);
  display:flex; align-items:flex-start; justify-content:space-between;
  max-width:var(--max); margin:0 auto; gap:20px; flex-wrap:wrap;
}
.brand{
  font-family:var(--serif); font-weight:600; font-size:1.15rem;
  color:var(--ink); text-decoration:none; letter-spacing:-.01em;
}
.header-right{display:flex; flex-direction:column; align-items:flex-end; gap:10px;}
nav.primary{display:flex; gap:28px; flex-wrap:wrap; justify-content:flex-end;}
.lang-switch{
  display:flex; gap:2px; align-items:center;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.06em; font-weight:600;
}
.lang-switch a{
  color:var(--ink-soft); text-decoration:none; padding:3px 7px; border-radius:3px;
  transition:background .15s, color .15s;
}
.lang-switch a:hover{background:var(--mauve-pale); color:var(--mauve-deep);}
.lang-switch a.active{background:var(--mauve-deep); color:#fff;}
nav.primary a{
  font-size:.92rem; text-decoration:none; color:var(--ink-soft);
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:border-color .15s, color .15s;
}
nav.primary a:hover, nav.primary a.active{color:var(--mauve-deep); border-color:var(--mauve);}

/* Hero */
.hero{padding: 40px var(--pad) 20px; max-width:var(--max); margin:0 auto;}
.hero h1 em{font-style:italic; color:var(--mauve-deep);}

/* Entry cards */
.entry-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
  margin:44px 0 10px;
}
@media (max-width:720px){.entry-cards{grid-template-columns:1fr;}}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  padding:32px 30px;
  text-decoration:none;
  color:var(--ink);
  display:block;
  transition:border-color .18s, transform .18s, box-shadow .18s;
  position:relative;
}
.card:hover{
  border-color:var(--mauve);
  transform:translateY(-3px);
  box-shadow:0 14px 30px -18px rgba(107,70,87,.35);
}
.card .tag{
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sand); font-weight:600; display:block; margin-bottom:10px;
}
.card h3{margin-bottom:.5em;}
.card p{color:var(--ink-soft); margin-bottom:0; font-size:.98rem;}
.card .go{
  display:inline-block; margin-top:16px; font-size:.88rem;
  color:var(--mauve-deep); font-weight:600;
}

/* Proof strip */
.proof-strip{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin:56px 0; padding:28px 0;
}
.proof-strip .stat{
  flex:1; min-width:180px; text-align:center;
  padding:10px 16px; border-left:1px solid var(--line);
}
.proof-strip .stat:first-child{border-left:none;}
.proof-strip .num{
  font-family:var(--serif); font-size:1.9rem; color:var(--mauve-deep); display:block;
}
.proof-strip .label{font-size:.85rem; color:var(--ink-soft);}

/* Sections */
section.block{padding:52px var(--pad); max-width:var(--max); margin:0 auto;}
section.block.tight{padding-top:0;}

/* Services list */
.services{display:grid; gap:22px; margin-top:20px;}
.service{
  border-left:3px solid var(--mauve); background:var(--paper);
  padding:20px 24px; border-radius:0 4px 4px 0;
}
.service h3{margin-bottom:.35em; font-size:1.05rem; font-family:var(--sans); font-weight:600;}
.service p{margin-bottom:0; color:var(--ink-soft); font-size:.97rem;}

/* Proof point table */
table.proof{
  width:100%; border-collapse:collapse; margin-top:18px;
  font-size:.95rem;
}
table.proof th{
  text-align:left; font-family:var(--sans); font-weight:600;
  color:var(--ink); border-bottom:1px solid var(--ink);
  padding:10px 14px 10px 0; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase;
}
table.proof td{
  padding:14px 14px 14px 0; border-bottom:1px solid var(--line);
  color:var(--ink-soft); vertical-align:top;
}
table.proof td:first-child{color:var(--ink); font-weight:600; width:32%;}

/* Timeline */
.timeline{list-style:none; margin:24px 0 0; padding:0; border-left:2px solid var(--mauve-pale);}
.timeline li{position:relative; padding:0 0 26px 26px;}
.timeline li::before{
  content:""; position:absolute; left:-6px; top:5px;
  width:10px; height:10px; border-radius:50%; background:var(--mauve);
}
.timeline .yr{font-weight:600; color:var(--mauve-deep); font-size:.88rem; display:block; margin-bottom:2px;}
.timeline .role{color:var(--ink); font-size:1rem;}

/* Applied projects grid */
.projects-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px;}
@media (max-width:720px){.projects-grid{grid-template-columns:1fr;}}
.project-card{
  background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:22px 24px;
}
.project-card .badge{
  display:inline-block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mauve-deep); background:var(--mauve-pale); padding:3px 9px; border-radius:20px;
  margin-bottom:10px; font-weight:600;
}
.project-card h3{font-size:1rem; font-family:var(--sans); font-weight:600; margin-bottom:.4em;}
.project-card p{font-size:.92rem; color:var(--ink-soft); margin-bottom:0;}

/* Case study */
.case-study{
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:34px; margin-bottom:26px;
}
.case-study .meta{font-size:.82rem; color:var(--sand); text-transform:uppercase; letter-spacing:.08em; font-weight:600; margin-bottom:8px;}
.case-study h3{margin-bottom:.5em;}
.cs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:18px;}
@media (max-width:720px){.cs-grid{grid-template-columns:1fr;}}
.cs-grid h4{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mauve-deep); margin:0 0 .5em;
}
.cs-grid p{font-size:.94rem; color:var(--ink-soft); margin-bottom:0;}

/* Buttons */
.btn{
  display:inline-block; background:var(--mauve-deep); color:#fff;
  text-decoration:none; padding:12px 26px; border-radius:3px; font-size:.94rem;
  font-weight:600; transition:background .15s;
}
.btn:hover{background:var(--ink);}
.btn.ghost{
  background:transparent; color:var(--mauve-deep); border:1px solid var(--mauve);
}
.btn.ghost:hover{background:var(--mauve-pale);}

/* Footer */
footer.site{
  border-top:1px solid var(--line); margin-top:60px; padding:36px var(--pad);
}
.footer-inner{
  max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:16px; font-size:.9rem; color:var(--ink-soft);
}
.footer-inner a{color:var(--ink-soft); text-decoration:none;}
.footer-inner a:hover{color:var(--mauve-deep);}

/* About page portrait */
.about-hero{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center;}
@media (max-width:820px){.about-hero{grid-template-columns:1fr;}}
.about-hero img{border-radius:4px; border:1px solid var(--line);}

/* Homepage "why both" preview — photo leads on mobile, sits beside text on desktop */
.about-hero-preview{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.about-hero-preview img{width:100%; height:auto; display:block; border-radius:4px; border:1px solid var(--line);}
@media (max-width:680px){
  .about-hero-preview{grid-template-columns:1fr; gap:22px;}
  .about-hero-preview img{order:-1; max-width:280px; height:auto; margin:0 auto; display:block;}
}

.note-box{
  background:var(--mauve-pale); border-radius:4px; padding:26px 28px; margin-top:30px;
}
.note-box p{margin-bottom:0; color:var(--ink);}

/* Contact page */
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:10px;}
@media (max-width:720px){.info-grid{grid-template-columns:1fr;}}
.info-grid h4{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mauve-deep); margin:0 0 .6em;
}
form.contact-form{display:grid; gap:16px; margin-top:26px; max-width:560px;}
form.contact-form label{font-size:.88rem; color:var(--ink-soft); display:block; margin-bottom:5px;}
form.contact-form input, form.contact-form select, form.contact-form textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:3px;
  font-family:var(--sans); font-size:.96rem; background:var(--paper); color:var(--ink);
}
form.contact-form textarea{min-height:110px; resize:vertical;}

/* Buttons row wrapper (used where two CTAs sit side by side) */
.btn-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:6px;}

/* Table horizontal scroll wrapper for narrow screens */
.table-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* ============================================
   Mobile responsiveness
   ============================================ */
@media (max-width:680px){
  body{font-size:16px;}

  header.site{
    flex-direction:column; align-items:flex-start; gap:12px;
    padding:18px var(--pad);
  }
  .header-right{align-items:flex-start; width:100%; gap:10px;}
  nav.primary{gap:10px 16px; width:100%; justify-content:flex-start;}
  nav.primary a{font-size:.86rem;}
  .lang-switch{align-self:flex-start;}

  .hero{padding:24px var(--pad) 12px;}
  h1{font-size:clamp(1.7rem, 7vw, 2.4rem);}
  h2{font-size:clamp(1.3rem, 6vw, 1.7rem);}
  .lede{font-size:1.05rem;}

  section.block{padding:36px var(--pad);}

  .proof-strip{gap:18px 0;}
  .proof-strip .stat{
    flex:1 1 45%; min-width:130px; border-left:none;
    border-top:1px solid var(--line); padding-top:14px;
  }
  .proof-strip .stat:first-child{border-top:none;}
  .proof-strip .num{font-size:1.5rem;}

  table.proof{font-size:.86rem; min-width:560px;}

  .case-study{padding:22px 20px;}
  .about-hero img{max-width:280px; margin:0 auto;}

  form.contact-form{max-width:100%;}

  .li-card iframe{height:480px;}
}

@media (max-width:400px){
  :root{--pad:16px;}
  .entry-cards .card{padding:24px 20px;}
}

/* ============================================
   About page — sectioned layout with dividers
   ============================================ */
.about-section{margin-bottom:8px;}
.about-section + .about-divider{margin:40px 0;}
.about-divider{
  display:flex; align-items:center; gap:14px;
  color:var(--mauve-deep); font-family:var(--sans);
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
.about-divider::before, .about-divider::after{
  content:""; flex:1; height:1px; background:var(--line);
}

/* Favourites strip */
.favourites{margin:28px 0 8px;}
.favourites .fav-label{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sand); font-weight:600; margin-bottom:14px; display:block;
}
.fav-strip{
  display:flex; gap:16px; overflow-x:auto; padding-bottom:6px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.fav-card{
  flex:0 0 190px; scroll-snap-align:start;
  background:var(--paper); border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
.fav-card img{width:100%; height:150px; object-fit:cover; display:block;}
.fav-card .fav-cap{padding:11px 12px 14px;}
.fav-card .fav-place{font-size:.82rem; font-weight:600; color:var(--ink); display:block; margin-bottom:3px;}
.fav-card .fav-desc{font-size:.78rem; color:var(--ink-soft); line-height:1.4;}
.fav-strip::-webkit-scrollbar{height:6px;}
.fav-strip::-webkit-scrollbar-thumb{background:var(--line); border-radius:10px;}

/* Worked-with wordmark row */
.workedwith{margin-top:34px;}
.workedwith .ww-label{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sand); font-weight:600; margin-bottom:14px; display:block;
}
.ww-row{
  display:flex; flex-wrap:wrap; gap:10px 0; row-gap:10px;
}
.ww-row span{
  font-family:var(--serif); font-size:1.02rem; color:var(--ink-soft);
  padding:0 20px; border-right:1px solid var(--line);
}
.ww-row span:last-child{border-right:none;}
@media (max-width:680px){
  .ww-row span{padding:0 14px 0 0; border-right:none;}
}

/* Visual case-study cards (photo/graphic + headline + teaser, click to expand) */
.vcard-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:22px;}
@media (max-width:720px){.vcard-grid{grid-template-columns:1fr;}}
.vcard{
  background:var(--paper); border:1px solid var(--line); border-radius:4px; overflow:hidden;
  cursor:pointer; transition:border-color .18s, transform .18s, box-shadow .18s;
  display:block; text-align:left; padding:0; font-family:inherit;
}
.vcard:hover{
  border-color:var(--mauve); transform:translateY(-3px);
  box-shadow:0 14px 30px -18px rgba(107,70,87,.35);
}
.vcard .vcard-media{width:100%; height:190px; overflow:hidden; background:var(--mauve-pale);}
.vcard .vcard-media img{width:100%; height:100%; object-fit:cover; display:block;}
.vcard .vcard-media svg{width:100%; height:100%; display:block;}
.vcard .vcard-body{padding:20px 22px 22px;}
.vcard .vcard-tag{
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sand);
  font-weight:600; display:block; margin-bottom:8px;
}
.vcard h3{font-size:1.08rem; margin-bottom:.4em;}
.vcard .vcard-teaser{font-size:.92rem; color:var(--ink-soft); margin-bottom:0;}
.vcard .vcard-more{
  display:inline-block; margin-top:14px; font-size:.85rem; font-weight:600; color:var(--mauve-deep);
}

/* Modal / lightbox for expanded case study */
.cs-modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(46,37,48,.55);
  z-index:100; padding:24px; overflow-y:auto;
}
.cs-modal-overlay.open{display:flex; align-items:flex-start; justify-content:center;}
.cs-modal{
  background:var(--paper); border-radius:6px; max-width:720px; width:100%;
  margin:40px 0; padding:0; overflow:hidden; position:relative;
}
.cs-modal .cs-modal-media{width:100%; height:260px; overflow:hidden; background:var(--mauve-pale);}
.cs-modal .cs-modal-media img{width:100%; height:100%; object-fit:cover; display:block;}
.cs-modal .cs-modal-media svg{width:100%; height:100%; display:block;}
.cs-modal .cs-modal-body{padding:30px 34px 36px;}
.cs-modal .cs-modal-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line); color:var(--ink); font-size:1.1rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2;
}
.cs-modal .cs-modal-close:hover{background:var(--mauve-pale);}
.cs-modal .meta{margin-top:0;}
@media (max-width:680px){
  .cs-modal{margin:16px 0;}
  .cs-modal .cs-modal-media{height:180px;}
  .cs-modal .cs-modal-body{padding:24px 22px 28px;}
}


/* ============================================
   CTA band (standalone, before footer)
   ============================================ */
.cta-band{
  max-width:var(--max); margin:20px auto 0; padding:44px var(--pad);
  background:var(--mauve-pale); border-radius:4px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.cta-band h2{margin-bottom:0;}
@media (max-width:680px){
  .cta-band{flex-direction:column; align-items:flex-start; text-align:left; margin:12px var(--pad) 0; padding:32px 26px;}
}

/* ============================================
   Insights — card grid
   ============================================ */
.insights-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:26px; margin-top:30px;
}
.insight-card{
  display:block; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  overflow:hidden; transition:border-color .18s, transform .18s, box-shadow .18s;
}
.insight-card:hover{
  border-color:var(--mauve); transform:translateY(-3px);
  box-shadow:0 14px 30px -18px rgba(107,70,87,.35);
}
.insight-thumb{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--mauve-pale);}
.insight-body{padding:18px 20px 20px;}
.insight-meta{
  display:flex; align-items:center; gap:7px; font-size:.78rem;
  color:var(--ink-soft); margin-bottom:10px;
}
.insight-avatar{width:22px; height:22px; border-radius:50%; object-fit:cover; display:block;}
.insight-meta .dot{color:var(--line);}
.insight-title{
  font-family:var(--serif); font-size:1.1rem; font-weight:600; margin:0 0 8px;
  line-height:1.3; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.insight-excerpt{
  font-size:.9rem; color:var(--ink-soft); line-height:1.5; margin-bottom:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.insights-follow{margin-top:34px; font-size:.9rem; color:var(--ink-soft);}

/* ============================================
   Insight post (article) page
   ============================================ */
.post-back{
  display:inline-block; font-size:.86rem; font-weight:600; color:var(--mauve-deep);
  text-decoration:none; margin-bottom:20px;
}
.post-back:hover{color:var(--ink);}
.post-meta{
  display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--ink-soft); margin-bottom:6px;
}
.post-meta .dot{color:var(--line);}
.post-meta img{width:26px; height:26px; border-radius:50%; object-fit:cover;}
article.post{max-width:720px; margin:0 auto;}
article.post h1{margin-top:6px;}
article.post .post-excerpt{font-size:1.1rem; color:var(--ink-soft); margin-bottom:1.4em;}
.post-gallery{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px;
  margin:26px 0 34px;
}
.post-gallery img{width:100%; height:340px; object-fit:cover; border-radius:4px; border:1px solid var(--line); display:block;}
article.post ol, article.post ul{padding-left:1.2em; color:var(--ink-soft);}
article.post li{margin-bottom:.9em;}
article.post p{color:var(--ink);}
article.post .lede-line{font-style:italic; color:var(--mauve-deep); margin-top:26px;}

/* ============================================
   Contact — grouped engagement types
   ============================================ */
.engagement-group{margin-top:26px;}
.engagement-group h4{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sand); font-weight:600; margin:0 0 12px;
}
.engagement-list{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.engagement-list li{
  border-left:3px solid var(--mauve); background:var(--paper);
  padding:16px 20px; border-radius:0 4px 4px 0; font-size:.96rem;
}
.engagement-list li strong{color:var(--ink); font-family:var(--sans); font-weight:600;}
.engagement-note{margin-top:22px; font-size:.94rem; color:var(--ink-soft); font-style:italic;}

@media (max-width:680px){
  .post-gallery img{height:240px;}
}

/* ============================================
   Pillars (Diagnose / Strategy / Activation)
   ============================================ */
.pillar-intro{color:var(--ink-soft); max-width:640px;}
.pillars{display:grid; gap:22px; margin-top:26px;}
.pillar-card{
  --pc:#6B4657; --pt:#F3EAEE;
  background:#fff; border:1px solid var(--line); border-left:5px solid var(--pc);
  border-radius:4px; padding:0 0 24px; overflow:hidden;
}
.p-diagnose{--pc:#4F716C; --pt:#EDF3F1;}
.p-strategy{--pc:#6B4657; --pt:#F3EAEE;}
.p-activation{--pc:#8C6A28; --pt:#F7F0E2;}
.pillar-head{display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:18px 26px 6px 0;}
.pillar-ribbon{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--pc); color:#fff;
  font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 34px 10px 22px;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}
.pillar-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.22);
  font-size:.74rem; letter-spacing:0;
}
.pillar-problem{margin:0; font-style:italic; color:var(--pc); font-size:1.02rem;}
.pillar-body{display:grid; grid-template-columns:1fr 1fr; gap:26px; padding:14px 26px 0 26px;}
.pillar-body.single{grid-template-columns:1fr;}
.pillar-label{
  font-family:var(--sans); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--pc); margin:0 0 12px;
}
.activity-list{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.activity-list li{position:relative; padding-left:20px; font-size:.97rem; color:var(--ink-soft); line-height:1.5;}
.activity-list li::before{content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:50%; border:2px solid var(--pc);}
.pillar-col.deliverables{background:var(--pt); border-radius:4px; padding:18px 20px; align-self:start;}
.deliverable-list{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.pillar-body.single .deliverable-list{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));}
.deliverable-list li{background:#fff; border-radius:4px; padding:12px 16px; border-top:3px solid var(--pc); font-size:.94rem; color:var(--ink-soft); line-height:1.5; box-shadow:0 1px 2px rgba(46,37,48,.06);}
.deliverable-list strong{display:block; color:var(--ink); font-family:var(--sans); font-weight:600; margin-bottom:2px;}
.pillar-note{margin-top:22px; font-size:.94rem; color:var(--ink-soft); font-style:italic;}
@media (max-width:760px){
  .pillar-body{grid-template-columns:1fr; gap:20px; padding:12px 18px 0 18px;}
  .pillar-head{padding:16px 18px 4px 0;}
  .pillar-problem{padding-left:18px;}
}
.form-status{margin-top:18px; padding:16px 20px; border-left:3px solid var(--mauve); background:var(--paper); border-radius:0 4px 4px 0;}