/* ===========================================================
   Shared: page hero (Process / About / Services / Projects listing)
   =========================================================== */
.page-hero{
  position:relative; overflow:hidden; color:#fff;
  padding: 70px 0 60px;
  min-height: 260px;
  display:flex; align-items:center;
}
.page-hero .hero-bg{ position:absolute; inset:0; z-index:-1; }
.page-hero h1{
  font-weight:700; font-size: clamp(32px,5.5vw,64px); line-height:1.1;
}
.page-hero p{
  margin-top:18px; font-size: clamp(15px,1.6vw,20px); font-weight:500; max-width:640px;
}

.accent-up svg{ width:16px; height:16px; }
.accent-up-light{ border-color: rgba(255,255,255,.35); color:#fff; }
.accent-up-floating{
  position:absolute; top:-17px; left:-17px; z-index:2; background:#fff;
  color: var(--color-black);
}
.process-desc-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.process-desc-row .process-desc{ flex:1; }

/* Breadcrumb / back link */
.back-link{
  display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:500;
  padding: 18px 0 0;
}
.back-link svg{ width:18px; height:18px; }

/* ===========================================================
   Section eyebrow row (icon + heading on same line)
   =========================================================== */
.section-head-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  margin-bottom: 40px;
}
.section-head-row h1, .section-head-row h2{ margin:0; }

/* ===========================================================
   Services page
   =========================================================== */
.services-hero{ padding-block: 80px 60px; }
.services-hero .eyebrow-list{
  margin-top:22px; font-size:14px; font-weight:700; letter-spacing:0px; color:var(--color-tertiary-800);
  display:flex; flex-wrap:wrap; gap:8px 6px; max-width:820px;
}
.services-hero .cta-row{ margin-top:26px; }
.services-grid{
  padding-block: 20px 90px;
  display:grid; grid-template-columns: repeat(3,1fr); gap:32px;
}
.service-card--narrow{ grid-column: span 1; }
.service-card--wide{ grid-column: span 2; }
.service-card-img{
  border-radius:16px; overflow:hidden; background: var(--color-gray-100);
}
.service-card--narrow .service-card-img{ aspect-ratio: 390/421; }
.service-card--wide .service-card-img{ aspect-ratio: 815/421; }
.service-card-img img{ width:100%; height:100%; object-fit:cover; transition: transform 500ms ease; }
.service-card:hover .service-card-img img{ transform: scale(1.05); }
.service-card h3{ margin-top:18px; font-size:22px; font-weight:600; }
.service-card .tag-list-dark{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; }
.tag-list-dark li{
  display:inline-flex; align-items:center; min-height:36px; padding:5px 10px;
  border-radius: var(--radius-lg); border:0.7px solid var(--color-black);
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
}

/* ===========================================================
   Process (dedicated) page
   =========================================================== */
.process-page-tabs{
  display:flex; justify-content:space-between; border-bottom:1px solid #e2e2e2; padding-bottom:20px;
  gap:20px; flex-wrap:wrap;
}
.process-page-tab{
  background:none; border:none; display:flex; align-items:baseline; gap:6px;
  font-family: var(--font-display); color: var(--color-black); opacity:.4;
}
.process-page-tab.is-active{ opacity:1; }
.process-page-tab .tab-index{ font-size:16px; font-weight:400; color: var(--color-gray-500); }
.process-page-tab .tab-label{ font-size: clamp(22px,3.4vw,34px); font-weight:400; }
.process-page-tab.is-active .tab-label{ position:relative; }
.process-page-tab.is-active .tab-label::after{
  content:""; position:absolute; left:0; right:0; bottom:-22px; height:3px; background: var(--color-black);
}
.process-page-body{ padding-block: 56px 90px; }
.process-page-panel.is-active{ animation: panelFadeIn 420ms ease both; }
.process-page-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; }
.process-page-desc{ font-size: clamp(18px,2.4vw,25px); font-weight:500; line-height:1.6; max-width:820px; }
.process-page-cards{
  margin-top:44px; display:grid; grid-template-columns: repeat(3,1fr); gap:24px;
}
.process-page-card{
  background: var(--color-black); color:#fff; border-radius:10px; padding:28px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.process-page-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.18); }
.process-page-card h3{ font-size:19px; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.process-page-card p{ margin-top:14px; font-size:14px; line-height:1.6; color: rgba(255,255,255,.85); }

/* ===========================================================
   Projects listing page
   =========================================================== */
.projects-listing{ padding-block: 20px 90px; }
.projects-listing-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:36px;
}
.plisting-card{ display:block; }
.plisting-card-media{
  border-radius:14px; overflow:hidden; aspect-ratio: 594/421;
  background: var(--card-bg, var(--color-gray-100)); position:relative;
  transition: outline-color var(--transition);
}
.plisting-card-media img{ width:100%; height:100%; object-fit:cover; transition: transform 500ms ease; }
.plisting-card h3{ margin-top:20px; font-size:22px; font-weight:600; }
.plisting-card-meta{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:6px; }
.plisting-card-meta p{ font-size:12px; color: var(--color-gray-900); }
.plisting-card:hover .plisting-card-media{ outline: 2px solid var(--color-black); outline-offset:4px; }
.plisting-card:hover .plisting-card-media img{ transform: scale(1.05); }

/* ===========================================================
   Project detail page
   =========================================================== */
.pd-header{ padding-block: 8px 40px; }
.pd-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-top:26px; }
.pd-title-row h1{ font-size: clamp(30px,4.5vw,42px); font-weight:600; }
.pd-location{ font-size:14px; color: var(--color-gray-900); margin-top:6px; }
.pd-desc{ margin-top:24px; font-size:16px; line-height:1.8; max-width:1000px; color: var(--color-tertiary-800); }
.pd-hero-media{
  margin-top:40px; border-radius:14px; overflow:hidden;
  background: var(--card-bg, var(--color-gray-100));
}
.pd-hero-media img{ width:100%; height:auto; display:block; }
.pd-subgrid{
  margin-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:28px;
}
.pd-sub-media{
  border-radius:14px; overflow:hidden; background: var(--card-bg, var(--color-gray-100));
}
.pd-sub-media img{ width:100%; height:auto; display:block; }
.pd-sub-caption h4{ margin-top:16px; font-size:17px; font-weight:600; }
.pd-sub-caption p{ margin-top:4px; font-size:14px; color: var(--color-gray-900); }
.pd-full-media{
  margin-top:36px; border-radius:14px; overflow:hidden; background: var(--card-bg, var(--color-gray-100));
}
.pd-full-media img{ width:100%; height:auto; display:block; }
.pd-full-caption h4{ margin-top:16px; font-size:17px; font-weight:600; }
.pd-full-caption p{ margin-top:4px; font-size:14px; color: var(--color-gray-900); }
.pd-nav{
  margin-top:70px; padding-top:30px; border-top:1px solid #eee;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.pd-nav a{ font-size:15px; font-weight:600; }

/* ===========================================================
   About page
   =========================================================== */
.about-hero{ padding-block: 70px 56px; }
.about-body{ padding-block: 56px; }
.about-body p{ font-size:16px; line-height:1.85; color: var(--color-tertiary-800); max-width:1000px; }
.about-body p + p{ margin-top:18px; }
.about-list{ margin: 20px 0 0; max-width:1000px; }
.about-list li{
  position:relative; padding-left:22px; font-weight:600; font-size:16px; margin-bottom:10px;
}
.about-list li::before{
  content:""; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; background: var(--color-black);
}
.about-divider{ margin-top:46px; border:none; border-top:1px solid #e4e4e4; }

.founder-section{ padding-block: 56px 90px; }
.founder-section h2{ font-size: clamp(30px,4.6vw,44px); font-weight:700; }
.founder-subtitle{ margin-top:10px; font-size:16px; font-weight:600; }
.founder-grid{
  margin-top:36px; display:grid; grid-template-columns: 300px 1fr; gap:44px; align-items:start;
}
.founder-photo{
  aspect-ratio: 4/5; border-radius:14px; overflow:hidden; background: var(--color-gray-100);
  display:flex; align-items:center; justify-content:center;
}
.founder-photo img{ width:100%; height:100%; object-fit:cover; }
.founder-photo-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color: var(--color-gray-500); font-size:13px; text-align:center; padding:20px;
}
.founder-photo-placeholder svg{ width:52px; height:52px; opacity:.5; }
.founder-copy h3{ font-size:18px; font-weight:700; }
.founder-copy p{ margin-top:16px; font-size:15px; line-height:1.8; color: var(--color-tertiary-800); }

/* ===========================================================
   Responsive additions
   =========================================================== */
@media (max-width: 1024px){
  .services-grid{ grid-template-columns: 1fr; }
  .service-card--narrow, .service-card--wide{ grid-column: span 1; }
  .projects-listing-grid{ grid-template-columns: 1fr; }
  .process-page-cards{ grid-template-columns: 1fr; }
  .pd-subgrid{ grid-template-columns: 1fr; }
  .founder-grid{ grid-template-columns: 220px 1fr; }
}

@media (max-width: 768px){
  .page-hero{ padding-block: 50px 40px; }
  .services-hero, .services-grid, .projects-listing, .process-page-body,
  .about-hero, .about-body, .founder-section{ padding-block: 16px; }
  .process-page-tabs{ flex-direction:column; gap:22px; }
  .process-page-tab.is-active .tab-label::after{ bottom:-8px; }
  .founder-grid{ grid-template-columns: 1fr; }
  .founder-photo{ max-width:280px; }
  .pd-title-row{ flex-direction:column; }
  .section-head-row{ flex-direction:column; }
}