@import url("./business-feedback-loop.css");

/* Project Experience · Contemporary Art Editorial */
.cip-experience-page{background:#eef3fa}
.experience-viewport{overflow:hidden;border-radius:26px;background:#fff;box-shadow:0 34px 90px rgba(8,21,47,.14)}

.art-experience-hero{
  position:relative;
  min-height:680px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:30px;
  align-items:end;
  padding:68px 62px 54px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 88% 15%,rgba(125,242,194,.26),transparent 20%),
    radial-gradient(circle at 45% -8%,rgba(255,139,24,.34),transparent 26%),
    linear-gradient(126deg,#061632 0%,#0d2d67 54%,#123e55 100%);
}
.art-experience-hero::before{content:"";position:absolute;inset:20px;border:1px solid rgba(255,255,255,.2);pointer-events:none}
.art-experience-hero::after{content:"";position:absolute;inset:40px;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:88px 88px;mask-image:linear-gradient(135deg,#000,transparent 78%);pointer-events:none}
.art-hero-word{position:absolute;left:52px;top:48px;z-index:1;color:rgba(255,255,255,.065);font-size:clamp(88px,14vw,205px);font-weight:950;line-height:.72;letter-spacing:-.095em;text-transform:uppercase;white-space:nowrap;transform:rotate(-2deg)}
.art-experience-hero .hero-copy{position:relative;z-index:3;align-self:end;max-width:760px}
.art-experience-hero .hero-eyebrow{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08);letter-spacing:.16em}
.art-experience-hero h1{margin:24px 0 20px;font-size:clamp(52px,7.2vw,104px);line-height:.92;letter-spacing:-.078em}
.art-experience-hero h1 span{display:inline-block;color:var(--art-mint)}
.art-experience-hero p{max-width:650px;font-size:15px;line-height:1.8;color:rgba(255,255,255,.74)}
.art-experience-hero .hero-subtitle{border:0;border-left:5px solid var(--art-orange);border-radius:0;background:transparent;box-shadow:none;padding:5px 0 5px 15px;font-size:12px;letter-spacing:.01em}
.art-hero-index{position:relative;z-index:4;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-self:end}
.art-index-card{position:relative;min-height:150px;padding:20px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);backdrop-filter:blur(13px)}
.art-index-card:first-child{grid-column:1/-1;min-height:210px;background:var(--art-mint);color:#071c43}
.art-index-card span{display:block;font-size:9px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;opacity:.68}
.art-index-card strong{display:block;margin-top:30px;font-size:clamp(38px,5vw,74px);line-height:.82;letter-spacing:-.075em}
.art-index-card:first-child strong{font-size:clamp(64px,9vw,122px)}
.art-index-card small{display:block;margin-top:12px;font-size:10px;font-weight:750;opacity:.72}

.art-experience-body{position:relative;padding:52px 54px 76px}
.art-experience-body::before{content:"PROJECT / ARCHIVE / CIP";position:absolute;right:-32px;top:250px;color:rgba(8,21,47,.045);font-size:82px;font-weight:950;letter-spacing:-.06em;transform:rotate(90deg);transform-origin:right top;pointer-events:none}
.experience-breadcrumb{position:relative;z-index:2}
.content-section{position:relative;padding-top:96px}
.section-head{grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);align-items:start}
.section-head h2{font-size:clamp(42px,6vw,76px);line-height:.94;letter-spacing:-.07em;max-width:820px}
.section-head p{padding-top:10px;border-top:1px solid var(--art-line);font-size:13px}
.section-head .cip-kicker{border-radius:0;border:0;border-left:4px solid var(--art-electric);box-shadow:none;background:transparent;padding-left:10px}

.art-flagship{position:relative;display:grid;grid-template-columns:minmax(0,1.28fr) minmax(280px,.72fr);gap:0;border:1px solid var(--art-line);background:#fff;box-shadow:var(--art-shadow)}
.art-flagship::before{content:"01";position:absolute;right:18px;top:-55px;color:rgba(8,21,47,.055);font-size:190px;font-weight:950;line-height:1;letter-spacing:-.09em;pointer-events:none}
.art-flagship .info-card,.art-flagship .flagship-profile{border:0;border-radius:0;box-shadow:none}
.art-flagship .info-card{border-right:1px solid var(--art-line)}
.art-flagship .info-card-cap{min-height:66px;background:#071c43;letter-spacing:.08em}
.art-flagship .info-card-body{padding:46px}
.art-flagship .info-card h3{font-size:clamp(38px,5vw,68px);line-height:1.02}
.art-flagship .flagship-profile{padding:34px;background:linear-gradient(180deg,#f8fbff,#edf4fb)}

.capability-track{grid-template-columns:repeat(10,minmax(0,1fr));gap:10px;padding-top:48px}
.capability-track::before{height:2px;top:20px;border-radius:0}
.capability-card{grid-column:span 2;min-height:230px;border-radius:16px;padding:24px 18px;box-shadow:none;transition:transform .2s ease,box-shadow .2s ease}
.capability-card:nth-child(even){transform:translateY(28px)}
.capability-card:hover{transform:translateY(-4px);box-shadow:var(--art-shadow)}
.capability-card:nth-child(even):hover{transform:translateY(20px)}
.capability-card h3{font-size:21px}

.archive-section{padding-top:120px}
.archive-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.archive-header .art-display{max-width:840px;color:var(--art-ink)}
.archive-header p{max-width:340px;margin:0 0 6px;color:var(--cip-muted);font-size:12px;line-height:1.7}
.archive-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.archive-grid .project-card{min-height:310px;border-radius:16px;box-shadow:none;transition:transform .2s ease,box-shadow .2s ease}
.archive-grid .project-card:hover{transform:translateY(-5px);box-shadow:var(--art-shadow)}
.archive-grid .project-card:nth-child(1){grid-column:span 7;--project-accent:var(--art-orange)}
.archive-grid .project-card:nth-child(2){grid-column:span 5;--project-accent:var(--art-violet)}
.archive-grid .project-card:nth-child(3){grid-column:span 4;--project-accent:var(--art-mint)}
.archive-grid .project-card:nth-child(4){grid-column:span 8;--project-accent:var(--art-electric)}
.archive-grid .project-card:nth-child(5){grid-column:span 6;--project-accent:var(--art-yellow)}
.archive-grid .project-card:nth-child(6){grid-column:span 6;--project-accent:var(--art-orange)}
.archive-grid .project-card:nth-child(7){grid-column:span 12;min-height:260px;--project-accent:var(--art-mint)}
.archive-grid .project-card-cap{background:var(--project-accent);color:#08152f;min-height:52px;letter-spacing:.08em}
.archive-grid .project-card-cap .num{color:#08152f}
.archive-grid .project-card-body{padding:28px}
.archive-grid .project-card h3{font-size:clamp(24px,3vw,42px);line-height:1.06}

.art-timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:24px;border-top:1px solid var(--art-line);border-bottom:1px solid var(--art-line)}
.art-time{position:relative;min-height:210px;padding:24px 18px;border-right:1px solid var(--art-line)}
.art-time:last-child{border-right:0}
.art-time::before{content:"";position:absolute;left:18px;top:-6px;width:11px;height:11px;border-radius:50%;background:var(--time-color,var(--art-electric))}
.art-time:nth-child(1){--time-color:var(--art-orange)}.art-time:nth-child(2){--time-color:var(--art-yellow)}.art-time:nth-child(3){--time-color:var(--art-mint)}.art-time:nth-child(4){--time-color:var(--art-electric)}.art-time:nth-child(5){--time-color:var(--art-violet)}
.art-time strong{display:block;font-size:clamp(30px,4vw,54px);letter-spacing:-.065em}
.art-time span{display:block;margin-top:12px;color:var(--cip-muted);font-size:11px;line-height:1.55}

.feedback-panel{border-radius:16px;box-shadow:none;background:#fff}
.closing-panel{border-radius:16px;padding:60px;background:linear-gradient(110deg,#061632,#0d2d67 56%,#204a59)}
.closing-panel h2{font-size:clamp(44px,6vw,82px);line-height:.95}

@media(max-width:1020px){.art-experience-hero{grid-template-columns:1fr;min-height:0}.art-hero-index{grid-template-columns:repeat(3,1fr)}.art-index-card:first-child{grid-column:auto;min-height:150px}.art-index-card:first-child strong{font-size:54px}.art-flagship{grid-template-columns:1fr}.art-flagship .info-card{border-right:0;border-bottom:1px solid var(--art-line)}.capability-track{grid-template-columns:repeat(2,1fr)}.capability-card{grid-column:auto}.capability-card:nth-child(even){transform:none}.archive-grid .project-card{grid-column:span 6!important}.archive-grid .project-card:last-child{grid-column:span 12!important}.art-timeline{grid-template-columns:repeat(3,1fr)}.art-time:nth-child(3){border-right:0}.art-time:nth-child(n+4){border-top:1px solid var(--art-line)}}
@media(max-width:700px){.art-experience-hero{padding:48px 25px 34px}.art-hero-word{left:20px;top:28px;font-size:74px}.art-experience-hero h1{font-size:48px}.art-hero-index{grid-template-columns:1fr}.art-index-card,.art-index-card:first-child{min-height:110px}.art-index-card strong,.art-index-card:first-child strong{margin-top:18px;font-size:42px}.art-experience-body{padding:32px 20px 48px}.section-head{grid-template-columns:1fr}.content-section{padding-top:72px}.art-flagship .info-card-body{padding:28px 22px}.capability-track{grid-template-columns:1fr;padding-top:20px}.capability-track::before{display:none}.archive-header{align-items:flex-start;flex-direction:column}.archive-grid{grid-template-columns:1fr}.archive-grid .project-card{grid-column:1!important}.art-timeline{grid-template-columns:1fr}.art-time{min-height:130px;border-right:0;border-bottom:1px solid var(--art-line)}.art-time:last-child{border-bottom:0}.closing-panel{padding:38px 24px}}