.about-editorial{max-width:1440px;margin:auto;padding:40px 44px 100px}.about-editorial .eyebrow{text-transform:uppercase;letter-spacing:1.8px;font-size:11px;color:#777;font-weight:600;margin-bottom:18px}.about-hero{display:grid;grid-template-columns:1fr 430px;gap:40px;padding:70px 0;border-bottom:1px solid #eee}.about-hero h1{font-size:76px;line-height:.98;letter-spacing:-4px;margin-bottom:28px}.about-hero p{font-size:18px;line-height:1.6}.tags{font-size:11px;letter-spacing:1.5px;margin-top:50px}.hero-art{position:relative;min-height:360px}.art-card{position:absolute;background:#f2f0ec;padding:30px;width:230px;height:180px;font-weight:600}.art-card.dark{background:#111;color:white;top:80px;left:60px}.art-card.photo{right:0;bottom:20px}.who{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #eee}.portrait-placeholder{min-height:560px;background:linear-gradient(135deg,#eee,#aaa)}.copy{padding:80px 70px}.copy h2,.thinking h2,.capabilities h2,.process h2{font-size:40px;line-height:1.1;letter-spacing:-1.5px;margin-bottom:25px}.copy p{margin-bottom:20px;line-height:1.7}.thinking{background:#111;color:white;padding:80px;display:grid;grid-template-columns:1fr 1fr;gap:60px}.thinking p{max-width:430px}.venn-diagram{position:relative;height:360px;display:flex;align-items:center;justify-content:center;color:#fff}.venn-diagram .circle{width:220px;height:220px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:absolute}.venn-diagram .circle strong{font-size:13px;letter-spacing:1px;margin-bottom:22px}.venn-diagram .circle span{font-size:12px;line-height:1.8;color:#ccc}.circle-left{transform:translateX(-95px)}.circle-right{transform:translateX(95px)}.venn-center{z-index:2;text-align:center;font-size:12px;font-weight:600;letter-spacing:1px;line-height:1.5}.capabilities{padding:80px 0;border-bottom:1px solid #eee}.caps{display:grid;grid-template-columns:repeat(5,1fr);gap:30px}.caps h3{font-size:18px;margin-bottom:10px}.caps p,.steps p{font-size:14px;color:#555}.process{padding:80px 0}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.steps b{color:#2868d8;font-size:20px}.closing{background:#111;color:white;padding:70px}.closing h2{font-size:54px}.closing a{text-decoration:underline}@media(max-width:900px){.about-hero,.who,.thinking,.caps,.steps{grid-template-columns:1fr}.about-hero h1{font-size:52px}.copy{padding:40px}.thinking{padding:40px}}

/* Editorial About refinements */
.portrait{width:100%;height:100%;overflow:hidden;}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%);}
.dark-thinking{background:#111;color:#fff;}
.dark-thinking .eyebrow{color:#fff;}
.dark-thinking .diagram{border-color:rgba(255,255,255,.4);}

/* About v4 — editorial polish */
.about-editorial{max-width:var(--site-content,1440px);padding:48px var(--site-pad,44px) 120px}
.about-hero{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:72px;padding:92px 0 104px}
.about-hero h1{font-size:clamp(64px,6.3vw,96px);line-height:.94;letter-spacing:-.055em;max-width:900px}
.about-hero p{max-width:680px;color:#353535}
.tags{margin-top:64px;color:#5b5b5b}
.hero-art{min-height:430px}
.art-card{border:1px solid #e8e8e8;box-shadow:0 16px 44px rgba(0,0,0,.045)}
.art-card.dark{border-color:#111;top:92px;left:42px}
.art-card.photo{right:18px;bottom:24px}
.who{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
.portrait{min-height:650px;background:#efefed}
.portrait img{object-position:center 44%;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.who:hover .portrait img{transform:scale(1.012)}
.copy{padding:104px 8vw 104px 84px;align-self:center}
.copy h2,.thinking h2,.capabilities h2,.process h2{font-size:clamp(38px,3.2vw,52px);letter-spacing:-.04em}
.copy p{font-size:16px;color:#414141;max-width:620px}
.copy strong{display:block;margin-top:34px;line-height:1.55}

/* Philosophy: one strong idea, one large diagram */
.thinking{margin-left:calc(-1*var(--site-pad,44px));margin-right:calc(-1*var(--site-pad,44px));padding:112px max(var(--site-pad,44px),calc((100vw - var(--site-content,1440px))/2 + var(--site-pad,44px)));grid-template-columns:minmax(340px,.78fr) minmax(560px,1.22fr);gap:7vw;align-items:center;min-height:680px}
.thinking .eyebrow{color:#a7a7a7}
.thinking h2{max-width:570px;margin-bottom:34px}
.thinking p{max-width:500px;color:#bdbdbd;font-size:16px;line-height:1.75}
.venn-diagram{height:520px;min-width:620px}
.venn-diagram .circle{width:360px;height:360px;border-color:rgba(255,255,255,.52);background:rgba(255,255,255,.015)}
.circle-left{transform:translateX(-145px)}
.circle-right{transform:translateX(145px)}
.venn-diagram .circle strong{font-size:14px;letter-spacing:.16em;margin-bottom:30px}
.venn-diagram .circle span{font-size:13px;line-height:2;color:#bdbdbd;letter-spacing:.015em}
.venn-center{width:150px;font-size:12px;letter-spacing:.16em;line-height:1.65;color:#fff;text-shadow:0 0 20px rgba(255,255,255,.08)}

.capabilities{padding:112px 0 118px}
.capabilities>h2,.process>h2{margin-bottom:56px}
.caps{gap:0;border-top:1px solid #dedede}
.caps>div{padding:28px 28px 8px 0;border-right:1px solid #e5e5e5;min-height:170px}
.caps>div+div{padding-left:28px}
.caps>div:last-child{border-right:0}
.caps h3{font-size:17px;line-height:1.25}
.caps p{line-height:1.6}
.process{padding:112px 0 120px}
.steps{gap:0;border-top:1px solid #dedede}
.steps>div{padding:30px 32px 20px 0;border-right:1px solid #e5e5e5;min-height:155px}
.steps>div+div{padding-left:32px}
.steps>div:last-child{border-right:0}
.steps b{display:block;margin-bottom:32px;color:#111;font-size:13px;letter-spacing:.12em}
.steps h3{font-size:20px;margin-bottom:10px}
.closing{margin-left:calc(-1*var(--site-pad,44px));margin-right:calc(-1*var(--site-pad,44px));padding:96px max(var(--site-pad,44px),calc((100vw - var(--site-content,1440px))/2 + var(--site-pad,44px)))}
.closing h2{font-size:clamp(50px,5vw,76px);letter-spacing:-.05em;margin-bottom:24px}

@media(max-width:1050px){
 .about-editorial{padding-left:var(--site-pad,32px);padding-right:var(--site-pad,32px)}
 .thinking,.closing{margin-left:calc(-1*var(--site-pad,32px));margin-right:calc(-1*var(--site-pad,32px));padding-left:var(--site-pad,32px);padding-right:var(--site-pad,32px)}
 .thinking{grid-template-columns:1fr;gap:34px}
 .venn-diagram{min-width:0;width:100%;height:500px}
 .venn-diagram .circle{width:330px;height:330px}
 .circle-left{transform:translateX(-132px)}.circle-right{transform:translateX(132px)}
}
@media(max-width:760px){
 .about-editorial{padding:24px 20px 72px}
 .about-hero{grid-template-columns:1fr;padding:64px 0 72px;gap:32px}
 .about-hero h1{font-size:54px}
 .hero-art{min-height:330px}
 .who{grid-template-columns:1fr}.portrait{min-height:520px}.copy{padding:64px 0}
 .thinking,.closing{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
 .thinking{padding-top:76px;padding-bottom:80px;min-height:0}
 .venn-diagram{height:390px;transform:scale(.9)}
 .venn-diagram .circle{width:270px;height:270px}
 .circle-left{transform:translateX(-104px)}.circle-right{transform:translateX(104px)}
 .venn-diagram .circle span{font-size:11px;line-height:1.8}.venn-center{font-size:10px;width:110px}
 .caps,.steps{grid-template-columns:1fr}.caps>div,.caps>div+div,.steps>div,.steps>div+div{padding:24px 0;border-right:0;border-bottom:1px solid #e5e5e5;min-height:0}
}

/* Capabilities editorial full width update */
.full-width-cap{width:100vw;margin-left:calc(50% - 50vw);padding:90px 0 100px;border-top:1px solid #eee;border-bottom:1px solid #eee;}
.cap-inner{width:100%;padding:0 48px;box-sizing:border-box;}
.full-width-cap .eyebrow{margin-bottom:50px;}
.caps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;}
.cap-item{padding:0 40px;min-height:300px;border-left:1px solid #ddd;position:relative;}
.cap-item:first-child{border-left:0;}
.cap-num{display:block;font-size:12px;font-weight:700;margin-bottom:32px;}
.icon{height:54px;width:54px;margin-bottom:35px;position:relative;}
.eye-icon:before{content:"";position:absolute;left:2px;top:12px;width:42px;height:26px;border:3px solid #111;border-radius:70% 0 70% 0;transform:rotate(0deg);}
.eye-icon:after{content:"";position:absolute;left:18px;top:20px;width:10px;height:10px;border:3px solid #111;border-radius:50%;}
.grid-icon{background:linear-gradient(90deg,#111 2px,transparent 2px),linear-gradient(#111 2px,transparent 2px);background-size:16px 16px;border:2px solid #111;}
.list-icon:before{content:"";position:absolute;inset:8px 0;background:linear-gradient(#111 0 3px,transparent 3px 14px,#111 14px 17px,transparent 17px 28px,#111 28px 31px);border-left:10px dotted #111;}
.monitor-icon{border:3px solid #111;height:35px;width:52px;margin-top:8px;}
.monitor-icon:after{content:"";position:absolute;left:22px;top:38px;height:10px;border-left:3px solid #111;box-shadow:0 10px 0 5px #111;}
.chart-icon:before{content:"";position:absolute;bottom:5px;left:5px;width:8px;height:25px;background:#111;box-shadow:16px -12px 0 #111,32px -25px 0 #111;}
.cap-item h3{font-size:18px;line-height:1.25;margin-bottom:18px;}
.cap-item p{font-size:14px;line-height:1.65;color:#555;max-width:220px;}
@media(max-width:900px){.caps{grid-template-columns:1fr}.cap-item{border-left:0;border-top:1px solid #ddd;padding:40px 0}.cap-inner{padding:0 24px}}

/* About v6 — unified full-width editorial system */
.about-editorial{max-width:none;width:100%;margin:0;padding:0;overflow:hidden}
.about-editorial>section{width:100%;margin:0;border-radius:0}
.about-hero,.who,.process{padding-left:clamp(28px,4vw,72px);padding-right:clamp(28px,4vw,72px)}
.about-hero{padding-top:clamp(72px,7vw,116px);padding-bottom:clamp(80px,8vw,128px);grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:clamp(40px,6vw,96px)}
.who{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);padding-left:0;padding-right:0}
.who .copy{padding:clamp(64px,7vw,112px) clamp(28px,6vw,96px)}
.thinking{margin:0;padding:clamp(88px,8vw,128px) clamp(28px,4vw,72px);grid-template-columns:minmax(330px,.75fr) minmax(600px,1.25fr);gap:clamp(52px,7vw,112px);min-height:700px}
.venn-diagram{height:560px;min-width:650px}
.venn-diagram .circle{width:390px;height:390px}
.circle-left{transform:translateX(-155px)}.circle-right{transform:translateX(155px)}
.full-width-cap{width:100%;margin:0;padding:clamp(84px,7vw,112px) 0 clamp(96px,8vw,128px)}
.cap-inner{padding:0 clamp(28px,4vw,72px)}
.full-width-cap .eyebrow{margin-bottom:56px}
.cap-item{padding:0 clamp(22px,2.5vw,42px);min-height:310px}
.cap-item:first-child{padding-left:0}.cap-item:last-child{padding-right:0}
.process{padding-top:clamp(88px,7vw,116px);padding-bottom:clamp(96px,8vw,128px);border-bottom:1px solid var(--line)}
.process>h2{margin-bottom:60px}
.steps>div{min-height:190px;padding-top:34px}
.closing{margin:0;padding:clamp(88px,8vw,128px) clamp(28px,4vw,72px)}

@media(max-width:1050px){
 .about-hero,.process{padding-left:32px;padding-right:32px}
 .thinking{padding-left:32px;padding-right:32px;grid-template-columns:1fr;gap:42px}
 .cap-inner{padding-left:32px;padding-right:32px}
 .closing{padding-left:32px;padding-right:32px}
 .venn-diagram{min-width:0;width:100%;height:510px}
 .venn-diagram .circle{width:340px;height:340px}
 .circle-left{transform:translateX(-135px)}.circle-right{transform:translateX(135px)}
}
@media(max-width:760px){
 .about-hero,.process{padding-left:20px;padding-right:20px}
 .who{grid-template-columns:1fr}
 .who .copy{padding:64px 20px}
 .thinking{padding:76px 20px 82px}
 .cap-inner{padding:0 20px}
 .closing{padding:76px 20px}
 .venn-diagram{height:400px;transform:none}
 .venn-diagram .circle{width:265px;height:265px}
 .circle-left{transform:translateX(-102px)}.circle-right{transform:translateX(102px)}
}

/* review fix — hero-art: staggered cluster so all three cards read (no hidden text) */
.hero-art{min-height:470px}
.art-card{width:230px;height:174px;padding:26px 28px;display:flex;align-items:flex-start}
.art-card.dark{top:0;left:0;right:auto;bottom:auto}
.art-card:not(.dark):not(.photo){top:104px;right:0;left:auto;bottom:auto}
.art-card.photo{top:274px;left:58px;right:auto;bottom:auto}
@media(max-width:760px){
 .hero-art{min-height:400px}
 .art-card{width:200px;height:150px}
 .art-card.photo{left:40px;top:238px}
}


/* v33 unified margin system */
:root {
  --site-margin: 104px;
  --site-width: calc(100vw - (var(--site-margin) * 2));
}

body {
  margin: 0;
}

.topnav,
.page-header,
.hero,
.work-grid,
.detail-page,
.contact-page,
.about-page,
footer {
  width: var(--site-width);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.detail-page h1,
.detail-page .project-meta,
.detail-page .project-description,
.detail-page .case-study-section,
.detail-page .gallery {
  width: 100%;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  :root {
    --site-margin: 24px;
  }
}

/* === About locked to the site's unified 1440 / --site-pad canvas (authoritative) === */
main.about-editorial{
  max-width:var(--site-content,1440px)!important;width:auto!important;
  margin-left:auto!important;margin-right:auto!important;
  padding:48px var(--site-pad,44px) 120px!important;overflow:visible!important;
}
/* in-canvas sections align flush to the canvas edge (no extra inset) */
.about-hero,.who,.process,.capabilities{padding-left:0!important;padding-right:0!important;}
/* dark full-bleed bands: 100vw breakout, content re-inset to the canvas edge */
.thinking,.closing{
  width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;
  padding-left:max(var(--site-pad,44px),calc((100vw - var(--site-content,1440px))/2 + var(--site-pad,44px)))!important;
  padding-right:max(var(--site-pad,44px),calc((100vw - var(--site-content,1440px))/2 + var(--site-pad,44px)))!important;
}
/* capabilities band is 100vw full-bleed; its inner row re-aligns to the canvas edge */
.full-width-cap{width:100vw!important;margin-left:calc(50% - 50vw)!important;padding-left:0!important;padding-right:0!important;}
.full-width-cap .cap-inner{max-width:var(--site-content,1440px)!important;margin:0 auto!important;padding-left:var(--site-pad,44px)!important;padding-right:var(--site-pad,44px)!important;}

/* Venn refinement (desktop): more circle overlap, labels spread outward,
   center label clear of the circle strokes */
@media(min-width:1051px){
  .circle-left{transform:translateX(-115px)}
  .circle-right{transform:translateX(115px)}
  .venn-diagram .circle-left>*{transform:translateX(-40px)}
  .venn-diagram .circle-right>*{transform:translateX(40px)}
  .venn-center{width:132px}
}

/* Capabilities — consistent icon box height + one-line titles (fix Digital Experiences alignment) */
.caps .cap-item .icon{height:54px!important;width:54px!important;margin-top:0!important;margin-bottom:32px!important;}
.caps .monitor-icon{border:0!important;}
.caps .monitor-icon:before{content:"";position:absolute;left:1px;top:6px;width:50px;height:33px;border:3px solid #111;}
.caps .monitor-icon:after{content:"";position:absolute;left:23px;top:39px;height:9px;border-left:3px solid #111;box-shadow:0 9px 0 4px #111;}
.caps .cap-item h3{white-space:nowrap;}
@media(max-width:900px){.caps .cap-item h3{white-space:normal;}}

/* === About hero — responsive fix (collapse to 1 column, stack floating cards) === */
@media(max-width:900px){
  .about-hero{grid-template-columns:1fr!important;gap:36px!important;padding:56px 0 60px!important;}
  .about-hero h1{font-size:clamp(38px,9vw,58px)!important;line-height:1.0!important;letter-spacing:-1.5px!important;max-width:100%!important;}
  .about-hero p{max-width:100%!important;}
  .tags{margin-top:36px!important;}
  /* floating art cards -> stacked normal flow */
  .hero-art{position:relative!important;min-height:0!important;display:flex!important;flex-direction:column!important;gap:14px!important;}
  .hero-art .art-card{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;height:auto!important;min-height:128px!important;}
}

/* Venn diagram — prioritize the center content; let the outer circle edges clip off-screen */
@media(max-width:560px){
  .thinking{overflow:hidden!important;}
  .venn-diagram{transform:none!important;height:400px!important;}
  .venn-diagram .circle{width:340px!important;height:340px!important;}
  .circle-left{transform:translateX(-100px)!important;}
  .circle-right{transform:translateX(100px)!important;}
  .venn-diagram .circle strong{font-size:13px!important;margin-bottom:22px!important;}
  .venn-diagram .circle span{font-size:12px!important;line-height:2!important;}
  .venn-center{width:132px!important;font-size:11px!important;}
}

/* Tablet/mobile — stack caps & steps flush-left (remove grid-gutter padding & side borders) */
@media(max-width:900px){
  .caps .cap-item,.caps .cap-item:first-child,.caps .cap-item:last-child{
    padding-left:0!important;padding-right:0!important;border-left:0!important;border-right:0!important;
  }
  .steps>div,.steps>div+div,.steps>div:last-child{
    padding-left:0!important;padding-right:0!important;border-right:0!important;
  }
}